//全标题 "appStyle":"2",
import { CompDTO, ContentDTO } 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 { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CardSourceInfo } from '../cardCommon/CardSourceInfo'

const TAG: string = 'Card2Component';

/**
 * @Description: 广告---冠名广告
 * @Author:
 * @Email: liyubing@wondertek.com.cn
 * @CreateDate:
 * @UpdateRemark: 更新说明
 * @Version: 1.0
 */
@Component
export struct CardAdvGanMiComponent {
  @State compDTO: CompDTO = {} as CompDTO
  @State advExtraData: AdvExtraData = {} as AdvExtraData
  @State advLength: number = 0;

  aboutToAppear(): void {

    let extraData = this.compDTO.matInfo.extraData
    let labelDTO = JSON.parse(extraData) as AdvExtraData
    this.advExtraData = labelDTO
    //this.advExtraData.item = [this.advExtraData.item[0]]
   // this.advExtraData.item[2].title ="我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国"
    this.advLength = this.advExtraData.item.length
  }

  aboutToDisappear(): void {

  }

  build() {

    Column() {


      Row() {
        Stack() {
          //长图
          Image(this.advExtraData.itemTopImage)
            .width(CommonConstants.FULL_WIDTH)
            .aspectRatio(343 / 40)
            .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(3)
              .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(3)

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


      //
      List({ space: 8 }) {

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

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

              Image(content.image)
                .width('100%')
                .aspectRatio(150 / 84)
                .borderWidth(0.5)
                .borderColor($r('app.color.color_0D000000'))
                .borderRadius(4)

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

            }.width(this.advLength >= 3 ? 150 : this.advLength == 2 ? 210 : '100%').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 ? 16 : 0,
        right: this.advLength == 1 ? 16 : 0,
      })


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

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

  }
}

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


  Row() {
    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)
    })
  }.width('100%').padding({
    left: $r('app.float.card_comp_pagePadding_lf'),
    right: $r('app.float.card_comp_pagePadding_lf'),

  })

}