//全标题 "appStyle":"2",
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
 */
@Preview
@Component
export struct CardAdvGanMiComponent {
  @State compDTO: CompDTO = {} as CompDTO
  @State advExtraData: AdvExtraData = {} as AdvExtraData
  @State advLength: number = 0;
  pageModel: PageModel = new PageModel();
  @Prop loadImg: boolean = true;
  @State compIndex: number = 0;


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

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

  aboutToDisappear(): void {

  }

  build() {

    Column() {


      Row() {
        Stack() {
          //长图
          Image(this.loadImg ? this.advExtraData.itemTopImage : '')
            .width(CommonConstants.FULL_WIDTH)
            .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
            .aspectRatio(343 / 40)
            .border({
              width: 0.5,
              color: '#0D000000',  // 5% 透明度的黑色
              style: BorderStyle.Solid,
              radius: 4
            })

          // 广告标签和删除功能
          CardAdvTop({ pageModel: this.pageModel, compDTO: this.compDTO })
        }
        .alignContent(Alignment.Top)
        .width(CommonConstants.FULL_WIDTH)
      }.width('100%').padding({
        left: 10,
        right: 10,
      })


      //
      List({ space: 8 }) {

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

          ListItem() {
            // 广告列表信息
            Column() {

              Image(this.loadImg ? content.image : '')
                .width('100%')
                .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
                .aspectRatio(150 / 84)
                .border({
                  width: 0.5,
                  color: '#0D000000',  // 5% 透明度的黑色
                  style: BorderStyle.Solid,
                  radius: 4
                })

              Text(content.title)
                .fontSize('16fp')
                .fontColor($r('app.color.color_222222'))
                .fontSize('15fp')
                .maxLines(2)
                .lineHeight(20)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .width('100%')
                .margin({ top: 8 })

            }
            .width(this.advLength >= 3 ? 150 : this.advLength == 2 ? 210 : '100%')
            .margin({ left: index === 0 ? this.advLength == 1 ? 0 : 16 : 0 })
            .onClick(() => {

              let matInfo: CompAdvMatInfoBean = {
                linkUrl: content.linkUrl,
                linkType: content.linkType
              } as CompAdvMatInfoBean;
              ProcessUtils.openAdvDetail(matInfo)

            })

          }

        })

      }
      .width('100%')
      .listDirection(Axis.Horizontal)
      .edgeEffect(EdgeEffect.None)
      .scrollBar(BarState.Off)
      // .contentStartOffset(this.advLength == 1 ? 0 : 16)
      .contentEndOffset(this.advLength == 1 ? 0 : 16)
      .margin({ top: 10, bottom: 10 })
      .padding({
        left: this.advLength == 1 ? 10 : 0,
        right: this.advLength == 1 ? 10 : 0,
      })

      // 更多按钮
      this.commonButton()

    }
    .borderRadius({
      topLeft:this.compIndex === 0 ? $r('app.float.image_border_radius'):0,
      topRight:this.compIndex === 0 ? $r('app.float.image_border_radius'):0
    })
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })

  }

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


    Row() {
      Row() {
        Blank()
        Text(this.advExtraData.itemMore == undefined ? $r('app.string.look_more') :
          this.advExtraData.itemMore.title == undefined ? $r('app.string.look_more') : this.advExtraData.itemMore.title)
          .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(() => {
        if (this.advExtraData.itemMore != undefined) {
          let matInfo: CompAdvMatInfoBean = {
            linkUrl: this.advExtraData.itemMore.linkUrl,
            linkType: this.advExtraData.itemMore.linkType
          } as CompAdvMatInfoBean;
          ProcessUtils.openAdvDetail(matInfo)
        }

      })
    }.width('100%').padding({
      left: 10,
      right: 10,

    })

  }
}