import { CompDTO } from 'wdBean';
import { AdvExtraData, AdvExtraItemData } from 'wdBean/src/main/ets/bean/adv/AdvExtraData';
import { CompAdvMatInfoBean } from 'wdBean/src/main/ets/bean/adv/CompAdvInfoBean';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';

const TAG: string = 'Card2Component';

/**
 * @Description: 广告---展会广告
 * @Author:
 * @Email: liyubing@wondertek.com.cn
 * @CreateDate:
 * @UpdateRemark: 更新说明
 * @Version: 1.0
 */
@Component
export struct CardAdvVideoExComponent {
  @State compDTO: CompDTO = {} as CompDTO
  @State advExtraData: AdvExtraData = {} as AdvExtraData

  aboutToAppear(): void {


    let extraData = this.compDTO.matInfo.extraData
    let labelDTO = JSON.parse(extraData) as AdvExtraData
    this.advExtraData = labelDTO
  }

  aboutToDisappear(): void {

  }

  build() {

    Column() {

      Stack() {
        //长图
        Image(this.advExtraData.itemTopImage)
          .width(CommonConstants.FULL_WIDTH)
          .aspectRatio(343 / 80)
          .borderRadius(4)
          .borderWidth(0.5)
          .borderColor($r('app.color.color_0D000000'))


        Row() {

          Text($r('app.string.comp_advertisement'))
            .fontSize('10fp')
            .fontColor($r('app.color.white'))
            .width(28)
            .height(16)
            .backgroundColor('#4D000000')
            .borderRadius(4)
            .textAlign(TextAlign.Center)

          Blank()

          Stack() {
            Image($r('app.media.comp_adv_close_white'))
              .width(9)
              .height(9)
              .borderRadius({
                topLeft: '4vp',
                topRight: '4vp',
                bottomLeft: '4vp',
                bottomRight: '4vp'
              })
          }
          .width(18)
          .height(14)
          .backgroundColor('#4D000000')
          .borderWidth(0.5)
          .borderColor($r('app.color.white'))
          .borderRadius(4)

        }.width('100%').padding({
          top: 8,
          left: 8,
          right: 8
        })
      }
      .alignContent(Alignment.Top)
      .width(CommonConstants.FULL_WIDTH)

      //
      List({ space: 10 }) {

        ForEach(this.advExtraData.item, (content: AdvExtraItemData) => {

          ListItem() {

            Text(content.title).fontSize('16fp').fontColor($r('app.color.color_222222')).width('100%').onClick(() => {
              let matInfo: CompAdvMatInfoBean = {
                linkUrl: content.linkUrl,
                linkType: content.linkType
              } as CompAdvMatInfoBean;
              ProcessUtils.openAdvDetail(matInfo)
            })
          }

        })

      }.width('100%').listDirection(Axis.Vertical).margin({ top: 10, bottom: 10 })

      // 更多按钮
      commonButton(this.advExtraData)

    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })

  }
}

/*
   标题样式
 */
@Builder
function commonButton(advExtraData: AdvExtraData) {


  Row() {
    Blank()
    Text('查看更多').fontColor('#222222').fontSize('14fp')
    Image($r('app.media.icon_comp_more_right_red')).width(16).height(16)
    Blank()

  }
  .width('100%')
  .backgroundColor('#F5F5F5')
  .borderRadius(3)
  .padding({ top: 10, bottom: 10, })
  .onClick(() => {
    let matInfo: CompAdvMatInfoBean = {
      linkUrl: advExtraData.itemMore.linkUrl,
      linkType: advExtraData.itemMore.linkType
    } as CompAdvMatInfoBean;
    ProcessUtils.openAdvDetail(matInfo)
  })
}