//全标题 "compStyle":"2",
import { CommonConstants } from 'wdConstant'
import { CompDTO } from '../../repository/bean/CompDTO'
import { ContentDTO } from '../../repository/bean/ContentDTO';
import { CardParser } from '../CardParser';

const TAG: string = 'BigPicCardComponent';

/**
 * 大图卡:
 * compstyle:2
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
 */
// @Entry
@Component
export struct BigPicCardComponent {
  @State compDTO: CompDTO = {} as CompDTO
  contentDTO: ContentDTO = {} as ContentDTO;

  build() {
    // this.cardBuild();
    this.originalBuild();
  }

  async aboutToAppear() {
    // 取第一个数据
    this.contentDTO = this.compDTO.operDataList[0];
    this.contentDTO.appStyle = "2";
  }

  @Builder
  originalBuild() {
    Column() {

      Column() {
        // TODO 测试代码
        Text("likeNum " + this.contentDTO?.interactData?.likeNum)
        //新闻标题
        Text(this.compDTO.operDataList[0].newsTitle)
          .fontSize(17)
          .fontColor('#222222')
          .maxLines(3)
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
          .align(Alignment.Start)
        //大图
        Stack() {
          Image(this.compDTO.operDataList[0].coverUrl)
            .backgroundColor('#888888')
            .borderRadius(4)
            .width('100%')
            .aspectRatio(343 / 192)


          //播放状态+时长
          Row() {
            Image($r('app.media.icon_live'))
              .width(22)
              .height(18)

            Stack() {
              Text('直播中')
                .fontColor('#FFFFFF')
                .fontSize(11)
            }
            .width(44)
            .height(18)
            .backgroundColor('#4d000000')
          }.margin({ right: 8, bottom: 8 })

        }
        .width('100%')
        .alignContent(Alignment.BottomEnd)
        .margin({ top: 8 })

      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
      .padding({ top: 14 })

      //bottom
      Row() {
        Text(this.compDTO.operDataList[0].source)
          .bottomTextStyle()
        //间隔点
        Image($r('app.media.point'))
          .width(12)
          .height(12)

        Text(this.compDTO.operDataList[0].source)
          .bottomTextStyle()
        Text(' ')

        Text(this.compDTO.operDataList[0].subtitle)
          .bottomTextStyle()

      }
      .width('100%')
      .height(18)
      .justifyContent(FlexAlign.Start)
      // .padding({bottom:14})
      .margin({ top: 8 })
    }
    .width('100%')
    .padding({ left: 16, right: 16 })
  }

  @Builder
  cardBuild() {
    CardParser({ contentDTO: this.contentDTO });
  }
}

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