<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="state.role" class="ml-4">
								<el-radio :label=false size="large">普通用户</el-radio>
								<el-radio :label=true 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 state = reactive({
	role: false,

	loginFrom: {},

})
const login = reactive({
	username: '',
	password: '',
})
const onLogin = () => {
	if (state.role) {
		loginAdmin(login).then(response => {
			userStore().adminIsLogin = true
			userStore().adminToken = response.data.token
			adminRequest.get("/sys/user/info").then(response => {
				userStore().adminUserInfo = response.data
				router.push('/admin')
				ElMessage.success("登录成功~")
			})
		})
	} else {
		frontRequest.post("/api/user/login", login).then(response =>{
			const user = userStore()
			user.frontToken = response.data.token
			user.frontIsLogin = true
			ElMessage.success("登录成功~")
			router.push('/')
		})
	}
}

</script>
<style scoped>
.module_r {
	width: 100%;
	background: url("/ec13203e-20ee-4bb3-ba23-f0b6f93d3760.jpg");
	background-size: 100% 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;  /* 水平和垂直居中 */

	.module_mian {
		width: 400px;  /* 设置固定宽度 */
		max-width: 100%; /* 防止响应式调整时超出屏幕 */
		background: #FFFFFF;
		border-radius: 8px;
		padding-top: 40px;
		padding-bottom: 40px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */

		.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;
					cursor: pointer;
				}
			}
		}

		.module_radio input {
			margin-right: 5px;
		}

		.forgetpwd {
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #328d86;
			margin-top: 10px;
			cursor: pointer;
		}

		.module_button {
			margin: 0 auto;
			display: block;
			width: 80%;
			background: #328d86;
			color: #FFFFFF;
			height: 40px;
			margin-top: 20px;
			border-radius: 5px;
			font-weight: 500;
			cursor: pointer;
		}

		.module_button:active {
			opacity: 0.4;
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
