import measure from '@ohos.measure'
import { DisplayUtils } 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'


@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 = 320
  @State lineInNum: number = 1
  @Link topHeight: number
  @State provinceName: string = ''
  build() {
    Column() {
        Stack({ alignContent: Alignment.TopStart}) {
        // 顶部图片
        Image($r('app.media.home_page_bg'))
          .width('100%')
          .height('120vp')
          .objectFit(ImageFit.Fill)
          .backgroundColor(Color.Black)
        // 头像和名称
        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: '20vp'
          })


          // 文字
          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: '10vp',
              right: '12vp'
            })
        }
        .width('100%')
        .height('100%')
        .alignItems(VerticalAlign.Bottom)

      }
      .width('100%')
      .height('180vp')
      .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: '10vp',
            bottom: '10vp'
          })
      }
      if(this.detailModel.authId == 2) {
          if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0 ){
            PeopleShipHomePageAttestationComponent({name: '领域认证', content: this.detailModel.authTitle})
              .margin({
                top: '10vp',
                bottom: '10vp'
              })
          }
        if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0 ){
          PeopleShipHomePageAttestationComponent({name: '身份认证', content: this.detailModel.authPersonal})
            .margin({
              top: '10vp',
              bottom: '10vp'
            })
        }
      }

      // 简介
      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'))

          }
          .lineHeight('21vp')
          .maxLines(this.maxLines)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .fontSize($r('app.float.vp_14'))
          .key('home_page_introduction')
          .margin({
            left: '16vp',
            right: '16vp',
          })
        }.width('100%')
        .alignItems(VerticalAlign.Top)
      }else  {
        Row() {
          Text(`简介：${this.detailModel.introduction}`)
          .fontSize($r('app.float.vp_14'))
          .fontColor($r('app.color.color_222222'))
          .lineHeight('21vp')
          .maxLines(3)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .margin({
            left: '16vp',
            right: '16vp',
          })
        }.width('100%')
        .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)
          .width('100%')
          .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('100%')
        .margin({
          top: '10vp',
          bottom: '16vp'
        })
      Row()
        .backgroundColor($r('app.color.color_F5F5F5'))
        .width('100%')
        .height('6vp')
    }
    .width('100%')
    .height('100%')
  }

  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,  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.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 = 308
       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'))*22
       }
       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'))*22
         }
         if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0 ){
           if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0 ){
             this.topFixedHeight += 10
           }
           this.topFixedHeight += this.getTextLineNum(this.detailModel.authPersonal,  DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12'))*22
         }
       }
       this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`,  DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
       if (this.lineInNum <= 3) {
         this.topFixedHeight += (21 * this.lineInNum)
         this.topHeight = this.topFixedHeight
       }else {
         this.topHeight = this.topFixedHeight + (this.isCollapse ? 21*3 : 21 * this.lineInNum )
       }
       // IP归属地
       if (this.provinceName && this.provinceName.length > 0) {
         this.topHeight += 28
       }
     }
  }

  private computeShowNum(count: number)  {
    if(count >= 10000) {
      return `${(count/10000).toFixed(1)}万`
    }
    return `${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 ''
  }

}