<template>
	<div class="register-container">
		<div class="register-main">
			<div class="register-header">
				<div class="register-title">加入数字图书版权系统</div>
				<div class="register-subtitle">保护您的创作，从区块链存证开始</div>
			</div>

			<div class="register-form">
				<div class="form-item">
					<div class="form-label">
						<i class="el-icon-user-solid"></i> 用户昵称
					</div>
					<input class="form-input"
								 type="text"
								 placeholder="用于显示的昵称"
								 v-model="register.nickName" />
				</div>

				<div class="form-item">
					<div class="form-label">
						<i class="el-icon-user"></i> 用户名/邮箱
					</div>
					<input class="form-input"
								 type="text"
								 placeholder="用于登录的用户名/邮箱"
								 v-model="register.username" />
					<div class="input-tip" v-if="register.username === 'admin'">
						<i class="el-icon-warning"></i> 不能使用admin作为用户名
					</div>
				</div>

				<div class="form-item">
					<div class="form-label">
						<i class="el-icon-lock"></i> 密码
					</div>
					<input class="form-input"
								 type="password"
								 placeholder="设置登录密码（6-18位字符）"
								 v-model="register.password" />
				</div>

				<div class="form-item">
					<div class="form-label">
						<i class="el-icon-circle-check"></i> 确认密码
					</div>
					<input class="form-input"
								 type="password"
								 placeholder="再次输入密码"
								 v-model="register.confirmPassword" />
					<div class="input-tip" v-if="register.password && register.confirmPassword && register.password !== register.confirmPassword">
						<i class="el-icon-warning"></i> 两次输入的密码不一致
					</div>
				</div>

				<div class="form-agreement">
					<el-checkbox v-model="agreementChecked">
						我已阅读并同意<span class="agreement-link">《用户协议》</span>和<span class="agreement-link">《隐私政策》</span>
					</el-checkbox>
				</div>

				<el-button class="register-button"
									 :loading="loading"
									 @click="onRegister"
									 :disabled="!agreementChecked">
					<i class="el-icon-edit"></i> 立即注册
				</el-button>

				<div class="login-link">
					已有账号？<span @click="router.push('/login')">立即登录</span>
					<i class="el-icon-arrow-right"></i>
				</div>
			</div>

			<div class="copyright-notice">
				<i class="el-icon-warning-outline"></i> 您的作品信息将通过区块链技术永久存证
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { registerFront } from '~/api/user/frontUserApi'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const router = useRouter()
const loading = ref(false)
const agreementChecked = ref(false)

const register = reactive({
	username: '',
	password: '',
	confirmPassword: '',
	nickName: '',
	uuid: ''
})

const onRegister = () => {
	if (register.username === 'admin') {
		ElMessage.warning("不能使用admin作为用户名")
		return
	}

	if (!agreementChecked.value) {
		ElMessage.warning("请先阅读并同意用户协议")
		return
	}

	if (register.password !== register.confirmPassword) {
		ElMessage.warning("两次输入的密码不一致")
		return
	}

	loading.value = true
	registerFront(register).then(() => {
		ElMessage.success("注册成功！")
		router.push("/login")
	}).catch(() => {
		loading.value = false
	})
}
</script>

<style scoped lang="scss">
.register-container {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

	.register-main {
		width: 450px;
		background: #ffffff;
		border-radius: 12px;
		padding: 40px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 4px;
			background: linear-gradient(90deg, #1a2980, #26d0ce);
			background-size: 200% 100%;
			animation: gradient 3s ease infinite;
		}

		.register-header {
			margin-bottom: 30px;
			text-align: center;

			.register-title {
				font-size: 24px;
				font-weight: 600;
				color: #1a2980;
				margin-bottom: 8px;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					bottom: -8px;
					left: 50%;
					transform: translateX(-50%);
					width: 60px;
					height: 3px;
					background: linear-gradient(90deg, #1a2980, #26d0ce);
					border-radius: 3px;
				}
			}

			.register-subtitle {
				font-size: 14px;
				color: #5e6d82;
				margin-top: 15px;

				&::before {
					content: "📖";
					margin-right: 8px;
				}
			}
		}

		.form-item {
			margin-bottom: 20px;

			.form-label {
				font-size: 14px;
				color: #5e6d82;
				margin-bottom: 8px;
				font-weight: 500;
				display: flex;
				align-items: center;

				i {
					margin-right: 8px;
					color: #1a2980;
				}
			}

			.form-input {
				width: 100%;
				height: 46px;
				padding: 0 15px;
				border: 1px solid #e0e6ed;
				border-radius: 6px;
				font-size: 14px;
				transition: all 0.3s ease;
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);

				&:focus {
					border-color: #1a2980;
					box-shadow: 0 0 0 2px rgba(26, 41, 128, 0.2);
					outline: none;
				}
			}

			.input-tip {
				font-size: 12px;
				color: #f56c6c;
				margin-top: 5px;
				display: flex;
				align-items: center;

				i {
					margin-right: 5px;
				}
			}
		}

		.form-agreement {
			margin: 20px 0;
			font-size: 13px;
			color: #5e6d82;

			:deep(.el-checkbox__label) {
				font-size: 13px;
			}

			.agreement-link {
				color: #1a2980;
				cursor: pointer;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.register-button {
			width: 100%;
			height: 48px;
			background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
			color: white;
			border: none;
			font-size: 16px;
			font-weight: 500;
			border-radius: 6px;
			transition: all 0.3s ease;
			box-shadow: 0 4px 12px rgba(26, 41, 128, 0.2);

			i {
				margin-right: 8px;
			}

			&:hover:not(:disabled) {
				background: linear-gradient(135deg, #0e1a5e 0%, #1db9b7 100%);
				transform: translateY(-2px);
				box-shadow: 0 6px 16px rgba(26, 41, 128, 0.3);
			}

			&:active:not(:disabled) {
				transform: translateY(0);
				box-shadow: 0 2px 8px rgba(26, 41, 128, 0.3);
			}

			&:disabled {
				background: #c0c4cc;
				cursor: not-allowed;
			}
		}

		.login-link {
			margin-top: 20px;
			font-size: 14px;
			color: #5e6d82;
			text-align: center;

			span {
				color: #1a2980;
				cursor: pointer;
				margin-left: 5px;

				&:hover {
					text-decoration: underline;
				}
			}

			i {
				margin-left: 5px;
				color: #1a2980;
			}
		}

		.copyright-notice {
			margin-top: 30px;
			font-size: 12px;
			color: #99a9bf;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			i {
				margin-right: 5px;
			}
		}
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media (max-width: 768px) {
	.register-container {
		padding: 20px;

		.register-main {
			width: 100%;
			padding: 30px 20px;
		}
	}
}
</style>

<route lang="json">
{
"meta": {
"layout": "notFound",
"title": "注册 - 数字图书版权系统",
"requiresAuth": false
}
}
</route>
