<template>
<div class="page-content" >

	<!-- 装饰线 -->
	<div class="decor-line top"></div>
	<div class="decor-line bottom"></div>

	<div class="page-main-container">
		<!-- 一号标题：队伍名称 -->

		<!-- <h1 class="team-title">中国人民解放军61255部队</h1> -->

		<!-- 二号标题：系统名称 -->
		<h1 class="system-title">仓储管理系统</h1>

		<!-- 登录表单 -->
		<el-form class="login-form" id="loginForm" :model="loginForm" ref="loginRef" :rules="loginRules">
			<div class="form-divider"></div>

			<!-- 用户名输入 -->
			<el-form-item prop="username">
				<div class="form-group w-full">
					<label class="form-label" for="username">用户名</label>
					<div class="input-wrap">
						<el-icon class="input-icon"><User /></el-icon>
						<input type="text" id="username" v-model="loginForm.username" class="form-input" placeholder="" required>
					</div>
				</div>
			</el-form-item>

			<!-- 密码输入 -->
			<el-form-item prop="password">
				<div class="form-group w-full">
					<label class="form-label" for="password">密码</label>
					<div class="input-wrap">
						<el-icon class="input-icon"><Lock /></el-icon>
						<input type="password" id="password" v-model="loginForm.password" class="form-input" placeholder="" required>
					</div>
				</div>
			</el-form-item>

			<el-form-item prop="code" v-if="captchaEnabled">
				<div class="flex gap-4 mb-6 items-center">
					<input type="text" id="code" v-model="loginForm.code" placeholder="请输入验证码" class="form-input" required style="padding-left: 0.78vw;" >
					<img :src="codeUrl" style="width: 5.91vw;height: 4.44vh;" class=" rounded cursor-pointer object-cover" @click="getCode" alt="验证码" />
				</div>
			</el-form-item>

			<!-- 登录按钮 -->
			<el-form-item>
				<button type="button" class="login-btn" :disabled="loading" @click.prevent="handleLogin">
					<span v-if="!loading">登录系统</span>
					<span v-else>登 录 中...</span>
				</button>
			</el-form-item>
		
		</el-form>

		<!-- 底部口号+队徽：间距缩小，图标无白圈 -->
		<div class="slogan-container">
			<p class="slogan-text">忠诚尚武</p>
			<img src="@/assets/logo/logo.png" alt="中国人民解放军61255部队队徽" class="team-logo">
			<p class="slogan-text">精飞向战</p>
		</div>
	</div>
	
	<!-- <div class="bg-[green] h-full">
		<div class="login-page-content h-full bg-[white]">
			<div class="title-1 text-center">
				中国人民解放军61255部队
			</div>
			<div class="title-2 text-center">
				人车管理系统
			</div>
			<div>
				<el-form :model="loginForm" ref="loginRef" :rules="loginRules">
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" class="!rounded-button" />
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
									class="!rounded-button" show-password />
					</el-form-item>
					<el-button type="primary" :loading="loading"
								class="w-full !h-[48px] !text-lg !rounded-button !font-medium shadow-lg shadow-blue-500/30"
								@click.prevent="handleLogin">
						<span v-if="!loading">登 录</span>
						<span v-else>登 录 中...</span>
					</el-button>
				</el-form>
			</div>
		</div>
	</div> -->
</div>
</template>
<script setup>
import {computed, onMounted, reactive, ref, watch, getCurrentInstance} from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
// import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import { useRoute, useRouter } from "vue-router";
// import {SystemSettingKey} from "@/utils/dictData";
// import LoginTitle1 from "@/assets/images/login-title-1.png";
// import LoginTitle2 from "@/assets/images/login-title-2.png";
// import { useDeviceInit } from "@/core/deviceInit";

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const brandImageUrl = 'https://ai-public.mastergo.com/ai/img_res/1c377b0a2585f0eb1ac4a4fcfac52c50.jpg';
const verifyCodeUrl = 'https://ai-public.mastergo.com/ai/img_res/fa89392ac68ec8463b64a89a8667508d.jpg';
const formRef = ref();

const loginForm = ref({
	username: "",
	password: "",
	rememberMe: false,
	code: "",
	uuid: ""
});

const title1ImageUrl = '';
const title2ImageUrl = '';

const loginTitleImage1 = computed(() => {
	return title1ImageUrl || brandImageUrl;
});
const loginTitleImage2 = computed(() => {
	return title2ImageUrl || verifyCodeUrl;
});

const loginRules = {
	username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
	password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
	code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};
const codeUrl = ref("");
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);

watch(route, (newRoute) => {
	redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

function handleLogin() {
	proxy.$refs.loginRef.validate(valid => {
		if (valid) {
			loading.value = true;
			// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
			if (loginForm.value.rememberMe) {
				Cookies.set("username", loginForm.value.username, { expires: 30 });
				Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
				Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
			} else {
				// 否则移除
				Cookies.remove("username");
				Cookies.remove("password");
				Cookies.remove("rememberMe");
			}
			// 调用action的登录方法
			userStore.login(loginForm.value).then(() => {
				const query = route.query;
				const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
					if (cur !== "redirect") {
						acc[cur] = query[cur];
					}
					return acc;
				}, {});
				router.push({ path: redirect.value || "/", query: otherQueryParams });
				setTimeout(() => {
					if (
						(userStore.userInfo && userStore.userInfo.admin) ||
						loginForm.value.username === "admin"
					) {
						useDeviceInit();
					}
				}, 1000)
			}).catch(() => {
				loading.value = false;
				// 重新获取验证码
				if (captchaEnabled.value) {
					getCode();
				}
			});
		}
	});
}

function getCode() {
	getCodeImg().then(res => {
		captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
		if (captchaEnabled.value) {
			codeUrl.value = "data:image/gif;base64," + res.img;
			loginForm.value.uuid = res.uuid;
		}
	});
}

function getCookie() {
	const username = Cookies.get("username");
	const password = Cookies.get("password");
	const rememberMe = Cookies.get("rememberMe");
	loginForm.value = {
		username: username === undefined ? loginForm.value.username : username,
		password: password === undefined ? loginForm.value.password : decrypt(password),
		rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
	};
}

getCode();
getCookie();

//添加回车事件
document.addEventListener("keydown", function(event) {
	if (event.key === "Enter") {
		handleLogin();
	}
})

setTimeout(() => {
	const togglePwd = document.getElementById('togglePwd');
	const passwordInput = document.getElementById('password');

	togglePwd.addEventListener('click', () => {
				const isPwd = passwordInput.getAttribute('type') === 'password';
				passwordInput.setAttribute('type', isPwd ? 'text' : 'password');
				// 切换Element Plus图标
				const iconElement = togglePwd.querySelector('.el-icon');
				if (isPwd) {
					iconElement.innerHTML = '<eye></eye>';
				} else {
					iconElement.innerHTML = '<eye-off></eye-off>';
				}
			});

	createBgDots();
})

// 3. 动态生成背景点（增强背景层次）
function createBgDots() {
	const body = document.body;
	const dotCount = 20; // 背景点数量
	
	for (let i = 0; i < dotCount; i++) {
		const dot = document.createElement('div');
		const size = Math.random() * 100 + 50; // 点大小：50-150px
		const posX = Math.random() * 100; // X轴位置（百分比）
		const posY = Math.random() * 100; // Y轴位置（百分比）
		
		// 设置背景点样式
		dot.classList.add('bg-dot');
		dot.style.width = `${size}px`;
		dot.style.height = `${size}px`;
		dot.style.top = `${posY}%`;
		dot.style.left = `${posX}%`;
		dot.style.position = "absolute";
		dot.style.borderRadius = "50%";
		dot.style.background = "rgba(0, 84, 39, 0.05)";
		dot.style.pointerEvents = "none";
		dot.style.zIndex = 0;
		
		document.querySelector('.page-content').appendChild(dot);
	}
}
// 页面加载完成后生成背景点
// window.addEventListener('load', createBgDots);

</script>
<style scoped lang="scss">

//  1:20.3  width
// 1:11.24 height

.page-content {
	/* 保留 #c8c8c8 基础色调的渐变 */
	background: linear-gradient(135deg, #c8c8c8, #e5e5e5, rgba(176, 176, 176, 0.3));
	background-image: radial-gradient(rgb(1 58 38 / 20%) 2px, #7e7e7e3b 2px), radial-gradient(rgb(0 84 39 / 20%) 2px, transparent 2px);
	background-size: 2vw 3.58vh;
	background-position: 0 0, 20px 20px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1vw 1.9vh;
	color: #333;
	position: relative;
	overflow: hidden;
	--main-text-color: #06803f;
}

/* 顶部/底部装饰线 */
.decor-line {
	position: absolute;
	width: 80%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 84, 39, 0.2), transparent);
}
.decor-line.top { top: 1.6vh; }
.decor-line.bottom { bottom: 1.6vh; }

/* 主容器：控制整体宽度和居中 */
.page-main-container {
	width: 100%;
	max-width: 37.83vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 10;
}

.title-image {
	img {
		height: 4.8vh;
		object-fit: contain;
    	width: auto;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: -moz-crisp-edges;
		image-rendering: -moz-crisp-edges;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: bicubic;
	}
}

/* 标题样式：一号标题（队伍名）、二号标题（系统名） */
.team-title {
	font-size: clamp(2rem, 6vw, 2.8rem);
	font-weight: 700;
	color: var(--main-text-color); /* 指定文字色 */
	margin-bottom: 8px;
	text-align: center;
	letter-spacing: -0.5px;
	font-family: 方正小标宋简体;
	font-size: 48px;
}
.system-title {
	// font-size: clamp(1.1rem, 3vw, 1.4rem);
	// color: rgba(0, 84, 39, 0.8); /* 主色透明变体 */
	color: var(--main-text-color);
	margin-top: 5px;
	margin-bottom: 3.58vh;
	text-align: center;
	// text-wrap: balance;
	font-size: 48px;
    font-weight: bold;
	font-family: 方正小标宋简体;
}

/* 登录表单样式 */
.login-form {
	width: 100%;
	max-width: 26.6vw;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	border-radius: 0.39vw;
	// box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: 1.47vw 5.33vh;
	margin-bottom: 3.58vh;
	// transition: all 0.3s ease;
}
.login-form:hover {
	// box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	// transform: translateY(-4px);
}

/* 表单内装饰线 */
.form-divider {
	width: 3.15vw;
	height: 0.35vh;
	background: rgba(0, 84, 39, 0.3);
	border-radius: 2px;
	margin: 0 auto 2.13vh;
}

/* 表单组：用户名/密码输入区域 */
.form-group {
	// margin-bottom: 22px;
}
.form-label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #4b5563;
	// margin-bottom: 6px;
}
.input-wrap {
	position: relative;
}
.form-input {
	width: 100%;
	padding: 0.59vw 0.78vw 0.59vw 2.16vw; /* 左侧留图标空间 */
	border: 1px solid #d1d5db;
	border-radius: 0.39vw;
	font-size: 0.78vw;
	height: 5.12vh;
	// transition: all 0.2s ease;
}
.form-input:focus {
	outline: none;
	border-color: var(--main-text-color);
	// box-shadow: 0 0 0 2px rgba(0, 84, 39, 0.2);
}
.form-input::placeholder {
	color: #9ca3af;
}

/* 表单图标：使用 Font Awesome */
.input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #6b7280;
	font-size: 0.88vw;
}
.eye-icon {
	left: auto;
	right: 16px;
	cursor: pointer;
	transition: color 0.2s ease;
}
.eye-icon:hover {
	color: var(--main-text-color);
}

/* 表单选项：记住我 + 忘记密码 */
.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2.31vh;
	font-size: 14px;
}
.remember-wrap {
	display: flex;
	align-items: center;
	gap: 0.39vw;
}
.form-checkbox {
	width: 0.78vw;
	height: 0.78vw;
	accent-color: var(--main-text-color); /* 复选框主色 */
	cursor: pointer;
}
.forgot-link {
	color: var(--main-text-color);
	text-decoration: none;
	transition: color 0.2s ease;
}
.forgot-link:hover {
	color: rgba(0, 84, 39, 0.8);
}

/* 登录按钮 */
.login-btn {
	width: 100%;
	padding: 0.64vw;
	background: var(--main-text-color);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.78vw;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}
.login-btn:hover {
	background: var(--main-text-color); /* 按钮hover深色变体 */
	box-shadow: 0 4px 12px rgba(0, 84, 39, 0.3);
	transform: translateY(-2px);
}
.login-btn:active {
	transform: translateY(0);
}

/* 注册提示 */
.register-tip {
	margin-top: 22px;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}
.register-link {
	color: var(--main-text-color);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}
.register-link:hover {
	color: rgba(0, 84, 39, 0.8);
}

/* 底部口号区域：优化间距，图标无白圈 */
.slogan-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px; /* 缩小口号与图标的间距（关键调整） */
	margin-top: 10px;
	padding: 0 16px;
}
.slogan-text {
	font-size: 2.2vw;
	font-weight: 700;
	color: var(--main-text-color);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	transition: transform 0.2s ease;
}
.slogan-text:hover {
	// transform: scale(1.05);
}

/* 队徽：无白圈，仅圆形图片+阴影 */
.team-logo {
	width: 70px;
	// height: 100px;
	border-radius: 50%; /* 圆形图标 */
	object-fit: cover; /* 保持图片比例 */
	// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 轻微阴影增强层次 */
	transition: all 0.3s ease;
	margin: 0 1.47vh;
}
.team-logo:hover {
	// box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	// transform: scale(1.1);
}

/* 动态背景点：增强背景质感 */
.bg-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 84, 39, 0.05);
	pointer-events: none;
	z-index: 0;
}

:deep(.el-input__wrapper) {
	border-radius: 0.39vw;
	padding: 0.59vw 0.78vw;
	background-color: #f8fafc;
	box-shadow: none;
	border: 1px solid #e2e8f0;
}

:deep(.el-input__wrapper:hover) {
	border-color: #94a3b8;
}

:deep(.el-input__inner) {
	height: 1.18vw;
	font-size: 0.73vw;
}

:deep(.el-input__prefix-icon) {
	font-size: 0.88vw;
	color: #64748b;
}

:deep(.el-checkbox__label) {
	color: #64748b;
	font-size: 0.68vw;
}

:deep(.el-button--primary) {
	background: linear-gradient(to right, #2563eb, #3b82f6);
	border: none;
	font-weight: 500;
}

:deep(.el-button--primary:hover) {
	background: linear-gradient(to right, #1d4ed8, #2563eb);
}

:deep(.el-form-item) {
	margin-bottom: 1.18vw;
}


.text-image {
	// width: 1200px;
	height: 4.44vh;
	background-image: url("@/assets/images/login-title-1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

</style>
