//全标题 "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)
            .borderRadius(4)


          //播放状态+时长
          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%')
        .height(192)
        .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})


  }

}



/**
 * 大图卡 中部
 * 包括：视频图、视频时长
 */
@Component
export struct myBigCard_body {
  private newsSrc:string ="https://k.sinaimg.cn/n/default/crawl/190/w550h440/20240118/6772-7c2385bb2741c6f88906af3514d27343.png/w700d1q75cms.jpg";
  private newsTitle:string ="时政微观察丨新征程金融工作怎么干？“新年第一课”这样讲";

  build() {
    Column() {
      //新闻标题
      Text(this.newsTitle)
        .fontSize(17)
        .fontColor('#222222')
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
      //大图
      Stack() {
        Image(this.newsSrc)
          .borderRadius(4)


        //播放状态+时长
        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%')
      .height(192)
      .alignContent(Alignment.BottomEnd)
      .margin({top:8})

    }
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }

}

/**
 * 大图卡 底部
 * 包括：分享、评论、点赞 三个按钮
 */

@Component
export struct myBigCard_bottom {
  private  bottom_height:number = 18
  private itemSubtitle1:string = "人民日报"
  private itemSubtitle2:string = "25分钟前"
  private itemSubtitle3:string = "786条评论"
  build() {
    //子标题
    Row() {
      Text(this.itemSubtitle1)
        .bottomTextStyle()
      //间隔点
      Image($r('app.media.point'))
        .width(12)
        .height(12)

      Text(this.itemSubtitle2)
        .bottomTextStyle()
      Text(' ')

      Text(this.itemSubtitle3)
        .bottomTextStyle()

    }
    .width('100%')
    .height(this.bottom_height)
    .justifyContent(FlexAlign.Start)

  }

}

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