<script setup lang="ts">
	import { useLoginStore } from "@/stores/login";
	import { ref, Ref } from "vue";
	const store = useLoginStore();
	interface RegisterInfo {
		username: string;
		nickname: string;
		password: string;
		email: string;
		phone: string;
		third_user_id: string;
		union_id: string;
		platform: string;
		confirmPassword: string;
	}
	// 注册信息
	const registerInfo: Ref<RegisterInfo> = ref({
		username: "",
		nickname: "",
		password: "",
		email: "",
		phone: "",
		third_user_id: "",
		union_id: "",
		platform: "",
		confirmPassword: "",
	});
	const rules = {
		username: [
			{ required: true, message: "用户名不能为空", trigger: "blur" },
			{
				min: 3,
				max: 20,
				message: "用户名长度应在3到20个字符之间",
				trigger: "blur",
			},
			{
				pattern: /^[a-zA-Z0-9]+$/,
				message: "用户名只能包含英文和数字",
				trigger: "blur",
			},
		],
		password: [
			{ required: true, message: "密码不能为空", trigger: "blur" },
			{ min: 6, message: "密码长度不能小于6位", trigger: "blur" },
		],
		confirmPassword: [
			{ required: true, message: "请再次输入密码", trigger: "blur" },
			{
				validator: (rule: any, value: any, callback: any) => {
					console.log(rule);
					if (value === "") {
						callback(new Error("请再次输入密码"));
					} else if (value !== registerInfo.value.password) {
						callback(new Error("两次输入的密码不一致"));
					} else {
						callback();
					}
				},
				trigger: "blur",
			},
		],
		email: [
			{ required: true, message: "邮箱不能为空", trigger: "blur" },
			{
				type: "email",
				message: "请输入有效的邮箱地址",
				trigger: ["blur", "change"],
			},
		],
		phone: [
			{ required: true, message: "手机号不能为空", trigger: "blur" },
			{
				pattern: /^1[3-9]\d{9}$/,
				message: "请输入有效的手机号",
				trigger: "blur",
			},
		],
		nickname: [
			{ required: true, message: "昵称不能为空", trigger: "blur" },
			{
				min: 2,
				max: 20,
				message: "昵称长度应在2到20个字符之间",
				trigger: "blur",
			},
		],
	};
</script>
<template>
	<el-form
		label-position="left"
		label-width="0px"
		:model="registerInfo"
		ref="regFormRef"
		:rules="rules"
	>
		<el-form-item prop="username">
			<el-input
				v-model="registerInfo.username"
				size="large"
				placeholder="请输入用户名"
				prefix-icon="UserFilled"
			></el-input>
		</el-form-item>
		<!-- <el-form-item prop="nickname">
			<el-input
				v-model="registerInfo.nickname"
				size="large"
				placeholder="请输入真实姓名"
				prefix-icon="Avatar"
			></el-input>
		</el-form-item>
		<el-form-item prop="email">
			<el-input
				v-model="registerInfo.email"
				size="large"
				placeholder="请输入邮箱"
				prefix-icon="Message"
			></el-input>
		</el-form-item>
		<el-form-item prop="phone">
			<el-input
				v-model="registerInfo.phone"
				size="large"
				placeholder="请输入手机号"
				prefix-icon="Iphone"
			></el-input>
		</el-form-item> -->
		<el-form-item prop="password">
			<el-input
				v-model="registerInfo.password"
				size="large"
				type="password"
				placeholder="请输入密码"
				show-password
				prefix-icon="Key"
			></el-input>
		</el-form-item>
		<el-form-item prop="confirmPassword">
			<el-input
				v-model="registerInfo.confirmPassword"
				size="large"
				type="password"
				placeholder="请再次输入密码"
				show-password
				prefix-icon="Lock"
			></el-input>
		</el-form-item>

		<el-form-item class="button-center">
			<el-button
				class="login-button"
				type="primary"
				size="large"
				@click="store.onRegister"
				>注册</el-button
			>
		</el-form-item>
	</el-form>
</template>
<style scoped>
	.button-center {
		width: 100%;
		.login-button {
			width: 100%;
			height: 45px;
			border-radius: 50px;
		}
	}
	:deep(.el-input__wrapper) {
		border-radius: 50px;
		height: 45px;
	}
</style>