//全标题 "compStyle":"2",
import { CommonConstants } from 'wdConstant'
import { CompDTO } from '../../repository/bean/CompDTO'
const TAG: string = 'BigPicCardComponent';

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

  build() {
    Column() {

      Column() {
        //新闻标题
        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})


  }

}

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