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'
const TAG = "MinePageUserSimpleInfoUI"


@Component
export default struct MinePageUserSimpleInfoUI {
  @Watch('loginStateChange') @Prop isLogin :boolean
  @State userName:string = "登录注册"
  @State headPhotoUrl:string = ""
  userType:string = "1"
  @State levelHead:string = ""
  @State levelId:number = 0
  @Link percent:number

  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
      this.userType = SPHelper.default.getSync(SpConstants.USER_Type,"") as string
      this.getUserInfo()
    }else{
      this.headPhotoUrl = ""
      this.levelHead = ""
      this.userType = "1"
    }
  }

  build(){
    Row(){
      //头像
      Stack(){
        if (this.headPhotoUrl.length > 0){
          Image(this.headPhotoUrl)
            .alt(this.userType === "1"?$r('app.media.default_head'):$r('app.media.AccountOwner_DefaultIcon'))
            .width(`${this.calcHeight(100)}lpx`)
            .height(`${this.calcHeight(100)}lpx`)
            .objectFit(ImageFit.Cover)
            .borderRadius(50)
        }else {
          Image(this.userType === "1"?$r('app.media.default_head'):$r('app.media.AccountOwner_DefaultIcon'))
            .width(`${this.calcHeight(100)}lpx`)
            .height(`${this.calcHeight(100)}lpx`)
            .objectFit(ImageFit.Cover)
            .borderRadius(50)
        }

        if(StringUtils.isNotEmpty(this.levelHead)){
          Image(this.levelHead)
            .width(`${this.calcHeight(130)}lpx`)
            .height(`${this.calcHeight(130)}lpx`)
            .objectFit(ImageFit.Cover)
            .borderRadius(50)
        }
      }.width(`${this.calcHeight(130)}lpx`)
      .height(`${this.calcHeight(130)}lpx`)
      .alignContent(Alignment.Center)
      .onClick(()=>{
        this.jumpLogin()
        trackButtonClick("myPageUserHead")
      })

      if(this.isLogin){
        //昵称信息
        Column(){
          Row(){
            Text(this.userName)
              .fontColor($r('app.color.color_222222'))
              .maxLines(1)
              .fontWeight(FontWeight.Medium)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .fontSize(`${this.calcHeight(33)}lpx`)
              .lineHeight(`${this.calcHeight(46)}lpx`)

            Image($r('app.media.mine_user_edit'))
              .width(`${this.calcHeight(27)}lpx`)
              .height(`${this.calcHeight(27)}lpx`)
              .margin({left:`${this.calcHeight(15)}lpx`})
              .objectFit(ImageFit.Cover)
            Blank()
          }.width('100%')
          .onClick(()=>{
            this.jumpLogin()
            trackButtonClick("myPageUserName")
          })

          if (this.levelId !== 0){
            Stack(){
              Image($r('app.media.mine_grade_bg'))
                .width(`${this.calcHeight(84)}lpx`)
                .height(`${this.calcHeight(29)}lpx`)
                .objectFit(ImageFit.Auto)
              Text(`等级${this.levelId}`)
                .textAlign(TextAlign.Center)
                .fontColor($r('app.color.white'))
                .fontSize(`${this.calcHeight(19)}lpx`)
                .width(this.levelId>9?`${this.calcHeight(69)}lpx`:`${this.calcHeight(50)}lpx`)
                .height(`${this.calcHeight(29)}lpx`)
            }.margin({top:'`${this.calcHeight(15)}lpx`'})
          }
        }.alignItems(HorizontalAlign.Start)
        .margin({top:`${this.calcHeight(12)}lpx`,left:`${this.calcHeight(23)}lpx`})
        .width(`${this.calcHeight(352)}lpx`)
      }else{
        Row(){
          Text("登录注册")
            .fontColor($r('app.color.color_222222'))
            .fontSize(`${this.calcHeight(38)}lpx`)
            .lineHeight(`${this.calcHeight(46)}lpx`)
            .fontWeight(600)

          Image($r('app.media.mine_user_edit'))
            .width(`${this.calcHeight(11)}lpx`)
            .height(`${this.calcHeight(20)}lpx`)
            .margin({left:`${this.calcHeight(15)}lpx`})
            .objectFit(ImageFit.Cover)
          Blank()
        }.onClick(()=>{
          this.jumpLogin()
          trackButtonClick("myPageUserLogin")
        })
        .margin({top:`${this.calcHeight(11)}lpx`,left:`${this.calcHeight(23)}lpx`})
        .width(`${this.calcHeight(352)}lpx`)
      }

      Blank()

      Stack({alignContent:Alignment.Start}){
        Text("签到")
          .textAlign(TextAlign.Start)
          .width('108lpx')
          .height(`${this.calcHeight(46)}lpx`)
          .fontColor($r('app.color.color_AD6000'))
          .backgroundColor($r('app.color.color_FFC460'))
          .fontWeight(500)
          .position({x:'23lpx'})
          .padding({left:'35lpx'})
        Image($r("app.media.mine_sign_icon"))
          .width(`${this.calcHeight(50)}lpx`)
          .height(`${this.calcHeight(50)}lpx`)
      }.width('131lpx')
      .visibility(Visibility.Hidden)
    }.backgroundColor($r('app.color.white'))
    .setFullWidth()
    .padding({top:'31lpx',left:'46lpx'})
  }

  @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()
    }).catch((err:Error)=>{
      console.log(TAG,JSON.stringify(err))
    })
  }
  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 + "")
        }
      }
    }).catch((err:Error)=>{
      console.log(TAG,JSON.stringify(err))
    })
  }

  jumpLogin(){
    if(!this.isLogin){
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
    }else {
      WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage)
    }
  }

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

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