import { BottomNavDTO } from 'wdBean/Index'
import { SpConstants } from 'wdConstant/Index'
import { SPHelper, StringUtils, UserDataLocal } from 'wdKit'
import { WDRouterPage, WDRouterRule } from 'wdRouter'
import { TrackingButton, TrackConstants } from 'wdTracking/Index'
import MinePageDatasModel from '../../model/MinePageDatasModel'
import { ColorUtils } from '../../utils/ColorUtils'

const TAG = "MinePageUserSimpleInfoUI"


@Component
export default struct MinePageUserSimpleInfoUI {
  @Watch('loginStateChange') @Prop isLogin :boolean
  @Consume @Watch('pageShowForUpdateData') pageShow :number ///监听用户名是否需要更新
  @State userName:string = "登录注册"
  @State headPhotoUrl:string = ""
  userType:string = "1"
  @State levelHead:string = ""
  @State levelId:number = 0
  @Link percent:number
  navItem: BottomNavDTO = {} as BottomNavDTO

  @State isCanClickLogin:boolean = true

  loginStateChange(){
    if(this.isLogin){
      ///已登录状态，先获取本地数据
      this.userName = SPHelper.default.getSync(SpConstants.USER_NAME,"") as string
      this.headPhotoUrl = SPHelper.default.getSync(SpConstants.USER_HEAD_PHOTO_URL,"") as string

      ///用户类型1普通用户
      let userType = SPHelper.default.getSync(SpConstants.USER_Type,"") as string
      if (userType && userType.length > 0) {
        this.userType = userType
      }
      this.getUserInfo()
    }else{
      this.headPhotoUrl = ""
      this.levelHead = ""
      this.userType = "1"
    }
  }

  pageShowForUpdateData(){
    let name = SPHelper.default.getSync(SpConstants.USER_NAME,"") as string
    if (name != this.userName) {
      this.loginStateChange()
    }
  }

  build(){
    Row(){
      //头像
      Stack(){

        Image(this.isLogin?(this.headPhotoUrl?this.headPhotoUrl:this.userType === "1"?$r('app.media.default_head_userPage'):$r('app.media.AccountOwner_DefaultIcon')):$r('app.media.default_head_userPage'))
          .alt(this.userType === "1"?$r('app.media.default_head_userPage'):$r('app.media.AccountOwner_DefaultIcon'))
          .width(64)
          .height(64)
          .objectFit(ImageFit.Fill)
          .borderRadius(32)

        if(StringUtils.isNotEmpty(this.levelHead)){
          Image(this.levelHead)
            .width(90)
            .height(90)
            .objectFit(ImageFit.Cover)
            // .borderRadius(50)
        }
      }
      .width(86)
      .height(86)
      .alignContent(Alignment.Center)
      .onClick(()=>{
        this.jumpLogin()
        trackButtonClick("myPageUserHead")
      })

      if(this.isLogin){
        //昵称信息
        Column(){
          Row(){
            Text(this.userName)
              .fontColor(this.navItem?.homePageColor.length > 0?this.navItem.homePageColor:$r('app.color.color_222222'))
              .maxLines(1)
              .fontWeight(FontWeight.Medium)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .fontSize(20)
              .lineHeight(24)
              .constraintSize({maxWidth:200})

            Image($r('app.media.mine_user_edit'))
              .width(14)
              .height(14)
              .colorFilter(ColorUtils.getDrawingColorFilter(this.navItem?.homePageColor.length > 0?this.navItem?.homePageColor:''))
              .margin({left:11})
              .objectFit(ImageFit.Cover)
            Blank()
          }
          .width('100%')
          .onClick(()=>{
            this.jumpLogin()
            trackButtonClick("myPageUserName")
          })

          if (this.levelId !== 0){
            Text(`等级${this.levelId}`)
              .fontColor(Color.White)
              .fontFamily('PingFang SC-Semibold')
              .fontSize(10)
              .fontWeight(600)
              .margin({ left: 0,top:8 })
              .backgroundImage($r("app.media.mine_grade_bg"))
              .backgroundImageSize(ImageSize.FILL)
              .padding({left: 6,right: 6})
              .height(16)
          }
        }
        .alignItems(HorizontalAlign.Start)
      }else{
        Row(){
          Text("登录注册")
            .fontColor($r('app.color.color_222222'))
            .fontSize(20)
            .lineHeight(24)
            .fontWeight(600)

          Image($r('app.media.mine_user_edit'))
            .width(14)
            .height(14)
            .margin({left: 11})
            .objectFit(ImageFit.Cover)
          Blank()
        }.onClick(()=>{
          this.jumpLogin()
          trackButtonClick("myPageUserLogin")
        })
        .width(180)
      }

      Blank()

      Stack({alignContent:Alignment.Start}){
        Text("签到")
          .textAlign(TextAlign.Start)
          .width(56)
          .height(24)
          .fontColor($r('app.color.color_AD6000'))
          .backgroundColor($r('app.color.color_FFC460'))
          .fontWeight(500)
          .position({x: 16})
          .padding({left: 12})
        Image($r("app.media.mine_sign_icon"))
          .width(26)
          .height(26)
      }
      .width(68)
      .visibility(Visibility.Hidden)
    }
    .setFullWidth()
    .padding({top: 11,left: 11})
  }

  @Styles setFullWidthAndHeight(){
    .width('100%')
    .height('100%')
  }

  @Styles setFullWidth(){
    .width('100%')
  }

  @Styles setFullHeight(){
    .height('100%')
  }

  getUserInfo(){
    MinePageDatasModel.getUserDetailData(getContext(this)).then((value)=>{
      if(value!=null){
        this.userName = value.userName
        this.headPhotoUrl = value.headPhotoUrl
        UserDataLocal.setUserHeaderUrl(value.headPhotoUrl)

        this.userType = value.userType
        UserDataLocal.setUserType(value.userType)

        if(this.userType === "1"){
          if(StringUtils.isNotEmpty(value.honoraryIcon)){
            this.levelHead = value.honoraryIcon
            return
          }
          if(StringUtils.isNotEmpty(value.avatarFrame)){
            this.levelHead = value.avatarFrame
          }
        }
      }
      this.getUserLevel()
    })
  }
  getUserLevel(){
    MinePageDatasModel.getUserLevelData(getContext(this)).then((value)=>{
      if(value!=null){
        if(StringUtils.isEmpty(this.levelHead)){
          if(this.userType === "1"){
            if(value.levelHead != undefined){
              this.levelHead = value.levelHead
            }
          }
        }
        if(value.levelId != undefined){
          this.levelId = value.levelId
          UserDataLocal.setUserLevel(this.levelId)
        }

        if(StringUtils.isNotEmpty(this.levelHead)){
          UserDataLocal.setUserLevelHeaderUrl(this.levelHead + "")
        }else {
          UserDataLocal.setUserLevelHeaderUrl("")
        }
      }
    })
  }

  jumpLogin(){
    if (this.isCanClickLogin === true){
      this.isCanClickLogin = false
      if(!this.isLogin){
        WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      }else {
        WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage)
      }
    }
    let timer = setInterval(() => {
      this.isCanClickLogin = true
      clearInterval(timer);
    }, 1000);
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}

function trackButtonClick(buttonName: string){
  TrackingButton.click(buttonName, TrackConstants.PageName.My, TrackConstants.PageName.My)
}