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


@Component
struct ChangePassWord{
  @State private loginCollect: LoginCollect = new LoginCollect('reset')
  @StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0

  private inputPhoneNumberType: CodeInputType = {
    txt: '+86',
    placeHolder: '手机号'
  }
  private inputCaptchaType: CodeInputType = {
  txt: '验证码',
  placeHolder: '验证码'
}
  private inputPasswordType: CodeInputType = {
    txt: '密码',
    placeHolder: '设置密码'
  }
  private inputConfirmPasswordType: CodeInputType = {
    txt: '密码',
    placeHolder: '确认密码'
  }
  private linearInfo: LinearGradientOptions = {
    colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
    angle: 110
  }
  build() {
    NavDestination(){
      Column(){
        YTHeader({ title: '用户设置', bgc: 'rgba(0, 0, 0, 0)', leftComp: this.backIcon})

        Column(){
          // 手机号
          LoginInput({
            item: this.inputPhoneNumberType,
            inputData: this.loginCollect.phonenumber,
            isPassword: false,
            needCode: false,
            // changeStyle: true,
            // fontSize: 16,
            // fontColor: Color.White,
            inputChange: (value: string) => {
              this.loginCollect.phonenumber = value
            }
          })

          // 验证码
          LoginInput({
            item: this.inputCaptchaType,
            inputData: this.loginCollect.smsCode,
            needCode: true,
            loginCollect: this.loginCollect,
            // changeStyle: true,
            // fontSize: 16,
            // fontColor: Color.White,
            // codeSize: 12,
            inputChange: (value) => {
              this.loginCollect.smsCode = value
            }
          })

          // 设置密码
          LoginInput({
            item: this.inputPasswordType,
            inputData: this.loginCollect.password,
            needCode: false,
            isPassword: true,
            marginBottom: 0,
            // changeStyle: true,
            // fontColor: Color.White,
            // fontSize: 16,
            inputChange: (value) => {
              this.loginCollect.password = value
            }
          })

          // 确认密码
          LoginInput({
            item: this.inputConfirmPasswordType,
            inputData: this.loginCollect.confirmPassword,
            isPassword: true,
            needCode: false,
            // fontColor: Color.White,
            // changeStyle: true,
            // fontSize: 16,
            inputChange: (value) => {
              this.loginCollect.confirmPassword = value
            }
          })

          // 空白占位
          Blank()
            .layoutWeight(1)

          YTButton({
            btContent: '完成',
            btFontColor: Color.Black,
            btFontSize: 20,
            btlinear: this.linearInfo,
            btBorder: {width: 0},
            btPadding: {
              left: 26,
              right: 26,
              top: 9,
              bottom: 9
            },
            click: () => {
              // 手动同意下， 防止在重置密码时会弹出隐私协议
              this.loginCollect.isAgreePrivacy = true
              this.loginCollect.executeLogin("common")
            }

          }).margin({ bottom: 142 })
        }
        .padding({ left: 14, right: 14})
        .width("100%")
        .layoutWeight(1)
      }
      // .padding({ top: this.safeTop })
    }

  }

  @Builder
  backIcon(){
    Image($r('app.media.diary_back'))
      .width(12)
      .height(20)
      .margin({ left: 16 })
      // .fillColor('#FFECD5AF')
      .onClick(() => {
        yTRouter.pop()
      })

  }
}


@Builder
function ChangePassWordBuilder() {
  NavDestination() {
    ChangePassWord()
  }
  .hideTitleBar(true)
}