import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant';
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from 'wdRouter';

/**
 * 本地精选卡
 * ZhSingleRow04
 */

@Component
export struct ZhSingleRow04 {
  @State compDTO: CompDTO = {} as CompDTO

  build() {
    Column() {
      //顶部
      Row() {
        Row() {
          Image($r("app.media.local_selection"))
            .width(24)
            .height(24)
            .margin({ right: 4 })
          Text(this.compDTO.objectTitle)
            .fontSize($r("app.float.font_size_17"))
            .fontColor($r("app.color.color_222222"))
            .fontWeight(600)
        }

        Row() {
          Text("更多")
            .fontSize($r("app.float.font_size_14"))
            .fontColor($r("app.color.color_999999"))
            .margin({ right: 1 })
          Image($r("app.media.more"))
            .width(14)
            .height(14)
        }
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 8, bottom: 8 })
      .width('100%')

      // 列表内容
      List({ space: 12 }) {
        ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
          ListItem() {
            localCard(
              {
                operDataListItem: item
              }
            )
              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
              .onClick(() => {
                ProcessUtils.processPage(item)
              })
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .width(CommonConstants.FULL_PARENT)
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor($r("app.color.white"))
    .margin({ bottom: 8 })
  }
}


@Component
struct localCard {
  @Prop operDataListItem: ContentDTO

  build() {
    Flex({ direction: FlexDirection.Column }) {
      Text(this.operDataListItem.source)
        .fontSize($r('app.float.font_size_12'))
        .fontColor($r('app.color.color_B0B0B0'))
        .width('100%')
        .margin({ bottom: 6 })
        .flexShrink(0)

      Text(this.operDataListItem.newsTitle)
        .width(CommonConstants.FULL_PARENT)
        .height(CommonConstants.FULL_PARENT)
        .fontSize($r('app.float.font_size_16'))
        .fontColor('#000000')
        .align(Alignment.TopStart)
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      Row() {
        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.operDataListItem.publishTime)))
          .fontSize($r("app.float.font_size_12"))
          .fontColor($r("app.color.color_B0B0B0"))
          .margin({ right: 5 })
        // 这里需要外部查询评论接口后，写入字段
        if(this.operDataListItem.interactData?.commentNum) {
          Text(`${this.operDataListItem.interactData?.commentNum}评`)
            .fontSize(12)
        }
        Blank()
        Image($r('app.media.local_content_icon'))
          .width(20)
          .height(20)
          .margin({
            right: -4
          })
      }
      .width('100%')
      .padding({
        top: 17
      })
      .flexShrink(0)
    }
    .width(182)
    .height(146)
    .padding(12)
    .border({
      radius: 2,
    })
    .shadow({ radius: 5, color: '#1A000000', offsetX: 0, offsetY: 2 })
    .margin({
      right: 10
    })
  }
}