<template>
  <view class="register-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="register-title">注册用户</view>

    <!-- 手机号输入框 -->
    <view class="input-item">
      <view class="input-icon">
		  <image src="/static/登录/手机号.png" mode="" style="height: 100%;width: 100%;"></image>
      </view>
	  <uni-easyinput  class="input-content"  type="number" v-model="phoneNumber"
	  	  	   placeholder="请输入手机号" :inputBorder="false" maxlength="11"  :placeholderStyle="placeholderStyle">
	  	</uni-easyinput>
    </view>

    <!-- 验证码输入 + 获取验证码按钮 -->
    <view class="input-item verify-item">
      <view class="input-icon">
		  <image src="/static/登录/验证码.png" mode="" style="height: 100%;width: 100%;"></image>
        <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
      </view>
	  <uni-easyinput  class="input-content verify-input"  type="number" v-model="verifyCode"
	  	  	   placeholder="请输入验证码" :inputBorder="false" maxlength="6"  :placeholderStyle="placeholderStyle">
	  		</uni-easyinput>
 
      <button 
        class="get-verify-btn" 
        :disabled="!canGetVerify || countDown > 0"
        @click="getVerifyCode"
      >
        {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
      </button>
    </view>

    <!-- 账号输入框 -->
    <view class="input-item">
      <view class="input-icon">
		   <image src="/static/登录/账号.png" mode="" style="height: 100%;width: 100%;"></image>
        <!-- <uni-icons type="person" size="24" color="#999"></uni-icons> -->
      </view>
	  <uni-easyinput  class="input-content"  type="text" v-model="account"
	  	  	   placeholder="请输入账号" :inputBorder="false"  :placeholderStyle="placeholderStyle">
	  		</uni-easyinput>
 
    </view>

    <!-- 密码输入框 -->
    <view class="input-item">
      <view class="input-icon">
		  <image src="/static/登录/密码.png" mode="" style="height: 100%;width: 100%;"></image>
        <!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
      </view>
	   <uni-easyinput  class="input-content"  type="password" v-model="password"
		placeholder="请输入密码" :inputBorder="false" :placeholderStyle="placeholderStyle" >
		</uni-easyinput>
  
    </view>

    <!-- 协议勾选 -->
    <view class="agreement-item" @click="toggleAgreement">
      <uni-icons 
        type="checkbox-filled" 
        size="24" 
        color="#007aff"
        v-if="agreeAgreement"
      ></uni-icons>
      <uni-icons 
        type="checkbox" 
        size="24" 
        color="#999"
        v-else
      ></uni-icons>
      <text class="agreement-text">我已阅读并同意《用户隐私政策》</text>
    </view>

    <!-- 立即注册按钮 -->
    <button 
      class="register-btn" 
      :disabled="!canRegister"
      @click="handleRegister"
    >
      立即注册
    </button>

    <!-- 跳转登录链接 -->
    <view class="login-link">
      <navigator class="link-item" url="/pages/loginSub/login">已有账号，去登录</navigator>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue';
import {getRegisterUser,getSendCode} from '/pages/api/api.js'

// ========== 响应式数据 ==========
// 表单数据
const phoneNumber = ref('');
const verifyCode = ref('');
const account = ref('');
const password = ref('');
const placeholderStyle = ref('font-size:24rpx')
// 协议勾选（默认勾选，和截图一致）
const agreeAgreement = ref(true);
// 验证码倒计时
const countDown = ref(0);
let timer = null;

// ========== 计算属性 ==========
// 是否可获取验证码（手机号格式正确）
const canGetVerify = computed(() => {
  const phoneReg = /^1[3-9]\d{9}$/;
  return phoneReg.test(phoneNumber.value);
});

// 是否可注册（所有表单项+协议都满足）
const canRegister = computed(() => {
  const phoneReg = /^1[3-9]\d{9}$/; // 手机号11位
  const verifyReg = /^\d{6}$/; // 验证码6位
  const accountReg = /^.{4,20}$/; // 账号4-20位
  const pwdReg = /^.{6,16}$/; // 密码6-16位

  return phoneReg.test(phoneNumber.value) 
    && verifyReg.test(verifyCode.value) 
    && accountReg.test(account.value) 
    && pwdReg.test(password.value) 
    && agreeAgreement.value;
});

// ========== 方法 ==========
// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换协议勾选状态
const toggleAgreement = () => {
  agreeAgreement.value = !agreeAgreement.value;
};

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


// 获取验证码
const getVerifyCode = () => {
  if (!canGetVerify.value) return;
  let params = {
	  phone:phoneNumber.value,
	  scene:'register'
  }
  getSendCode(params).then(res =>{
	  if(res.code === 200){
		 uni.showToast({
		   title: '验证码已发送',
		   icon: 'success'
		 }); 
		
	  }else{
		 uni.showToast({
		   title: '验证码发送失败',
		   icon: 'error'
		 }); 
	  }
  })
  // 开始60秒倒计时
  countDown.value = 60;
  timer = setInterval(() => {
    countDown.value--;
    if (countDown.value <= 0) {
      clearInterval(timer);
      timer = null;
    }
  }, 1000);
  
};

// 处理注册逻辑
const handleRegister = () => {
  if (!canRegister.value) return;
  let params = {
	  phone:phoneNumber.value,
	  smsCode:verifyCode.value,
	  username:account.value,
	  password:password.value
  }
  getRegisterUser(params).then(res =>{
	    if(res.code === 200){
			uni.hideLoading();
	  		 uni.showToast({
	  		   title: '注册成功',
	  		   icon: 'success'
	  		 });   		
	  	  }else{
	  		 uni.showToast({
	  		   title: '注册失败，请重新注册',
	  		   icon: 'error'
	  		 }); 
	  	  }
  })
  // 注册成功后跳转到登录页
  uni.redirectTo({
    url: '/pages/login/pwd-login'
  });
  
  // setTimeout(() => { 
  
  // }, 1500);
};

// ========== 生命周期 ==========
// 页面卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
/* 页面容器 */
.register-page {
  padding: 20rpx 40rpx 40rpx;
  /* background-color: #f8f9fa; */
  min-height: 100vh;
   background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF );
}
 .status_bar {
	 height: 46px;
	 width: 100%;
	}

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

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

/* 注册标题 */
.register-title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 60rpx;
}

/* 输入框通用样式 */
.input-item {
  display: flex;
  align-items: center;
  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);
}

/* 验证码输入项特殊布局 */
.verify-item {
  position: relative;
  padding-right: 220rpx;
}

/* 输入框图标 */
.input-icon {
  margin-right: 20rpx;
  color: #999;
  width: 50rpx;
  height: 50rpx;
}

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

.verify-input {
  padding-right: 20rpx;
}

/* 获取验证码按钮 */
.get-verify-btn {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 35rpx;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
}

.get-verify-btn:disabled {
  background-color: #ccc;
  color: #fff;
}

/* 协议勾选项 */
.agreement-item {
  display: flex;
  align-items: center;
  margin: 40rpx 0;
  padding-left: 10rpx;
}

.agreement-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

/* 立即注册按钮 */
.register-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-bottom: 40rpx;
}

.register-btn:disabled {
  background-color: #99c8ff;
  color: #fff;
}

/* 跳转登录链接 */
.login-link {
  text-align: center;
}

.link-item {
  font-size: 28rpx;
  color: #007aff;
  text-decoration: none;
}
</style>