<template>
  <view class="reset-pwd-page">
	  <view class="status_bar"></view>
    <!-- 顶部导航栏 -->
    <!-- <view class="nav-bar">
      <uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
      <view class="nav-title">修改密码</view>
    </view> -->

    <!-- 密码提示 -->
    <view class="pwd-tips">密码为 6-16 位，需同时包含字母和数字</view>

    <!-- 新密码输入框 -->
    <view class="input-item">
		<uni-easyinput  class="input-content"  type="password" v-model="newPassword"
			placeholder="请输入密码" :inputBorder="false" maxlength="16"  :placeholderStyle="placeholderStyle">
		 </uni-easyinput>
    </view>

    <!-- 确认密码输入框 -->
    <view class="input-item">
		<uni-easyinput  class="input-content"  type="password" v-model="confirmPassword"
					placeholder="请再次输入密码" :inputBorder="false" maxlength="16"  :placeholderStyle="placeholderStyle">
			</uni-easyinput>
    </view>

    <!-- 确定按钮 -->
    <button 
      class="confirm-btn" 
	  :disabled="!canConfirm"
      @click="handleConfirm"
    >
      确定
    </button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import {onLoad,onShow} from '@dcloudio/uni-app'
import{getResetPassword} from '../api/api.js'


// ========== 响应式数据 ==========
// 新密码
const newPassword = ref('');
// 确认密码
const confirmPassword = ref('');
const placeholderStyle = ref('font-size:24rpx')
// 定义接收上一页传来的参数
const phone = ref('');
const smsCode = ref('');

// ========== 计算属性 ==========
// 是否可点击确定按钮（密码格式正确 + 两次输入一致）
const canConfirm = computed(() => {
  // 密码格式规则：6-16位任意字符
  const pwdReg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/;
  // 校验条件：新密码符合格式 + 确认密码和新密码一致 + 均不为空
  return pwdReg.test(newPassword.value) 
    && newPassword.value === confirmPassword.value 
    && newPassword.value && confirmPassword.value;
});

// ========== 方法 ==========
// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
onShow(() => {
  // 从缓存读取参数
  const params = uni.getStorageSync('tempChangePwdParams') || {}; 
  //  赋值
  phone.value = params.phoneNumber
  smsCode.value = params.verifyCode 
  // 用完删除缓存（避免下次跳转读取旧值）
  uni.removeStorageSync('tempChangePwdParams');
});

// 检查表单状态（实时更新按钮状态）
const checkForm = () => {};

// 处理确定按钮点击（修改密码逻辑）
const handleConfirm = () => {
  if (!canConfirm.value) return
  let params = {
	  phone:phone.value,
	  smsCode:smsCode.value,
	  newPassword:newPassword.value,
	  confirmPassword:confirmPassword.value,
	  scene:'reset'
  }
  getResetPassword(params).then(res =>{
	if(res.code === 200){
	  	//uni.setStorageSync('token', res.token); // 假设后端返回token字段
	  	uni.showToast({ title: '修改成功', icon: 'success' });
		setTimeout(() =>{
			uni.navigateTo({ url: '/pageSubPack/loginSub/login?mode=pwd' });
		},1500)
	  	
	}else{
	  	uni.showToast({ title: "修改失败", icon: 'none' });
	}  
  }).catch(err =>{
	  uni.showToast({
	  		title: err.msg || '网络异常', 
	  		icon: 'none' 
	  	});
  })

  
};
</script>

<style scoped>
/* 页面容器 */
.reset-pwd-page {
  padding: 20rpx 40rpx 40rpx;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF );
}
.status_bar{
	width: 100%;
	height: 46px;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  margin-bottom: 60rpx;
}

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

/* 输入框通用样式 */
.input-item {
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 30rpx;
  height: 88rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

/* 输入框内容 */
.input-content {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  height: 100%;
}

/* 深度覆盖 uni-easyinput 内部默认样式，解决高度偏移 */
.input-content :deep(.uni-easyinput__content) {
  height: 100% !important;
  min-height: unset !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.input-content :deep(.uni-easyinput__content-input) {
  height: 100% !important;
  min-height: unset !important;
  padding: 0 !important;
  line-height: 88rpx;
}

/* 密码提示 */
.pwd-tips {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

/* 确定按钮 */
.confirm-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-top: 20rpx;
  margin-top: 66rpx;
}

/* 确定按钮禁用状态 */
.confirm-btn:disabled {
  background-color: #99c8ff;
  color: #fff;
}
/* 禁用按钮边框 */
button:after{
	border-radius:  8px;
}
</style>