import { YTButton } from 'basic'
import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
import { CodeInputType } from '../models'
import { LoginInput } from '../components/LoginInput'

@Component
export struct RegisterOrResetPassComp {
  @State @Require loginCollect: LoginCollect
  private mgBottom: number = 24
  private inputPhoneNumberType: CodeInputType = {
    txt: '+86',
    placeHolder: '请输入手机号码'
  }
  private inputCaptchaType: CodeInputType = {
    txt: '验证码',
    placeHolder: '请输入验证码'
  }
  private inputPasswordType: CodeInputType = {
    txt: '密码',
    placeHolder: '设置密码'
  }
  private inputConfirmPasswordType: CodeInputType = {
    txt: '密码',
    placeHolder: '再次确认密码'
  }

  build() {
    Column() {
      LoginInput({
        item: this.inputPhoneNumberType,
        inputData: this.loginCollect.phonenumber,
        needCode: false,
        inputChange: (value) => {
          this.loginCollect.phonenumber = value
        }
      })
      LoginInput({
        item: this.inputCaptchaType,
        inputData: this.loginCollect.smsCode,
        needCode: true,
        loginCollect: this.loginCollect,
        inputChange: (value) => {
          this.loginCollect.smsCode = value
        }
      })
      LoginInput({
        item: this.inputPasswordType,
        inputData: this.loginCollect.password,
        needCode: false,
        isPassword: true,
        marginBottom: 0,
        inputChange: (value) => {
          this.loginCollect.password = value
        }
      })
      LoginInput({
        item: this.inputConfirmPasswordType,
        inputData: this.loginCollect.confirmPassword,
        isPassword: true,
        needCode: false,
        inputChange: (value) => {
          this.loginCollect.confirmPassword = value
        }
      })

      Text('*密码必须包含8-20位数字或字母、特殊符号')
        .fontSize(10)
        .fontColor('#e1e1e1')
        .margin({ top: 4, bottom: 48 })
        .fontColor('#FFEA4A18')


      YTButton({
        //: '立即重置'
        btContent: this.calcButtonContent(),
        click: () => {
          this.loginCollect.executeLogin("common")
        },
        btBorderRadius: 32
      })

      if(this.loginCollect.getOperation()=='reset'){

      }else{
        Text('注册成功后将自动登录')
          .fontSize(10)
          .fontColor($r('[basic].color.main_ac_color_dark'))
          .margin({ top: 16 })
      }

    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }

  private calcButtonContent() {
    switch (this.loginCollect.getOperation()) {
      case 'register':
        return '立即注册'
      case 'reset':
        return '立即重置'
      case 'login':
        return '立即登录'
    }
  }
}