import { ContentDTO, slideShows } from 'wdBean';
import { CommonConstants } from 'wdConstant'
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';


/**
 * 大专题卡--CompStyle:  10
 */
const TAG: string = 'Card10Component';

@Component
export struct Card10Component {
  @State contentDTO: ContentDTO = {} as ContentDTO;

  build() {
    Column() {
      // 顶部标题，最多两行
      if (this.contentDTO.newsTitle) {
        Text(this.contentDTO.newsTitle)
          .width(CommonConstants.FULL_WIDTH)
          .fontSize($r('app.float.font_size_17'))
          .fontWeight(600)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .margin({ bottom: 19 })
      }
      // 大图
      Stack() {
        Image(this.contentDTO && this.contentDTO.coverUrl)
          .width('100%')
          .borderRadius({
            topLeft: $r('app.float.image_border_radius'),
            topRight: $r('app.float.image_border_radius')
          })
          .onClick((event: ClickEvent) => {
            ProcessUtils.processPage(this.contentDTO)
          })
        Text('专题')
          .fontSize($r('app.float.font_size_12'))
          .padding({ left: 8, right: 8, top: 3, bottom: 3 })
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .borderRadius($r('app.float.button_border_radius'))
          .margin({ left: 5, bottom: 5 })
      }.alignContent(Alignment.BottomStart)

      // 专题列表--后端返回三个，
      Column() {
        ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
          this.timelineItem(item, index)
        })
      }

      // 底部-查看更多。根据接口返回的isMore判断是否显示查看更多
      if (this.contentDTO.hasMore == 1) {
        Row() {
          Text("查看更多")
            .fontSize($r("app.float.font_size_14"))
            .fontColor($r("app.color.color_222222"))
            .margin({ right: 1 })
          Image($r("app.media.more"))
            .width(14)
            .height(14)
        }
        .backgroundColor($r('app.color.color_F5F5F5'))
        .width(CommonConstants.FULL_WIDTH)
        .height(40)
        .borderRadius($r('app.float.button_border_radius'))
        .justifyContent(FlexAlign.Center)
        .margin({ top: 5 })
        .onClick((event: ClickEvent) => {
          ProcessUtils.processPage(this.contentDTO)
        })
      }
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      top: 14,
      left: 16,
      right: 16,
      bottom: 14
    })
    .backgroundColor($r("app.color.white"))
    .margin({ bottom: 8 })
  }

  @Builder
  timelineItem(item: slideShows, index: number) {
    Row() {
      Column() {
        Text(item.newsTitle)
          .fontSize($r('app.float.font_size_17'))
          .fontWeight(400)
          .fontColor($r('app.color.color_222222'))
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Row() {
          // 展示发稿人
          if (item.source) {
            Text(item.source)
              .fontSize($r('app.float.font_size_12'))
              .fontColor($r('app.color.color_B0B0B0'))
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .maxLines(1)
              .width(item.source.length > 10 ? '60%' : '')

            Image($r('app.media.point'))
              .width(16)
              .height(16)
          }
          Text(DateTimeUtils.getCommentTime(Number.parseFloat(String(item.publishTime))))
            .fontSize($r("app.float.font_size_12"))
            .fontColor($r("app.color.color_B0B0B0"))
        }
        .margin({ top: 12 })
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)

      // 右侧图片
      if (item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url) {
        Image(item.fullColumnImgUrls[0].url)
          .width(117)
          .height(78)
          .objectFit(ImageFit.Cover)
          .borderRadius($r('app.float.image_border_radius'))
          .margin({ left: 12 })
      }
    }
    .padding({ top: 10, bottom: 10 })
    .onClick((event: ClickEvent) => {
      const str: string = JSON.stringify(this.contentDTO);
      const data: ContentDTO = JSON.parse(str)
      data.objectId = item.newsId
      data.relId = item.relId
      data.objectType = String(item.objectType)
      ProcessUtils.processPage(data)
    })
  }
}