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'))
          .borderStyle(BorderStyle.Solid)
          .onClick(() => {
            ProcessUtils.openAdvDetail(this.compDTO.matInfo)

          })

        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 })

      // 更多按钮
      this.commonButton()

    }
    .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')
    })

  }

  /*
   标题样式
 */
  @Builder
  commonButton() {

    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: this.advExtraData.itemMore.linkUrl,
        linkType: this.advExtraData.itemMore.linkType
      } as CompAdvMatInfoBean;
      ProcessUtils.openAdvDetail(matInfo)
    })
  }
}