<template>
  <view class="reset-page">
    <!-- 背景图 -->
    <image class="background-image" src="https://lxnapi.ccttiot.com/bike/img/static/uWOnjtkaVDDLhY4PtMd8"
      mode="aspectFill">
    </image>
	<u-navbar title="忘记密码" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
		height='50' :custom-back='backPage'></u-navbar>

    <view class="overlay">
      <text class="tip">请输入手机号码和验证码找回密码</text>

      <!-- 手机号输入框 -->
      <view class="input-box">
        <image src="https://lxnapi.ccttiot.com/bike/img/static/uAjqjitdgGf19n0G3uuI" class="input-icon"></image>
        <input type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" class="input" @input="validatePhone" />
      </view>
      <text class="error-tip" v-if="errors.phone">{{ errors.phone }}</text>

      <!-- 新密码输入框 -->
      <view class="input-box">
        <image src="https://lxnapi.ccttiot.com/bike/img/static/ud4QtAXZp6fOitzpapuw" class="input-icon"></image>
        <input type="password" v-model="password" placeholder="请输入新密码" class="input" @input="validatePassword" />
      </view>
      <text class="error-tip" v-if="errors.password">{{ errors.password }}</text>

      <!-- 验证码输入框 -->
      <view class="input-box">
        <image src="https://lxnapi.ccttiot.com/bike/img/static/u7H7WpZhmsvtgZawoxW6" class="input-icon"></image>
        <input type="number" v-model="code" placeholder="请输入验证码" maxlength="4" class="input-2" @input="validateCode" />
        <text class="get-code" :class="{ 'disabled': countdown > 0 }" @tap="handleGetCode">
          {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
        </text>
      </view>
      <text class="error-tip" v-if="errors.code">{{ errors.code }}</text>

      <!-- 提交按钮 -->
      <view class="submit-btn" @tap="handleResetPassword" :class="{ 'disabled': loading }">
        <text class="submit-txt">{{ loading ? '处理中...' : '确认' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      code: '',
      password: '',
      uuid: '',
      loading: false,
      countdown: 0,
      errors: {
        phone: '',
        code: '',
        password: ''
      },
	  bgc: {
	  	backgroundColor: "",
	  },
    }
  },

  methods: {
    backToLogin() {
      uni.navigateBack();
    },

    // 验证手机号
    validatePhone() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!this.phone.trim()) {
        this.errors.phone = '请输入手机号';
        return false;
      } else if (!phoneRegex.test(this.phone)) {
        this.errors.phone = '请输入正确的手机号格式';
        return false;
      }
      this.errors.phone = '';
      return true;
    },

    // 验证验证码
    validateCode() {
      const codeRegex = /^\d{4}$/;
      if (!this.code.trim()) {
        this.errors.code = '请输入验证码';
        return false;
      } else if (!codeRegex.test(this.code)) {
        this.errors.code = '请输入4位数字验证码';
        return false;
      }
      this.errors.code = '';
      return true;
    },

    // 验证密码
    validatePassword() {
      if (!this.password.trim()) {
        this.errors.password = '请输入密码';
        return false;
      } else if (this.password.length < 6) {
        this.errors.password = '密码长度不能少于6位';
        return false;
      }
      this.errors.password = '';
      return true;
    },

    // 表单整体验证
    validateForm() {
      const isPhoneValid = this.validatePhone();
      const isCodeValid = this.validateCode();
      const isPasswordValid = this.validatePassword();

      return isPhoneValid && isCodeValid && isPasswordValid;
    },



    startCountdown() {
      if (this.countdown <= 0) return;
      setTimeout(() => {
        this.countdown--;
        if (this.countdown > 0) {
          this.startCountdown();
        }
      }, 1000);
    },

    // 获取验证码
    handleGetCode() {
      if (this.countdown > 0) return;

      if (!this.validatePhone()) return;

      this.$u.get("/appCaptcha?type=3&phone=" + this.phone).then((res) => {
        if (res.code == 200) {
          this.uuid = res.uuid;
          this.countdown = 60;
          this.startCountdown();
          uni.showToast({
            title: '验证码已发送',
            icon: 'success',
            duration: 2000
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          });
        }
      }).catch((error) => {
        console.error('获取验证码失败:', error);
        uni.showToast({
          title: '获取验证码失败',
          icon: 'none',
          duration: 2000
        });
      });
    },

    // 重置密码
    handleResetPassword() {
      if (!this.validateForm()) return;

      if (!this.uuid) {
        uni.showToast({
          title: '请先获取验证码',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      this.loading = true;
      const data = {
        phone: this.phone,
        newPassword: this.password,
        phoneCode: this.code,
        uuid: this.uuid
      };

      this.$u.post("/forgotPassword", data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '密码重置成功',
            icon: 'success',
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          });
        }
      }).catch((error) => {
        console.error('重置密码失败:', error);
        uni.showToast({
          title: '重置密码失败',
          icon: 'none',
          duration: 2000
        });
      }).finally(() => {
        this.loading = false;
      });
    }
  }

}
</script>
<style lang="scss">
.reset-page {
  position: relative;
  width: 100%;
  height: 100vh;

  .background-image {
    width: 750rpx;
    height: 472rpx;
  }

  .top-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    margin-top: var(--status-bar-height);

    .back-btn {
      padding: 20rpx;
      margin-left: -20rpx;
    }

    .back-icon {
      width: 40rpx;
      height: 40rpx;
    }

    .nav-title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      color: #000;
    }
  }

  .overlay {
    position: absolute;
    top: 400rpx;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    padding: 68rpx;
  }

  .tip {
    margin-bottom: 48rpx;
    font-size: 28rpx;
    color: #999;
  }

  .input-box {
    padding-left: 36rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 32rpx;
    width: 614rpx;
    height: 108rpx;
    background-color: #EFEFEF;
    border-radius: 54rpx;
  }

  .input-icon {
    width: 38rpx;
    height: 38rpx;
  }

  .input {
    width: 500rpx;
    margin-left: 20rpx;
    background-color: transparent;
  }

  .input-2 {
    width: 350rpx;
    margin-left: 20rpx;
    background-color: transparent;
  }

  .error-tip {
    margin-top: 10rpx;
    padding-left: 36rpx;
    font-size: 24rpx;
    color: #ff4d4f;
  }

  .get-code {
    width: 40%;
    font-weight: 400;
    font-size: 28rpx;
    color: #4297F3;
    padding: 0 36rpx;

    &.disabled {
      color: #999;
    }
  }

  .submit-btn {
    margin-top: 68rpx;
    height: 108rpx;
    background-color: #4297F3;
    border-radius: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.disabled {
      opacity: 0.7;
    }
  }

  .submit-txt {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
}
</style>