<template>
	<el-row>
		<el-col :span="24">
			<div class="login-container">
				<div class="login-main">
					<div class="login-title">数字图书版权系统</div>
					<div class="login-subtitle">基于区块链技术的图书版权保护平台</div>

					<div class="login-form">
						<div class="form-item">
							<div class="form-label">
								<i class="el-icon-user"></i> 用户名
							</div>
							<input class="form-input" type="text"
										 placeholder="请输入注册邮箱或用户名"
										 v-model="login.username" />
						</div>

						<div class="form-item">
							<div class="form-label">
								<i class="el-icon-lock"></i> 密码
							</div>
							<input class="form-input" type="password"
										 placeholder="请输入密码"
										 v-model="login.password" />
						</div>

						<div class="form-item">
							<div class="role-selector">
								<el-radio-group v-model="state.role" class="ml-4">
									<el-radio :label="false" size="large">
										<i class="el-icon-notebook-2"></i> 作者/读者
									</el-radio>
									<el-radio :label="true" size="large">
										<i class="el-icon-s-custom"></i> 版权管理员
									</el-radio>
								</el-radio-group>
							</div>
						</div>

						<div class="login-footer">
              <span class="register-link" @click="router.push('/register')">
                <i class="el-icon-edit"></i> 注册新账户
              </span>
<!--							<span class="forget-link" @click="router.push('/forget')">-->
<!--                <i class="el-icon-question"></i> 忘记密码?-->
<!--              </span>-->
						</div>

						<el-button class="login-button" :loading="state.loading" @click="onLogin">
							<i class="el-icon-connection"></i> 区块链登录验证
						</el-button>
					</div>

					<div class="copyright-notice">
						<i class="el-icon-warning-outline"></i> 所有图书版权信息将上链存证，不可篡改
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

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

const router = useRouter()
const state = reactive({
	role: false,
	loading: false
})

const login = reactive({
	username: '',
	password: '',
})

const onLogin = () => {
	state.loading = true
	if (state.role) {
		loginAdmin(login).then(response => {
			state.loading = false
			userStore().adminToken = response.data.token
			adminRequest.get("/sys/user/info").then(response => {
				userStore().adminUserInfo = response.data
				router.push('/admin')
				ElMessage.success("管理员登录成功")
			})
		}).catch(() => {
			state.loading = false
		})
	} else {
		frontRequest.post("/api/user/login", login).then(response => {
			const user = userStore()
			user.frontToken = response.data.token
			user.frontIsLogin = true
			ElMessage.success("用户登录成功")
			router.push('/')
		}).catch(() => {
			state.loading = false
		})
	}
}
</script>

<style scoped lang="scss">
.login-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%);

	.login-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;
		}

		.login-title {
			font-size: 26px;
			font-weight: 600;
			text-align: center;
			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;
			}
		}

		.login-subtitle {
			font-size: 14px;
			text-align: center;
			color: #5e6d82;
			margin-bottom: 30px;
			position: relative;

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

			&::after {
				content: "⛓️";
				margin-left: 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;
				}
			}
		}

		.role-selector {
			margin-top: 20px;

			:deep(.el-radio-group) {
				display: flex;
				justify-content: space-around;
				width: 100%;
			}

			:deep(.el-radio) {
				--el-radio-input-border-color-hover: #1a2980;

				.el-radio__label {
					display: flex;
					align-items: center;

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

			:deep(.el-radio__input.is-checked .el-radio__inner) {
				background: #1a2980;
				border-color: #1a2980;
			}

			:deep(.el-radio__input.is-checked+.el-radio__label) {
				color: #1a2980;
			}
		}

		.login-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 15px;
			font-size: 13px;

			.register-link, .forget-link {
				color: #5e6d82;
				cursor: pointer;
				transition: color 0.2s ease;
				display: flex;
				align-items: center;

				i {
					margin-right: 5px;
				}

				&:hover {
					color: #1a2980;
				}
			}
		}

		.login-button {
			width: 100%;
			height: 48px;
			margin-top: 25px;
			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 {
				background: linear-gradient(135deg, #0e1a5e 0%, #1db9b7 100%);
				transform: translateY(-2px);
				box-shadow: 0 6px 16px rgba(26, 41, 128, 0.3);
			}

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

		.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;
			}
		}
	}
}

</style>

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