<template>
	<t-form class="tui-register-form" :data="formData.data" :rules="rules" @submit="doSubmit">
		<t-form-item label="昵称" name="name">
			<t-input class="name" v-model="formData.data.name" placeholder="" />
		</t-form-item>
		<t-form-item label="密码" name="password">
			<t-input type="password" v-model="formData.data.password" placeholder="" />
		</t-form-item>
		<t-form-item label="确认密码" name="rePassword">
			<t-input type="password" v-model="formData.data.rePassword" placeholder="" />
		</t-form-item>
		<t-form-item label="邮箱" name="email">
			<t-input type="text" v-model="formData.data.email" placeholder="选填" />
		</t-form-item>
		<t-form-item label="验证码" name="captcha">
			<div class="captcha-box">
				<t-input class="captcha" v-model="formData.captcha" placeholder="" />
				<captcha :api="CommonAPI.getCaptchaAPI()" :width="90" :height="28" :from="CaptchaFrom.REGISTER" />
			</div>
		</t-form-item>
		<div class="exec">
			<t-button
				class="button"
				type="submit"
				:loading="doSubmitting"
				:disabled="doSubmitting"
			>注册</t-button>
		</div>
	</t-form>
</template>

<script lang="ts" setup>
import { Captcha, CaptchaData, CaptchaFrom, CommonAPI, RegisterRequest, UserAPI, userStore } from "timi-web";
import { FormRules, MessagePlugin, SubmitContext } from "tdesign-vue-next";
import { Emits, useHandler } from "~/components/authorize-form/emits";

type RegisterForm = {
	rePassword: string;
} & RegisterRequest

const emits = defineEmits<Emits>();
const { onRegisterSuccess } = useHandler(emits);

const doSubmitting = ref<boolean>(false);

const formData = reactive<CaptchaData<RegisterForm>>({
	from: CaptchaFrom.LOGIN,
	captcha: "",
	data: {
		name: "",
		password: "",
		rePassword: "",
		email: undefined
	}
});

const rules = {
	name: [
		{
			required: true,
			message: "请输入昵称",
			type: "error"
		}
	],
	password: [
		{
			required: true,
			message: "请输入密码",
			type: "error"
		}
	],
	rePassword: [
		{
			required: true,
			message: "请输入确认密码",
			type: "error"
		},
		{
			validator: (val: string) => new Promise((resolve) => {
				const timer = setTimeout(() => {
					resolve(formData.data.password === val);
					clearTimeout(timer);
				});
			}),
			message: "两次密码不一致"
		}
	],
	captcha: [
		{
			required: true,
			message: "请输入验证码",
			type: "error"
		}
	]
} as FormRules;

const doSubmit = ({validateResult, e}: SubmitContext) => {
	if (e) {
		e.preventDefault();
	}
	if (validateResult === true) {
		doSubmitting.value = true;
		UserAPI.register({...formData}).then(async (response) => {
			await userStore.updateToken(response);
			await onRegisterSuccess();
			doSubmitting.value = false;
		}).catch(msg => {
			MessagePlugin.error(msg, 5E3);
			doSubmitting.value = false;
		});
	}
};
</script>

<style lang="less" scoped>
.tui-register-form {
	padding: 1rem;
	margin-left: -32px;

	.captcha-box {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.captcha {
			width: 7rem;
			margin-right: 1rem;
		}
	}

	.exec {
		display: flex;
		margin-top: 2rem;
		justify-content: center;

		.button {
			width: 8rem;
			margin-left: 32px;
		}
	}
}
</style>
