import { CustomToast, DateTimeUtils, Logger, SPHelper } from 'wdKit/Index'
import { WDRouterRule, WDRouterPage } from 'wdRouter/Index'
import { LoginViewModel } from './LoginViewModel'
import { SettingPasswordParams } from './SettingPasswordPage'
import { router } from '@kit.ArkUI'
import { SpConstants } from 'wdConstant/Index'
import { TrackingPageBrowse, TrackConstants, TrackingButton } from 'wdTracking/Index'

const TAG = 'VerifyPhoneNumberPage'
//设置密码（第一次）  验证当前手机号 页面
@Entry
@Component
struct VerifyPhoneNumberPage {
  @State phoneContent: string = ''
  @State codeContent: string = ''
  @State isSubmit: boolean = false //是否可以提交  默认不可以
  loginViewModel: LoginViewModel = new LoginViewModel()
  @State @Watch('onCodeSend') isCodeSend: boolean = false //验证码点击发送事件
  @State pageTitle:string = '验证当前手机号';
  @State @Watch('startCount') codeStateSuccess:boolean=false
  lastTime: number = 0
  @State codeBtnState: boolean = false
  @State timeCount: number = 60
  isFirst:boolean=true//是否第一次获取验证码
  pageShowTime:number = 0;
  pageHideTime:number = 0;
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0

  onCodeSend() {
    if (this.isCodeSend) {
      TrackingButton.click("checkingPhoneNumberPageSendVerificationCode",TrackConstants.PageName.Checking_PhoneNum,TrackConstants.PageName.Checking_PhoneNum)
      this.sendVerifyCode()
    }
  }

  onPageShow() {
    this.pageShowTime = DateTimeUtils.getTimeStamp()
  }

  onPageHide(): void {
    this.pageHideTime = DateTimeUtils.getTimeStamp()
    let duration = 0
    duration = Math.floor((this.pageHideTime - this.pageShowTime)/1000)
    TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Checking_PhoneNum,TrackConstants.PageName.Checking_PhoneNum,duration)
  }

  async aboutToAppear(): Promise<void> {
    this.phoneContent = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string;
  }

  @State toastText:string = ""
  dialogToast: CustomDialogController = new CustomDialogController({
    builder: CustomToast({
      msg: this.toastText,
    }),
    autoCancel: false,
    alignment: DialogAlignment.Center,
    customStyle: true,
    maskColor:"#00000000"
  })


  build() {
    Column(){
      Column() {
        Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
          router.back()
        })

        Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })

        Column() {
          TextInput({ text: this.securityPhone(this.phoneContent) })
            .placeholderColor("#CCCCCC")
            .fontSize(16)
            .height(48)
            .maxLength(11)
            .margin({ top: 36 })
            .backgroundColor("#F5F5F5")
            .borderRadius(4)
            .enabled(false)
            .type(InputType.PhoneNumber)
            .onChange((content) => {
              this.phoneContent = content
              this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
              if (content.length >= 11) {
                this.codeBtnState = true
              } else {
                this.codeBtnState = false
              }
            })

          Row() {
            TextInput({ text: this.codeContent,placeholder: "验证码" })
              .placeholderColor("#CCCCCC")
              .layoutWeight(1)
              .fontSize(16)
              .height(48)
              .type(InputType.Number)
              .fontColor("#222222")
              .backgroundColor("#00000000")
              .borderRadius({ topLeft: 4, bottomLeft: 4 })
              .onChange((value) => {
                this.codeContent = value
                this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
              })

            Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
              .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
              .width(110)
              .fontSize(14)
              .fontWeight( FontWeight.Bold)
              .height(48)
              .textAlign(TextAlign.Center)
              .enabled(this.codeStateSuccess?false:true)
              .onClick(() => {
                if (this.phoneContent.length < 11) {
                  return
                }

                let currentTime = DateTimeUtils.getTimeStamp()
                if (currentTime - this.lastTime < 500) {
                  return
                }
                this.lastTime = currentTime;
                this.isCodeSend = true

              })


          }.margin({ top: 12 })
          .height(48)
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Start)
          .backgroundImage($r('app.media.code_login_bg'))
          .backgroundImageSize({width:'100%',height:48})



        }.width('100%').padding({ left: 25, right: 25 })

        Row() {
          Text("确认")
            .layoutWeight(1)
            .fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
            .borderRadius(4)
            .fontSize(18)
            .textAlign(TextAlign.Center)
            .fontWeight(FontWeight.Medium)
            .margin({ top: 26 })
            .height(44)
            .backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")
            .enabled(this.isSubmit ? true : false)
            .onClick(() => {
              this.checkVerifyCode()
            })
        }.padding({ left: 25, right: 25 }).width('100%')

      }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
    }.width("100%")
    .height("100%")
    .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
  }

  //发送验证码
  sendVerifyCode() {
    if (this.isEmpty(this.phoneContent)) {
      return
    }

    this.loginViewModel.sendVerifyCodeByToken().then(()=>{
      this.showToastTip("已发送")
      this.codeStateSuccess=true
      this.isCodeSend=false
    }).catch((message: string)=>{
      this.showToastTip(message)
      this.codeStateSuccess=false
      this.isCodeSend=false
    })
  }


  //校验验证码
  checkVerifyCode() {
    TrackingButton.click("checkingPhoneNumberPageConfirm",TrackConstants.PageName.Checking_PhoneNum,TrackConstants.PageName.Checking_PhoneNum)
    if (!this.isSubmit) {
      return
    }
    if (this.isEmpty(this.phoneContent)) {
      return
    }
    if (this.isEmpty(this.codeContent)) {
      return
    }

    this.loginViewModel.checkVerifyCodeByToken(this.codeContent).then(()=>{
      let params: SettingPasswordParams = {
        pageID:'1',
        phoneContent:this.phoneContent,
        codeContent:this.codeContent,
        pageType:1
      }
      WDRouterRule.jumpWithPage(WDRouterPage.settingPasswordPage, params)
    }).catch((message: string)=>{
      this.showToastTip(message)
    })
  }

  isEmpty(obj: undefined|null|string): boolean {
    return (obj == undefined || obj == null || obj == '');
  }

  showToastTip(msg:string){
    this.toastText = msg
    this.dialogToast.open()
  }

  securityPhone(phoneNum:string):string{
    let securityNum:string;
    let needSecurityString = phoneNum.substring(3, phoneNum.length - 4);
    securityNum = phoneNum.replace(needSecurityString,'****')
    return securityNum;
  }

  startCount() {
    this.isFirst = false
    let time = setInterval(() => {
      Logger.debug("倒计时：" + this.timeCount)
      this.timeCount--
      if (this.timeCount < 1) {
        this.codeStateSuccess = false
        this.timeCount = 60
        clearInterval(time)
      }
    }, 1000)
  }
}