//全标题 "appStyle":"2",
import { CompDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';

import measure from '@ohos.measure';
import { DisplayUtils } from 'wdKit/Index';

const TAG: string = 'CardAdvSmallImageComponent';

/**
 * @Description: 广告---小图卡
 * @Author:
 * @Email: liyubing@wondertek.com.cn
 * @CreateDate:
 * @UpdateRemark: 更新说明
 * @Version: 1.0
 */
@Component
export struct CardAdvSmallImageComponent {
  @State compDTO: CompDTO = {} as CompDTO
  @State isBigThreeLine: boolean = false // 标题的行数大于等于3行 是true

  aboutToAppear(): void {

    console.error('ZZZXXXXX', '----小图卡----aboutToAppear-----')
    // 计算标题文本行数
    let screenWith = DisplayUtils.getDeviceWidth();
    screenWith = screenWith * 0.62
    let titleNameLineNum = this.getTextLineNum(this.compDTO.matInfo.advTitle, screenWith, 25, 18)
    this.isBigThreeLine = titleNameLineNum >= 3;
  }

  aboutToDisappear(): void {

    console.error('ZZZXXXXX', '---小图卡-----aboutToDisappear-----')
  }

  build() {

    RelativeContainer() {

      // 广告标题
      Text(this.compDTO.matInfo.advTitle)
        .fontSize('18fp')
        .fontColor($r('app.color.color_222222'))
        .maxLines(3)
        .lineHeight(25)
        .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
        .width('62%')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
        })
        .id("title_name")
      // 广告图
      Image(this.compDTO.matInfo.matImageUrl[0])
        .width('34%')
        .aspectRatio(3 / 2)
        .borderRadius(4)
        .id('adv_imag')
        .alignRules({
          top: { anchor: 'title_name', align: VerticalAlign.Top },
          left: { anchor: 'title_name', align: HorizontalAlign.End },

        })
        .margin({ left: 12 })

      Row() {
        Text($r('app.string.comp_advertisement')).fontSize('12fp').fontColor($r('app.color.color_B0B0B0'))

        Blank()

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

      }.width('62%').alignRules({
        bottom: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: VerticalAlign.Bottom },
        right: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: HorizontalAlign.Start },

        top: { anchor: this.isBigThreeLine ? 'title_name' : '', align: VerticalAlign.Bottom },
        left: { anchor: this.isBigThreeLine ? 'title_name' : '', align: HorizontalAlign.Start },
      }).id('bottom_adv').margin({
        right: this.isBigThreeLine ? 0 : 12,
        top: this.isBigThreeLine ? 8 : 0,
      })
    }
    .width("100%")
    .height(this.isBigThreeLine ? 127 : 106)
    .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')
    })
    .onClick((event: ClickEvent) => {
      ProcessUtils.openAdvDetail(this.compDTO.matInfo)
    })
  }

  // 获取文本几行
  private getTextLineNum(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) {
    let size = this.topMeasureText(text, constraintWidth, lineHeight, fontSize)
    let height: number = Number(size.height)
    return Math.ceil(px2vp(height) / lineHeight)
  }

  private topMeasureText(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) {
    return measure.measureTextSize({
      textContent: text,
      fontSize: fontSize,
      lineHeight: lineHeight,
      constraintWidth: constraintWidth,
    })
  }
}


@Extend(Text)
function bottomTextStyle() {
  .fontSize(12)
  .fontColor('#B0B0B0')
}