<template>
	<view class="register-page">
		<view class="register-container">
			<view class="register-header">
				<!-- <image :src="Service.GetIconImg('/static/logo/logo.png')" class="logo"></image> -->
				<text class="app-title">用户注册</text>
				<text class="app-subtitle">创建您的账户</text>
			</view>

			<view class="register-form">
				<view class="input-item">
					<u-icon name="phone" size="20" color="#999"></u-icon>
					<input v-model="registerForm.phone"  class="input-field" type="number" maxlength="11"
						placeholder="请输入手机号" />
				</view>

				<view class="input-item">
					<u-icon name="error-circle" size="20" color="#999"></u-icon>
					<input v-model="registerForm.code" class="input-field code-input" type="number" maxlength="6"
						placeholder="请输入验证码" />
					<button class="code-btn" :disabled="counting" @click="getCode">
						{{ counting ? `${countdown}s` : '获取验证码' }}
					</button>
				</view>

				<view class="input-item">
					<u-icon name="lock" size="20" color="#999"></u-icon>
					<input v-model="registerForm.password" class="input-field" placeholder="请设置密码" />
				</view>
				<view class="input-item">
					<u-icon name="man-add" size="20" color="#999"></u-icon>
					<input v-model="registerForm.id" :disabled='isInput' type="number" class="input-field" placeholder="推荐人手机号可为空" />
				</view>
				<view class="input-item">
					<u-icon name="man-add" size="20" color="#999"></u-icon>
					<input v-model="registerForm.payPwd" maxlength="6" type="number" class="input-field"
						placeholder="请设置支付密码" />
				</view>

				

				<button class="register-btn" @click="handleRegister">
					立即注册
				</button>

				<view class="register-footer">
					<text class="footer-text">已有账号？</text>
					<text class="footer-link" @click="goToLogin">立即登录</text>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Service } from '@/Service/Service';
	import { LoginService } from "@/Service/api/LoginService"
	import { onLoad } from '@dcloudio/uni-app';

	const showPassword = ref(false);

	const counting = ref(false);
	const countdown = ref(60);

	let visible = ref(false)
	let isInput=ref(false)
	const registerForm = ref({
		phone: '',
		code: '',
		password: '',
		id: '',
		payPwd: ''
	});

	onLoad(() => {
		
		registerForm.value.id = new URLSearchParams(location.hash.split('?')[1] || '').get('par') ?? '';
		if(registerForm.value.id){
			isInput.value=true
		}else{
			isInput.value=false
		}
	})

	

	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};

	const getCode = () => {
		if (!registerForm.value.phone) {
			Service.Msg('请输入手机号');
			return;
		}

		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(registerForm.value.phone)) {
			Service.Msg('请输入正确的手机号');
			return;
		}

		counting.value = true;
		LoginService.SendSms(registerForm.value.phone, 'Register').then(res => {
			if (res.code == 0) {
				Service.Msg('验证码已发送!');
			} else {
				Service.Msg(res.msg)
			}
		})

		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				counting.value = false;
				countdown.value = 60;
			}
		}, 1000);
	};


	const handleRegister = () => {
		if (!registerForm.value.phone) {
			Service.Msg('请输入手机号!');
			return;
		}
		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(registerForm.value.phone)) {
			Service.Msg('请输入正确的手机号!');
			return;
		}
		if (!registerForm.value.code) {
			Service.Msg('请输入验证码!');
			return;
		}
		if (!registerForm.value.password) {
			Service.Msg('请设置密码!');
			return;
		}
		if (!registerForm.value.payPwd) {
			Service.Msg('请设置密码!');
			return;
		}
		if (registerForm.value.password.length < 6) {
			Service.Msg('密码长度不能少于6位!');
			return;
		}
		if (registerForm.value.payPwd.length < 6) {
			Service.Msg('支付密码长度不能少于6!');
			return;
		}
		

		Service.LoadIng('注册中...');
		let data = {
			phone: registerForm.value.phone,
			code: registerForm.value.code,
			pwd: registerForm.value.password,
			npwd: registerForm.value.password,
			remPhone: registerForm.value.id,
			payPwd: registerForm.value.payPwd
		}
		LoginService.Register(data).then(res => {
			if (res.code == 0) {
				Service.LoadClose();
				Service.Msg('注册成功');
				Service.SetUserToken(res.data.token)
				Service.GoPageTab('/pages/index/index');
			} else {
				Service.Msg(res.msg)
			}
		})
	};



	const goToLogin = () => {
		Service.GoPageDelse('/pages/login/login')
	};
</script>

<style scoped lang="scss">
	.register-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.register-container {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.1);
	}

	.register-header {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.logo {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-bottom: 24rpx;
	}

	.app-title {
		display: block;
		font-size: 44rpx;
		font-weight: bold;
		color: #1F2937;
		margin-bottom: 10rpx;
	}

	.app-subtitle {
		font-size: 28rpx;
		color: #6B7280;
	}

	.register-form {
		margin-bottom: 30rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		background-color: #F9FAFB;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
		margin-bottom: 28rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s;

		&:focus-within {
			border-color: #F97316;
			background-color: #FFF;
		}
	}

	.input-field {
		flex: 1;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #1F2937;
	}

	.area-display {
		color: #1F2937;
	}

	.area-display:empty::before {
		content: '请选择所在地区';
		color: #9CA3AF;
	}

	.code-input {
		flex: 1;
	}

	.code-btn {
		margin-left: 20rpx;
		padding: 16rpx 24rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 12rpx;
		border: none;
		line-height: 1;
		white-space: nowrap;

		&:disabled {
			opacity: 0.6;
			background-color: #fff;
		}
	}

	.register-btn {
		width: 100%;
		padding: 0 30rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 600;
		border: none;
		border-radius: 16rpx;
		margin-top: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.3);
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.2);
		}
	}

	.register-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}

	.footer-text {
		font-size: 28rpx;
		color: #6B7280;
	}

	.footer-link {
		font-size: 28rpx;
		color: #F97316;
		font-weight: 600;
		margin-left: 8rpx;
	}
</style>