import measure from '@ohos.measure'
import { DisplayUtils, NumberFormatterUtils } from 'wdKit'
import { PeopleShipHomePageHeadComponent } from './PeopleShipHomePageHeadComponent'
import { PeopleShipHomePageAttestationComponent } from './PeopleShipHomePageAttestationComponent'
import { Logger } from 'wdKit'
import { PeopleShipHomePageDataModel } from '../../viewmodel/PeopleShipHomePageDataModel'
import { InfluenceData, PeopleShipUserDetailData } from 'wdBean'
import { PeopleShipHomeAttentionComponent } from './PeopleShipHomeAttentionComponent'
import { HWLocationUtils } from 'wdHwAbility'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'


@Component
export struct PeopleShipHomePageTopComponent {
  @State creatorId: string = ''
  // 是否关注
  // @Prop isAttention: string
  @State introductionType: number = 0
  @State heightComponent: number = 0
  // 页面详情数据
  @Prop @Watch('onIntroductionUpdated') detailModel: PeopleShipUserDetailData
  @Prop publishCount: number
  // 影响力
  @State influenceTotal: number = 0
  // 简介是否可以展开
  @State isCollapse: boolean = true
  @State maxLines: number = Infinity
  @State collapseTxt: string = '…展开';
  private subTxt: string = '';
  @State content: string = ''
  @State topFixedHeight: number = 195
  @State lineInNum: number = 1
  @Link topHeight: number
  @State provinceName: string = ''

  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        // 头像和名称
        Row() {
          // 头像
          PeopleShipHomePageHeadComponent({
            diameter: 80,
            iconDiameter: 20,
            headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),
            authIcon: this.detailModel.authIcon
          }).margin({
            left: '10vp',
            bottom: '15vp'
          }).onClick(() => {
            let params = {
              'headPhotoUrl': this.detailModel.headPhotoUrl,
            } as Record<string, string>;
            WDRouterRule.jumpWithPage(WDRouterPage.showHomePageHeaderPage, params)
          })

          // 文字
          Text(this.detailModel.userName)
            .height('50vp')
            .fontSize($r('app.float.vp_22'))
            .fontColor($r('app.color.color_222222'))
            .fontWeight(500)
            .textAlign(TextAlign.Start)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(2)
            .layoutWeight(1)
            .margin({
              left: '12vp',
              bottom: '20vp',
              right: '12vp'
            })
        }
        .width('100%')
        .height('100%')
        .alignItems(VerticalAlign.Bottom)

      }
      .width('100%')
      .height('108vp')
      .backgroundColor(Color.Transparent)

      // 认证id:1蓝2黄，蓝v 只有官方认证，黄v有领域和身份认证
      // 官方认证
      if (this.detailModel.authId == 1 && this.detailModel.categoryAuth.length > 0) {
        PeopleShipHomePageAttestationComponent({ name: '官方认证', content: this.detailModel.categoryAuth})
          .margin({
            top: '0vp',
            bottom: '10vp'
          })
      }
      if (this.detailModel.authId == 2) {
        if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0) {
          PeopleShipHomePageAttestationComponent({ name: '领域认证', content: this.detailModel.authTitle })
            .margin({
              top: '0vp',
              bottom: (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0) ? '6vp' : '10vp'
            })
        }
        if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0) {
          PeopleShipHomePageAttestationComponent({ name: '身份认证', content: this.detailModel.authPersonal })
            .margin({
              top: '0vp',
              bottom: '10vp'
            })
        }
      }

      // 简介
      if (this.detailModel.introduction && this.detailModel.introduction.length > 0 ) {
        if (this.lineInNum > 3) {
          Row() {
            Text() {
              Span(this.content)
                .fontColor($r('app.color.color_222222'))

              Span(this.collapseTxt)
                .onClick(() => {
                  if (this.isCollapse) {
                    this.maxLines = Infinity;
                    this.content = `简介：${this.detailModel.introduction}`
                    this.isCollapse = false;
                    this.collapseTxt = '收起';
                    this.topHeight = this.topFixedHeight + 21 * this.lineInNum

                  } else {
                    this.isCollapse = true;
                    this.collapseTxt = '…展开';
                    this.content = this.subTxt;
                    this.topHeight = this.topFixedHeight + 21 * 3
                  }
                })
                .fontColor($r('app.color.color_B0B0B0'))

            }
            .backgroundColor(Color.Transparent)
            .lineHeight('21vp')
            .width('100%')
            .maxLines(this.maxLines)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize($r('app.float.vp_14'))
            .padding({
              left: '16vp',
              right: '16vp',
            })
          }.width('100%')
          .backgroundColor(Color.Transparent)
          .alignItems(VerticalAlign.Top)
        } else {
          Row() {
            Text(`简介：${this.detailModel.introduction}`)
              .fontSize($r('app.float.vp_14'))
              .fontColor($r('app.color.color_222222'))
              .lineHeight('21vp')
              .width('100%')
              .maxLines(3)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .padding({
                left: '16vp',
                right: '16vp',
              })
              .backgroundColor(Color.Transparent)

          }.width('100%')
          .backgroundColor(Color.Transparent)
          .alignItems(VerticalAlign.Top)
        }
      }

      // IP归属地
      if (this.provinceName && this.provinceName.length > 0) {
        Text(`IP归属地：${this.provinceName}`)
          .lineHeight('18vp')
          .fontSize($r('app.float.vp_12'))
          .fontColor($r('app.color.color_999999'))
          .textAlign(TextAlign.Start)
          .alignSelf(ItemAlign.Start)
          .margin({
            right: '16vp',
            left: '16vp',
            top: '10vp'
          })
      }

      // 发布, 粉丝, 影响力
      Row() {
        // 发布
        Text(this.computeShowNum(this.publishCount))
          .fontSize($r('app.float.vp_20'))
          .fontColor($r('app.color.color_222222'))
          .lineHeight('22vp')
          .textAlign(TextAlign.Center)
          .fontWeight(600)
          .margin({
            right: '4vp',
            left: '16vp'
          })
        Text('发布')
          .fontSize($r('app.float.vp_12'))
          .fontColor($r('app.color.color_666666'))
          .align(Alignment.Center)
          .height('22vp')

        // 粉丝
        Text(this.computeShowNum(this.detailModel.fansNum))
          .fontSize($r('app.float.vp_20'))
          .fontColor($r('app.color.color_222222'))
          .lineHeight('22vp')
          .fontWeight(600)
          .textAlign(TextAlign.Center)
          .margin({
            right: '4vp',
            left: '12vp'
          })
        Text('粉丝')
          .fontSize($r('app.float.vp_12'))
          .fontColor($r('app.color.color_666666'))
          .height('22vp')
          .align(Alignment.Center)

        //影响力
        Text(this.computeShowNum(this.influenceTotal))
          .lineHeight('22vp')
          .fontSize($r('app.float.vp_20'))
          .fontColor($r('app.color.color_222222'))
          .fontWeight(600)
          .height('22vp')
          .margin({
            right: '4vp',
            left: '12vp'
          })
        Text('影响力')
          .fontSize($r('app.float.vp_12'))
          .fontColor($r('app.color.color_666666'))
          .height('22vp')
          .align(Alignment.Center)

      }
      .alignItems(VerticalAlign.Center)
      .backgroundColor(Color.Transparent)
      .width('100%')
      .margin({
        top: '16vp'
      })

      //  分享-关注
      PeopleShipHomeAttentionComponent()
        .width(`calc(100% - ${32 + 'vp'})`)
        .margin({
          top: '10vp',
          bottom: '16vp'
        })
      Row()
        .backgroundColor($r('app.color.color_F5F5F5'))
        .width('100%')
        .height('6vp')
        ///计算顶部视图高度
        .onAreaChange((oldArea: Area, newArea: Area) => {
          this.topHeight = Number(newArea.position.y)+6
          this.topFixedHeight = Number(newArea.position.y)+6
        })
    }
    .width('100%')
    .backgroundColor($r('app.color.color_transparent'))

  }

  async aboutToAppear() {
    try {
      // 获取影响力
      let infData: InfluenceData = await PeopleShipHomePageDataModel.getCreatorInfluenceInfoData(this.creatorId)
      Logger.debug('PeopleShipHomePageTopComponent', '获取获取影响力信息', `${JSON.stringify(infData)}`)
      this.influenceTotal = infData.influenceTotal
    } catch (exception) {

    }
    if (this.content.length == 0) {
      this.onIntroductionUpdated()
    }

  }

  //  不听减去2个字-一直到时3行
  private compIntroductionTextHeights() {
    let introduction = `简介：${this.detailModel.introduction}`
    let lineInNum1 = this.getTextLineNum(introduction, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
    while (lineInNum1 > 3) {
      introduction = introduction.substring(0, introduction.length - 2);
      lineInNum1 = this.getTextLineNum(introduction + this.collapseTxt, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
    }
    // introduction = introduction.substring(0, introduction.length - 3);
    Logger.debug('PeopleShipHomePageTopComponent', '3行简介：', `${introduction}`)

    this.subTxt = introduction;
  }

  // 获取文本几行
  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,
    })
  }

  async onIntroductionUpdated() {

    if (this.content.length == 0 && this.detailModel.introduction && this.detailModel.introduction.length > 0) {
      this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
      if (this.lineInNum > 3) {
        this.compIntroductionTextHeights()
        this.content = this.subTxt
      }
    }
    if (this.detailModel) {
      // this.topFixedHeight = 160
      if (this.detailModel.region && this.detailModel.region.length > 0) {
        this.provinceName = this.detailModel.region
      } else {
        this.provinceName = await this.computeIPRegion(this.detailModel.province)
      }
      // if (this.detailModel.authId == 1 && this.detailModel.categoryAuth.length > 0) {
      //   this.topFixedHeight += this.getTextLineNum(this.detailModel.categoryAuth, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12')) * 18
      //   this.topFixedHeight += 12
      // } else if (this.detailModel.authId == 2) {
      //   if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0) {
      //     this.topFixedHeight += this.getTextLineNum(this.detailModel.authTitle, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12')) * 18
      //     if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0){
      //       this.topFixedHeight += 8
      //     }else{
      //       this.topFixedHeight += 12
      //     }
      //   }
      //   if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0) {
      //     this.topFixedHeight += this.getTextLineNum(this.detailModel.authPersonal, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12')) * 18
      //     this.topFixedHeight += 12
      //   }
      // }else {
      //   this.topFixedHeight += 10
      // }
      //
      // // IP归属地
      // if (this.provinceName && this.provinceName.length > 0) {
      //   this.topFixedHeight += 30
      // }
      //
      // // 简介
      // if (this.detailModel.introduction && this.detailModel.introduction.length > 0 ) {
      //   this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
      //   if (this.lineInNum <= 3) {
      //     this.topHeight = this.topFixedHeight + (21 * this.lineInNum)
      //   } else {
      //     this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}` + '收起', DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
      //     this.topHeight = this.topFixedHeight + (this.isCollapse ? 21 * 3 : 21 * this.lineInNum)
      //   }
      // }
      //
      // this.topHeight = this.topFixedHeight
    }
  }

  private computeShowNum(count: number) {
    return NumberFormatterUtils.formatNumberWithWan(count)
  }

  // 通过省份code获取IP问题
  private async computeIPRegion(province: string) {
    if (province && province.length) {
      try {
        let provinceName = await HWLocationUtils.getProvinceName(province);
        return provinceName
      } catch (e) {
        return ''
      }
    }
    return ''
  }
}