<template>
	<div class="music-register-container">
		<div class="music-register-card">
			<div class="music-register-header">
				<h2 class="music-title">网易云音乐用户行为分析系统</h2>
				<p class="music-subtitle">基于大数据技术的音乐行为研究</p>
			</div>
			<div class="music-form">
				<div class="music-form-item">
					<label class="music-label">用户名</label>
					<input
						class="music-input"
						type="text"
						placeholder="请输入用户名"
						v-model="register.username"
					>
				</div>

				<div class="music-form-item">
					<label class="music-label">密码</label>
					<input
						class="music-input"
						type="password"
						placeholder="至少8位字符，包含大小写字母和数字"
						v-model="register.password"
						@keyup.enter="onRegister"
					>
				</div>
				<div class="music-form-item">
					<label class="music-label">确认密码</label>
					<input
						class="music-input"
						type="password"
						placeholder="请再次输入密码"
						v-model="register.confirmPassword"
						@keyup.enter="onRegister"
					>
				</div>

				<button class="music-register-btn" @click="onRegister">
					<span v-if="!loading">注 册</span>
					<el-icon v-else class="is-loading"><Loading /></el-icon>
				</button>

				<div class="music-agreement">
					<el-checkbox v-model="register.agreed">
						我已阅读并同意<a href="#" @click.prevent>《用户协议》</a>和<a href="#" @click.prevent>《隐私政策》</a>
					</el-checkbox>
				</div>

				<div class="music-footer">
					<span @click="router.push('/login')">已有账号？立即登录</span>
				</div>
			</div>
		</div>
		<div class="music-register-banner">
			<h3>音乐用户行为分析平台</h3>
			<p>千万级用户听歌数据分析 · 行为模式挖掘 · 个性化推荐研究</p>
			<ul class="music-features">
				<li><i class="el-icon-headset"></i> 分析超过1亿条用户听歌记录</li>
				<li><i class="el-icon-data-line"></i> 挖掘用户音乐偏好与行为模式</li>
				<li><i class="el-icon-magic-stick"></i> 研究个性化推荐算法效果</li>
				<li><i class="el-icon-trend-charts"></i> 实时监测音乐市场趋势</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import { adminRequest } from '~/composables/adminRequest'

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

const register = reactive({
	username: '',
	email: '',
	password: '',
	confirmPassword: '',
	agreed: false
})

const validateForm = () => {
	if (!register.username) {
		ElMessage.error("请输入用户名")
		return false
	}


	if (!register.password) {
		ElMessage.error("请输入密码")
		return false
	}
	if (register.password.length < 5) {
		ElMessage.error("密码长度不能少于8位")
		return false
	}

	if (register.password !== register.confirmPassword) {
		ElMessage.error("两次输入的密码不一致")
		return false
	}
	if (!register.agreed) {
		ElMessage.error("请先同意用户协议和隐私政策")
		return false
	}
	return true
}

const onRegister = async () => {
	if (!validateForm()) return

	loading.value = true
	try {
		await adminRequest.post("/api/register", register)
		ElMessage.success("注册成功")
		router.push("/login")
	} catch (error) {
		ElMessage.error(error.response?.data?.message || "注册失败")
	} finally {
		loading.value = false
	}
}
</script>

<style scoped>
.music-register-container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg, #d83c3c, #b62b2b);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.music-register-card {
	width: 450px;
	background: #FFF;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	padding: 40px;
	z-index: 1;
	animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.music-register-header {
	text-align: center;
	margin-bottom: 32px;
}

.music-title {
	font-size: 24px;
	color: #d83c3c;
	font-weight: 600;
	margin-bottom: 8px;
}

.music-subtitle {
	color: #666;
	font-size: 14px;
	letter-spacing: 1px;
}

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

.music-label {
	display: block;
	color: #333;
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 500;
}

.music-input {
	width: 100%;
	height: 48px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 0 16px;
	font-size: 14px;
	transition: all 0.3s;
}

.music-input:focus {
	border-color: #d83c3c;
	box-shadow: 0 0 0 2px rgba(216,60,60,0.1);
}

.music-register-btn {
	width: 100%;
	height: 48px;
	background: #d83c3c;
	color: #fff;
	font-size: 16px;
	border-radius: 4px;
	margin-top: 10px;
	transition: all 0.3s;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.music-register-btn:hover {
	background: #b62b2b;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(216,60,60,0.3);
}

.music-agreement {
	margin-top: 15px;
	font-size: 12px;
	color: #666;
}

.music-agreement a {
	color: #d83c3c;
	margin: 0 3px;
	text-decoration: none;
}

.music-agreement a:hover {
	text-decoration: underline;
}

.music-footer {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
	color: #d83c3c;
	cursor: pointer;
}

.music-footer span:hover {
	text-decoration: underline;
}

.music-register-banner {
	position: absolute;
	right: 10%;
	color: white;
	max-width: 400px;
	animation: slideIn 0.8s ease;
}

@keyframes slideIn {
	from { opacity: 0; transform: translateX(50px); }
	to { opacity: 1; transform: translateX(0); }
}

.music-register-banner h3 {
	font-size: 28px;
	margin-bottom: 15px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.music-register-banner p {
	font-size: 16px;
	opacity: 0.9;
	margin-bottom: 20px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.music-features {
	list-style: none;
	padding-left: 0;
}

.music-features li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 12px;
	font-size: 15px;
	display: flex;
	align-items: center;
}

.music-features li i {
	margin-right: 8px;
	color: #ffcc00;
	font-size: 18px;
}

@media (max-width: 992px) {
	.music-register-banner {
		display: none;
	}
	.music-register-card {
		width: 90%;
		max-width: 450px;
	}
}
</style>

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