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';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import PageModel from '../../viewmodel/PageModel';
import { CardAdvTop } from './CardAdvTop';

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
  pageModel: PageModel = new PageModel();
  @State loadImg: boolean = false;

  async aboutToAppear(): Promise<void> {
    this.loadImg = await onlyWifiLoadImg();

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

  aboutToDisappear(): void {

  }

  build() {

    Column() {

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

        CardAdvTop({ pageModel: this.pageModel, compDTO: this.compDTO })
      }
      .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)
  })
}