import { SpConstants } from 'wdConstant/Index'
import { DateTimeUtils, Logger, SPHelper, StringUtils } from 'wdKit'

@Component
export struct LoginInputComponent {
  @State timeCount: number = 60
  @Link phoneContent: string
  @Link codeContent: string
  @State codeBtnState: boolean = false //发送验证码控件是否可以  默认不可用
  @Link isCodeSend: boolean //验证码控件是否点击 默认没有 发送接口
  @Link isSubmit: boolean //是否可以提交
  isFirst:boolean=true//是否第一次获取验证码
  pageType?:number; //0、登录->忘记密码 1、设置->重置密码 2、设置->更换手机号页面1 3、设置->更换手机号页面2
  lastTime: number = 0
  @Link @Watch('startCount') codeStateSuccess: boolean  //验证码获取成功与否回调 成功显示倒计时
  @Watch('onCheckChange') @Prop protocolState: boolean = false //协议勾选状态
  @State isNeedProtocol:boolean = false

  build() {
    Column() {
      this.addCodeLayout()
    }.width('100%').padding({ left: 25, right: 25 })
  }

  onCheckChange(){
    if(this.isNeedProtocol){
      if(this.protocolState && this.phoneContent.length >= 11){
        this.codeBtnState = true
      }else{
        this.codeBtnState = false
      }
    }
  }

   async aboutToAppear(){
     if (this.pageType == 1 ) {
       this.phoneContent = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string;
     }
     if(this.pageType == 0 ){
        let phone = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string
       if(StringUtils.isNotEmpty(phone)){
         this.phoneContent = phone
       }
     }
   }
  @Builder
  addCodeLayout() {
    if (this.pageType == 1){
      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
          }
        })
    }else{
      //修改密码 里面的 忘记密码（已登录）
      if(StringUtils.isNotEmpty(this.phoneContent) && this.phoneContent.indexOf("****")!=-1 && this.pageType == 0){
        TextInput({ text: this.securityPhone(this.phoneContent) })
          .fontColor("#333333")
          .fontSize(16)
          .height(48)
          .maxLength(11)
          .margin({ top: 36 })
          .borderRadius(4)
          .focusable(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
            }
          })
      }else {
        TextInput({text: this.phoneContent, placeholder: "请输入手机号" })
          .fontSize(16)
          .height(48)
          .placeholderColor("#CCCCCC")
          .maxLength(11)
          .margin({ top: 36 })
          .backgroundColor("#F5F5F5")
          .borderRadius(4)
          .type(InputType.Number)
          .onChange((content) => {
            this.phoneContent = content
            this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)

            if(this.isNeedProtocol){
              if (content.length >= 11 && this.protocolState) {
                this.codeBtnState = true
              } else {
                this.codeBtnState = false
              }
            }else{
              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 })
        // .backgroundImage($r('app.media.login_code_bg_one'), ImageRepeat.NoRepeat)
        // .backgroundImageSize(ImageSize.Contain)
        .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
          }
          if(this.isNeedProtocol){
            if (!this.protocolState ) {
              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})

  }

  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)
  }
}