import { Logger } 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
  build() {
    Column() {
      this.addCodeLayout()
    }.width('100%').padding({ left: 25, right: 25 })
  }

   aboutToAppear(){
     if (this.pageType == 1) {
       this.phoneContent = '18655957611';
     }
   }
  @Builder
  addCodeLayout() {
    if (this.pageType == 1){
      TextInput({ placeholder: this.securityPhone('18655957611') })
        .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 >= 6)
          if (content.length >= 11) {
            this.codeBtnState = true
          } else {
            this.codeBtnState = false
          }
        })
    }else{
      TextInput({ placeholder: "请输入手机号" })
        .fontSize(16)
        .height(48)
        .maxLength(11)
        .margin({ top: 36 })
        .backgroundColor("#F5F5F5")
        .borderRadius(4)
        .type(InputType.PhoneNumber)
        .onChange((content) => {
          this.phoneContent = content
          this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 6)
          if (content.length >= 11) {
            this.codeBtnState = true
          } else {
            this.codeBtnState = false
          }
        })
    }


    Row() {
      TextInput({ placeholder: "验证码" })
        .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 >= 6)
        })

      Text(this.isCodeSend ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新发送')
        .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
        .width(110)
        .fontSize(14)
        .fontWeight( FontWeight.Bold)
        .height(48)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          if (this.phoneContent.length < 11) {
            return
          }
          this.isCodeSend = true
          this.isFirst=false
          let time = setInterval(() => {
            Logger.debug("倒计时：" + this.timeCount)
            this.timeCount--
            if (this.timeCount < 1) {
              this.isCodeSend = false
              this.timeCount = 60
              clearInterval(time)
            }
          }, 1000)

        })


    }.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;
  }
}