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

import measure from '@ohos.measure';
import { DisplayUtils } from 'wdKit/Index';
import { CardAdvBottom } from './CardAdvBottom';
import PageModel from '../../viewmodel/PageModel';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';

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

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

    // 计算标题文本行数
    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 {

  }

  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.loadImg ? this.compDTO.matInfo.matImageUrl[0] : '')
        .width('34%')
        .aspectRatio(3 / 2)
        .id('adv_imag')
        .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
        .borderWidth(0.5)
        .borderColor($r('app.color.color_0D000000'))
        .borderRadius(4)//.alt('wwww.baidu.com')
        .borderStyle(BorderStyle.Solid)
        .alignRules({
          top: { anchor: 'title_name', align: VerticalAlign.Top },
          left: { anchor: 'title_name', align: HorizontalAlign.End },
        })
        .margin({ left: 12 })


      CardAdvBottom({ pageModel: this.pageModel, compDTO: this.compDTO }).width('62%').id('bottom_adv').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 },
      }).margin({
        right: this.isBigThreeLine ? 0 : 12,
        top: this.isBigThreeLine ? 8 : 0,
      })

    }
    .width("100%")
    .height(this.isBigThreeLine ? 127 : 106)
    .padding({
      left: 10,
      right: 10,
      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')
}