import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant';
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from 'wdRouter';
import { InfomationCardClick } from '../../utils/infomationCardClick';

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

@Component
export struct ZhSingleRow04 {
  @State pageId: string = '';
  @State pageName: string = '';
  @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)
        }
        .visibility(this.compDTO?.objectType === '0' || this.compDTO?.objectType === '' ? Visibility.None :
        Visibility.Visible)
        .onClick(() => {
          if (this.compDTO?.objectType === '11') {
            ProcessUtils.jumpChannelTab(this.compDTO.objectId, this.compDTO.pageId as string, this.compDTO.objectTitle)
          } else {
            const contentDTO: ContentDTO = {
              objectId: this.compDTO.objectId,
              objectType: this.compDTO.objectType,
              linkUrl: this.compDTO.linkUrl,
              pageId: this.compDTO.pageId
            } as ContentDTO
            ProcessUtils.processPage(contentDTO)
          }
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 8, bottom: 8 })
      .width('100%')
      .padding({
        left: $r('app.float.card_comp_pagePadding_lf'),
        right: $r('app.float.card_comp_pagePadding_lf')
      })

      // 列表内容
      List({ space: 12 }) {
        ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
          ListItem() {
            localCard(
              {
                operDataListItem: item
              }
            )
              .margin({
                right: index === this.compDTO.operDataList.length - 1 ? 26 : 0, left:
                index === 0 ? $r('app.float.card_comp_pagePadding_lf') : 0,
                top: 6
              })
              .onClick(() => {
                InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
                ProcessUtils.processPage(item)
              })
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .width(CommonConstants.FULL_PARENT)
      .height(166)
      .edgeEffect(EdgeEffect.None)
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      left: 10,
      right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width('100%')
  }
}


@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)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Text(this.operDataListItem.newsTitle)
        .width(CommonConstants.FULL_PARENT)
        .height(CommonConstants.FULL_PARENT)
        .fontSize($r('app.float.font_size_18'))
        .fontColor('#000000')
        .align(Alignment.TopStart)
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .lineHeight(25)
        .fontWeight(500)
      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: 6,
      color: '#1A000000',
      offsetX: 0,
      offsetY: 3
    }) // 设置下方阴影
    .margin({
      right: -2
    })
  }
}