<template>
		<div class="module">
				<div class="module_mian">
					<div class="module_title">注册帐户</div>
					<div class="module_desc">输入用户名 & 密码</div>
					<div class="module_m">
						<div class="module_text">用户昵称</div>
						<input class="module_input" type="text" placeholder="输入昵称" v-model="register.nickName" />
					</div>
					<div class="module_m">
						<div class="module_text">用户名</div>
						<input class="module_input" type="text" placeholder="输入用户名" v-model="register.username" />
					</div>
					<div class="module_m">
						<div class="module_text">密码</div>
						<input class="module_input" type="password"  placeholder="输入密码" v-model="register.password" />
					</div>
					<div class="module_m">
						<div class="module_text">确认密码</div>
						<div class="module_code">
							<input class="module_input" type="password"  placeholder="再次输入密码" v-model="register.confirmPassword" />
						</div>
					</div>
					<div class="forgetpwd" @click="router.push('/login')">有账号？</div>
					<button class="module_button" @click="onRegister">注册</button>
				</div>
		</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { registerFront } from '~/api/user/frontUserApi'
const router = useRouter();
const register = reactive({
	username: '',
	password: '',
	confirmPassword: '',
	nickName: '',
	uuid: ''
})

/**
 * 注册成功
 */
const onRegister = () => {
	if (register.username == 'admin') {
		ElMessage.warning("不能创建账号Admin")
		return
	}
	registerFront(register).then(() =>{
		ElMessage.success("注册成功~")
		router.push("/login")
	})
}
</script>
<style scoped>
.module{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: url("/login/e36341619bf8f04dcbdc6b01105a85a.png");
	background-size: 100% 100%;
	.module_mian{
		width: 26%;
		background: #FFFFFF;
		height: auto;
		border-radius: 8px;
		overflow: hidden;
		padding-top: 40px;
		padding-bottom: 40px;
		.module_title{
			font-size: 18px;
			font-weight: 500;
			text-align: center;
			color:#333333;
		}
		.module_desc{
			font-size: 12px;
			text-align: center;
			color:#a7a7a7;
			margin-bottom: 20px;
		}
		.module_m{
			margin: 0 auto;
			width: 80%;
			height: auto;
			margin-top: 10px;
			.module_text{
				font-size: 14px;
				color: #333333;
				margin-bottom: 5px;
			}
			.module_input{
				width: 96%;
				height: 40px;
				padding-left: 2%;
				padding-right: 2%;
				border:1px solid #eee;
				border-radius: 5px;
				font-size: 12px;
			}
			.module_code{
				width: 96%;
				display: flex;
				align-items: center;
				.module_code_input{
					width: 60%;
					height: 40px;
					border-radius: 5px;
					border:1px solid #eee;
					font-size: 12px;
					padding-left: 2%;
					padding-right: 2%;
				}
				.module_code_img{
					width: 130px;
					height: 40px;
					border-radius: 5px;
					margin-left: 10px;
				}
			}
		}
		.module_radio{
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #333333;
			display: flex;
			align-items: center;
			margin-top: 10px;
		}
		.module_radio input{
			margin-right: 5px;
		}
		.forgetpwd{
			cursor: pointer;
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #328d86;
			margin-top: 10px;
		}
		.module_button{
			margin: 0 auto;
			display: block;
			width: 80%;
			background:#328d86;
			color: #FFFFFF;
			height: 40px;
			margin-top: 20px;
			border-radius: 5px;
			font-weight: 500;
		}
		.module_button:active{
			opacity: 0.4;
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
