<template>
	<div class="register-container">
		<el-card class="register-card">
			<template #header>
				<div class="register-header">
					<h2>注册帐户</h2>
					<p class="sub-title">输入用户名 & 密码</p>
				</div>
			</template>
			<el-form
				ref="registerForm"
				:model="register"
				:rules="rules"
				label-position="top"
				@submit.prevent="onRegister"
			>
				<el-form-item label="用户昵称" prop="nickName">
					<el-input
						v-model="register.nickName"
						placeholder="输入昵称"
						clearable
					/>
				</el-form-item>

				<el-form-item label="手机号" prop="phone">
					<el-input
						v-model="register.phone"
						placeholder="输入手机号"
						clearable
					/>
				</el-form-item>

				<el-form-item label="用户名" prop="username">
					<el-input
						v-model="register.username"
						placeholder="输入用户名"
						clearable
					/>
				</el-form-item>

				<el-form-item label="密码" prop="password">
					<el-input
						v-model="register.password"
						type="password"
						placeholder="输入密码"
						show-password
					/>
				</el-form-item>

				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input
						v-model="register.confirmPassword"
						type="password"
						placeholder="再次输入密码"
						show-password
					/>
				</el-form-item>

				<div class="login-link">
					<el-link type="primary" @click="router.push('/login')">
						已有账号？去登录
					</el-link>
				</div>

				<el-form-item>
					<el-button
						type="primary"
						native-type="submit"
						class="register-btn"
						:loading="loading"
					>
						注册
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { registerFront } from '~/api/user/frontUserApi'
const router = useRouter()
const registerForm = ref<FormInstance>()
const loading = ref(false)
const register = reactive({
	username: '',
	password: '',
	confirmPassword: '',
	nickName: '',
	phone: ''
})

const validatePassword = (rule: any, value: string, callback: any) => {
	if (value === '') {
		callback(new Error('请再次输入密码'))
	} else if (value !== register.password) {
		callback(new Error('两次输入密码不一致!'))
	} else {
		callback()
	}
}

const validateUsername = (rule: any, value: string, callback: any) => {
	if (value === 'admin') {
		callback(new Error('不能使用admin作为用户名'))
	} else {
		callback()
	}
}

const rules = reactive<FormRules>({
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' },
		{ validator: validateUsername, trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: '请确认密码', trigger: 'blur' },
		{ validator: validatePassword, trigger: 'blur' }
	],
	nickName: [
		{ required: true, message: '请输入昵称', trigger: 'blur' },
		{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入正确的手机号码',
			trigger: 'blur'
		}
	]
})
const onRegister = async () => {
	try {
		await registerForm.value?.validate()
		loading.value = true
		 registerFront(register).then(res =>{
			 ElMessage.success('注册成功')
			 downloadFile(res.data)
			 router.push('/login')
		 })
	}finally {
		loading.value = false
	}
}
function downloadFile(url:string) {
	// 提取文件名（从URL中获取最后一个'/'后面的部分）
	const filename = url.split('/').pop();
	const a = document.createElement('a');
	a.href = url;
	a.download = filename; // 使用提取到的文件名
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
}
</script>

<style scoped>
.register-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: url("/eeeab8ba-58af-4da2-a882-2112c680f0c2.jpg") no-repeat center center;
	background-size: cover;
}

.register-card {
	width: 450px;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.register-header {
	text-align: center;
}

.register-header h2 {
	margin: 0;
	color: #333;
}

.sub-title {
	margin: 10px 0 0;
	font-size: 14px;
	color: #909399;
}

.login-link {
	text-align: right;
	margin-bottom: 20px;
}

.register-btn {
	width: 100%;
	margin-top: 10px;
}

:deep(.el-form-item__label) {
	font-weight: normal;
}
</style>

<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
