import { CompDTO, ContentDTO } from 'wdBean';
import { ProcessUtils } from '../../utils/ProcessUtils';
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;

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

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

  }

  @Builder
  originalBuild() {
    Column() {
      // TODO 测试代码
      // Text("likeNum " + this.contentDTO?.interactData?.likeNum)
      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 })
    .onClick((event: ClickEvent) => {
      ProcessUtils.processPage(this.compDTO.operDataList[0])
    })
  }

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


/**
 * 大图卡 中部
 * 包括：视频图、视频时长
 */
@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')
}