//全标题 "appStyle":"2",
import { ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { Notes } from './notes';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';

const TAG: string = 'Card2Component';

/**
 * 大图卡:
 * compstyle:2
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
 */
@Component
export struct Card2Component {
  @State contentDTO: ContentDTO = new ContentDTO();
  @State loadImg: boolean = false;
  @State clicked: boolean = false;

  async aboutToAppear(): Promise<void> {
    this.loadImg = await onlyWifiLoadImg();
  }

  build() {
    Column() {
      Column() {
        Stack() {
          //新闻标题
          if (this.contentDTO.objectType == '5') {
            Notes({ objectType: this.contentDTO.objectType })
          }
          Text(this.contentDTO.newsTitle)
            .fontSize($r('app.float.font_size_17'))
            .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
            .align(Alignment.Start)
            .textIndent(this.contentDTO.objectType == '5' ? 40 : 0)
        }
        .alignContent(Alignment.TopStart)

        //大图
        Stack() {
          Image(this.loadImg ? this.contentDTO.coverUrl : '')
            .width(CommonConstants.FULL_WIDTH)
            .aspectRatio(16 / 9)
            .borderRadius($r('app.float.image_border_radius'))
            .backgroundColor(0xf5f5f5)
          //播放状态+时长
          CardMediaInfo({
            contentDTO: this.contentDTO
          })
        }
        .alignContent(Alignment.BottomEnd)
        .margin({ top: 8 })
      }
      .width(CommonConstants.FULL_WIDTH)
      .alignItems(HorizontalAlign.Start)

      //bottom
      // 评论等信息
      CardSourceInfo({ contentDTO: this.contentDTO })
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .onClick((event: ClickEvent) => {
      this.clicked = true;
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

@Extend(Text)
function bottomTextStyle() {
  .fontSize(12)
  .fontColor('#B0B0B0')
}