<template>
	<view class="content">
		<!-- 加一个自定义导航栏 -->
		
		
		<view class="header">
			<!-- <image src="/static/index/index_bg.png"></image> -->
			<cu-custom  :isBack="true">
				<view slot="backText">返回</view>
				<view slot="content">注册新成员账号</view>
			</cu-custom>
		</view>
<!-- 
		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/index/phone.png"></image>
				<input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="手机号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/index/lock.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="登录密码" :password="!showPassword" />
				<text class="eye-icon" :class="{'eye-active': showPassword}" @tap="togglePassword"></text>
			</view>
			<view class="list-call">
				<text class="code-icon"></text>
				<input class="sl-input" v-model="code" type="number" maxlength="4" placeholder="验证码" />
				<view class="yzm" :class="{ yzms: second > 0 }" @tap="getCode">{{codeText}}</view>
			</view>
			<view class="list-call">
				<text class="invite-icon"></text>
				<input class="sl-input" v-model="invitation" type="text" maxlength="12" placeholder="邀请码" />
			</view>
		</view> -->
		<view class="padding solid radius margin">
		<up-form labelPosition="left" :model="state.model1" :rules="state.rules" ref="form1">
			<up-form-item  label="加入企业" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
				<up-input border="none" placeholder="请输入企业名称" inputAlign="right"></up-input>
			</up-form-item>
					<up-form-item :required="true" label="真实姓名" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
						<up-input border="none" placeholder="请输入" inputAlign="right"></up-input>
					</up-form-item>
					<up-form-item :required="true" label="选择分组/部门" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="120">
						<up-input border="none" placeholder="选择" inputAlign="right" ></up-input>
					</up-form-item>
					<up-form-item :required="true" label="手机号码" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
						<up-input border="none" placeholder="请输入手机号码" inputAlign="right"></up-input>
					</up-form-item>
					<up-form-item :required="true" label="密码" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
						<up-input border="none" placeholder="请输入密码" inputAlign="right"></up-input>
					</up-form-item>
					<up-form-item :required="true" label="确认密码" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
						<up-input border="none" placeholder="请输入密码" inputAlign="right"></up-input>
					</up-form-item>
				</up-form>
				<view class="">
					<view class="button-login" hover-class="button-hover" @tap="handleRegister">
						<text>申请加入</text>
					</view>
				</view>
		</view>
		
		
	</view>
</template>

<script setup>
import { ref, computed, onUnmounted,reactive } from 'vue';

// 响应式数据
const phone = ref('');
const password = ref('');
const code = ref('');
const invitation = ref('');
const second = ref(0);
const showPassword = ref(false);
let timer = null;

// 使用 reactive 创建响应式状态  
		const state = reactive({
			showSex: false,
			model1: {
				userInfo: {
					name: 'uview-plus UI',
					sex: '',
				},
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change'],
				},
			},
		});
// 计算属性
const codeText = computed(() => {
	if (second.value === 0) {
		return '获取验证码';
	} else {
		const secondStr = second.value < 10 ? `0${second.value}` : second.value;
		return `重新获取${secondStr}`;
	}
});

// 方法定义
const togglePassword = () => {
	showPassword.value = !showPassword.value;
};

const getCode = () => {
	if (phone.value.length !== 11) {
		uni.showToast({
			icon: 'none',
			title: '手机号不正确'
		});
		return;
	}
	
	if (second.value > 0) {
		return;
	}
	
	second.value = 60;
	startCountdown();
	
	// 发送验证码请求
	uni.request({
		url: 'http://example.com/api/code',
		data: {
			phone: phone.value,
			type: 'reg'
		},
		method: 'POST',
		dataType: 'json',
		success: (res) => {
			if (res.data.code != 200) {
				uni.showToast({
					title: res.data.msg || '获取验证码失败',
					icon: 'none'
				});
				second.value = 0;
				clearCountdown();
			} else {
				uni.showToast({
					title: res.data.msg || '验证码已发送'
				});
			}
		},
		fail: () => {
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			});
			second.value = 0;
			clearCountdown();
		}
	});
};

const startCountdown = () => {
	clearCountdown();
	timer = setInterval(() => {
		second.value--;
		if (second.value === 0) {
			clearCountdown();
		}
	}, 1000);
};

const clearCountdown = () => {
	if (timer) {
		clearInterval(timer);
		timer = null;
	}
};

const handleRegister = () => {
	if (phone.value.length !== 11) {
		uni.showToast({
			icon: 'none',
			title: '手机号不正确'
		});
		return;
	}
	
	if (password.value.length < 6) {
		uni.showToast({
			icon: 'none',
			title: '密码不正确'
		});
		return;
	}
	
	if (code.value.length !== 4) {
		uni.showToast({
			icon: 'none',
			title: '验证码不正确'
		});
		return;
	}
	
	// 注册请求
	uni.request({
		url: 'http://example.com/api/register',
		data: {
			phone: phone.value,
			password: password.value,
			code: code.value,
			invitation: invitation.value
		},
		method: 'POST',
		dataType: 'json',
		success: (res) => {
			if (res.data.code != 200) {
				uni.showToast({
					title: res.data.msg || '注册失败',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.data.msg || '注册成功'
				});
				
				// 延时返回登录页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		fail: () => {
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			});
		}
	});
};

// 组件卸载时清除定时器
onUnmounted(() => {
	clearCountdown();
});

</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #FFFFFF;
}

.header {
	width: 100%;
	position: relative;
	
	image {
		width: 100%;
	}
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;
	
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		background: #F5F7FB;
		border-radius: 16rpx;
		border: 2rpx solid #F5F7FB;
		margin-top: 30rpx;
		padding: 0 30rpx;
		
		.img {
			width: 30rpx;
			height: 36rpx;
		}
		
		.sl-input {
			flex: 1;
			text-align: left;
			font-size: 32rpx;
			margin-left: 16rpx;
		}
		
		.eye-icon {
			font-size: 36rpx;
			color: #999;
			&::before {
				content: '\e69c'; /* 闭眼图标的unicode */
			}
			
			&.eye-active {
				color: #3D83F6;
				&::before {
					content: '\e69d'; /* 睁眼图标的unicode */
				}
			}
		}
		
		.yzm {
			width: 200rpx;
			height: 60rpx;
			text-align: center;
			font-size: 30rpx;
			color: #3D83F6;
			&.yzms {
				color: #999999;
			}
		}
	}
}

.code-icon::before {
	content: '\e682'; /* 验证码图标的unicode */
	color: #999;
	font-size: 36rpx;
}

.invite-icon::before {
	content: '\e683'; /* 邀请码图标的unicode */
	color: #999;
	font-size: 36rpx;
}

// .padding-lr {
// 	padding-left: 70rpx;
// 	padding-right: 70rpx;
// }

.button-login {
	color: #FFFFFF;
	font-size: 34rpx;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(90deg, #3E95F1 0%, #4269F5 100%);
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 130rpx;
}

.button-hover {
	opacity: 0.8;
}
::v-deep .up-input__input {
  color: #3D83F6;
}
</style> 