<template>
	<el-row>
		<el-col :span="24">
			<div class="module_r">
				<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="login.username"/>
					</div>
					<div class="module_m">
						<div class="module_text">密码</div>
						<input class="module_input" type="password" placeholder="输入密码" v-model="login.password"/>
					</div>

					<div class="module_m">
						<div class="module_code">
							<el-radio-group v-model="login.role" class="ml-4">
								<el-radio label="USER" size="large">普通用户</el-radio>
								<el-radio label="ADMIN" size="large">管理员</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="forgetpwd" @click="router.push('/register')">用户注册</div>
					<el-button class="module_button" @click="onLogin">登录</el-button>
				</div>
			</div>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import {loginAdmin} from '~/api/user/adminUserApi'
const router = useRouter()
const user = userStore()
const login = reactive({
	username: '',
	password: '',
	role: 'USER',
})
const onLogin = () => {
	frontRequest.post("/api/users/login", login).then(response => {
		user.token = response.data.token
		ElMessage.success("登录成功~")
		//获取用户信息
		getUserInfo()
		//跳转位置
		if (login.role === "USER") {
			router.push('/')
		}
		router.push('admin')
	})
}


function getUserInfo() {
	frontRequest.get("/api/userInfo").then(res =>{
		user.userInfo = res.data
	})
}

</script>

<style scoped>
.module_r {
	width: 100%;
	background-size: cover;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Arial', sans-serif;
	background-image: url("eeeab8ba-58af-4da2-a882-2112c680f0c2.jpg");

	.module_mian {
		width: 420px;
		background: #FFFFFF;
		border-radius: 12px;
		padding: 40px 0;
		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, #4e54c8, #8f94fb, #4e54c8);
			background-size: 200% 100%;
			animation: gradient 3s ease infinite;
		}

		.module_title {
			font-size: 24px;
			font-weight: 600;
			text-align: center;
			color: #2c3e50;
			margin-bottom: 8px;
			position: relative;
			display: inline-block;
			left: 50%;
			transform: translateX(-50%);
		}

		.module_title::after {
			content: "";
			position: absolute;
			bottom: -5px;
			left: 0;
			width: 100%;
			height: 2px;
			background: linear-gradient(90deg, transparent, #4e54c8, transparent);
		}

		.module_desc {
			font-size: 14px;
			text-align: center;
			color: #7f8c8d;
			margin-bottom: 30px;
			position: relative;
		}

		.module_desc::before {
			content: "🔗";
			margin-right: 8px;
		}

		.module_desc::after {
			content: "🔒";
			margin-left: 8px;
		}

		.module_m {
			margin: 0 auto;
			width: 80%;
			margin-top: 20px;

			.module_text {
				font-size: 14px;
				color: #34495e;
				margin-bottom: 8px;
				font-weight: 500;
				display: flex;
				align-items: center;
			}

			.module_text::before {
				content: "•";
				color: #4e54c8;
				margin-right: 8px;
				font-weight: bold;
			}

			.module_input {
				width: 96%;
				height: 46px;
				padding-left: 12px;
				padding-right: 12px;
				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);
			}

			.module_input:focus {
				border-color: #4e54c8;
				box-shadow: 0 0 0 2px rgba(78, 84, 200, 0.2);
				outline: none;
			}

			.module_code {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 15px;
				:deep(.el-radio__input.is-checked .el-radio__inner) {
					background: #4e54c8;
					border-color: #4e54c8;
				}

				:deep(.el-radio__input.is-checked+.el-radio__label) {
					color: #4e54c8;
				}
			}
		}
		.forgetpwd {
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #4e54c8;
			margin-top: 15px;
			cursor: pointer;
			text-align: right;
			transition: color 0.2s ease;
		}

		.forgetpwd:hover {
			color: #3a40b0;
			text-decoration: underline;
		}

		.module_button {
			margin: 0 auto;
			display: block;
			width: 80%;
			background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
			color: #FFFFFF;
			height: 48px;
			margin-top: 25px;
			border-radius: 6px;
			font-weight: 500;
			cursor: pointer;
			border: none;
			font-size: 16px;
			transition: all 0.3s ease;
			box-shadow: 0 4px 12px rgba(78, 84, 200, 0.2);
		}

		.module_button:hover {
			background: linear-gradient(135deg, #3a40b0 0%, #6b70e6 100%);
			transform: translateY(-2px);
			box-shadow: 0 6px 16px rgba(78, 84, 200, 0.3);
		}

		.module_button:active {
			transform: translateY(0);
			box-shadow: 0 2px 8px rgba(78, 84, 200, 0.3);
		}
	}
}

/* 区块链动画效果 */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* 响应式调整 */
@media (max-width: 480px) {
	.module_r .module_mian {
		width: 90%;
		padding: 30px 0;
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
