import promptAction from '@ohos.promptAction';
import { router } from '@kit.ArkUI';

@Preview
@Component
export struct ForgetPasswordComp {
  @State phoneNumber: string = ''
  @State smsCode: string = ''
  @State password: string = ''
  @State showPassword: boolean = false
  @State countdown: number = 0
  @State passWordSrc1: Resource = $r('app.media.icon_forgetpassword_show');
  @State passWordSrc2: Resource = $r('app.media.icon_forgetpassword');

  // 验证码倒计时
  private startCountdown() {
    this.countdown = 60
    const timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      } else {
        clearInterval(timer)
      }
    }, 1000)
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.icon_phone'))
          .width(18)
          .height(18)
          .objectFit(ImageFit.Contain)
          .margin({left:10})
        // 手机号输入框
        TextInput({ placeholder: '请输入手机号码' })
          .fontSize(16)
          .backgroundColor(Color.White)
          .onChange((value: string) => {
            this.phoneNumber = value
          })
      }
      .margin({ top: 10 })
      .width('95%')
      .height(48)
      .borderRadius(4)
      .borderWidth(1)
      .borderColor('#CCCCCC')

      // 验证码输入区域
      Row() {
        Row() {
          Image($r('app.media.icon_verification_code'))
            .width(18)
            .height(18)
            .objectFit(ImageFit.Contain)
            .margin({left:10})
          TextInput({ placeholder: '请输入验证码' })
            .fontSize(16)
            .backgroundColor(Color.White)
        }
        .margin({ top: 10 })
        .width('60%')
        .height(48)
        .borderRadius(4)
        .borderWidth(1)
        .borderColor('#CCCCCC')

        Button({type:ButtonType.Normal}){
          Text(this.countdown ? `${this.countdown}s` : '获取验证码')
        }
        .width('37%')
        .height(32)
        .borderRadius(5)
        .borderColor($r('app.color.main_color'))
        .borderWidth(1)
        .backgroundColor(Color.White)
        .fontColor($r('app.color.main_color'))
        .fontSize(12)
        .margin({ top: 10 })
        .enabled(this.countdown === 0)
        .onClick(() => {
          if (this.phoneNumber.length >= 11) {
            this.startCountdown()
          } else {
            promptAction.showToast({message:'请输入手机号'})
          }
        })
      }
      .width('95%')
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Image($r('app.media.icon_forgetpassword_show'))
          .width(18)
          .height(18)
          .objectFit(ImageFit.Contain)
          .margin({left:10})
        // 密码输入框
        TextInput({ placeholder: '6~16位数字字母组合' })
          .fontSize(16)
          .width('95%')
          .backgroundColor(Color.White)
          .type(this.showPassword ? InputType.Normal : InputType.Password)
          .passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 })
      }
      .margin({ top: 10 })
      .width('95%')
      .height(48)
      .borderRadius(4)
      .borderWidth(1)
      .borderColor('#CCCCCC')

      // 登录按钮
      Button({type:ButtonType.Normal}){
        Text('登 录')
      }
        .width('90%')
        .height(48)
        .margin({ top: 40 })
        .borderRadius(8)
        .backgroundColor($r('app.color.main_color'))
        .fontColor('#FFFFFF')
        .fontSize(18)
        .onClick(() => {
          // 处理登录逻辑
          if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
            promptAction.showToast({message:'请输入有效手机号'})
            return
          }

          if (!this.smsCode) {
            promptAction.showToast({message:'请输入验证码'})
            return
          }

          if (!/^(?=.*[a-zA-Z])(?=.*\d)[\w]{6,16}$/.test(this.password)) {
            promptAction.showToast({message:'密码格式不正确'})
            return
          }

          // 执行登录操作...
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}