<template>
	<!-- 初始加载状态 -->
	<div v-if="state.isInitializing" class="login-loading-container">
		<div class="login-loading-content">
			<div class="loading-next container-of-loaders">
				<div id="loader3" class="loader-container">

					<div class="loader three"></div>

				</div>

			</div>
			<!-- <div class="login-loading-logo">
				<img :src="siteLogo" alt="" style="width: 60px; height: 60px;">
			</div> -->
			<!-- <div class="login-loading-text">设备借还系统</div> -->
			<div class="login-loading-spinner"></div>
		</div>
	</div>

	<!-- 主要内容 -->
	<div v-else class="login-container flex z-10 justify-end items-center" :class="{ loaded: !state.isInitializing }">
		<div class="login-left" v-if="!siteBg">
			<div class="login-left-logo">
				<!-- <img :src="siteLogo" /> -->
				<div class="login-left-logo-text">
					<!-- <span>{{ "奇才, 只选对的!" }}</span> --><!-- getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle -->
					<!-- <span class="login-left-logo-text-msg" style="margin-top: 5px">{{
						"您的人才战略顾问与首席执行官"
					}}</span> --><!-- getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg -->
				</div>
			</div>
		</div>
		<div class="login-right flex z-10">
			<!-- <div class="login-right-warp-mian-title">客户服务专线：021-8888888</div> -->

			<div class="login-right-warp flex-margin">

				<!--				<span class="login-right-warp-one"></span>-->
				<!--				<span class="login-right-warp-two"></span>-->
				<div class="login-right-warp-mian">

					<div class="flex flex-col items-center justify-center p-8 pt-14">
						<!-- Logo ||'../../../assets/rayLogo.png'-->
						<div class="logo-title">
							<img :src="siteLogo" alt="" style="width: 90px; height: 90px;margin-right: 10px;">
							<span
								style="margin: 20px 0; font-size: 26px;font-weight: 600;letter-spacing: 3px;color: #595959;">设备借还系统</span>
						</div>

						<!-- <div class="text-4xl font-bold text-red-600 mb-12"></div> -->

						<!-- 登录表单区域 -->
						<div class="w-full max-w-sm">
							<div v-if="!state.isScan">
								<!-- <el-tabs v-model="state.tabsActiveName" class="w-full">
									<el-tab-pane :label="$t('message.label.changePwd')" name="changePwd" v-if="userInfos.pwd_change_count === 0">
										<ChangePwd />
									</el-tab-pane>
									<el-tab-pane :label="$t('message.label.one1')" name="account" v-else> -->
								<Account />
								<!-- </el-tab-pane> -->

								<!-- TODO 手机号码登录未接入，展示隐藏 -->
								<!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
										<Mobile />
									</el-tab-pane> -->
								<!-- </el-tabs> -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="login-authorization z-10">
			<!-- 	<p style="font-size: 12px;">©上海敏龙智创科技发展有限公司{{ getSystemConfig['login.copyright'] || '' }}</p> --><!-- ['login.keep_record'] || Copyright ©  -->
			<!-- <p class="la-other" style="margin-top: 5px"> -->

			<a href="https://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020250320141804000014054024-SAIC_SHOW_310000-6b70f287e0d2495697591ebb489adbe0956&signData=MEUCIGXojP0+cGcuBbeXVsraC1SL1GH9NehsKT6NwL/dPcjDAiEAryFp/aqoTmP5Z7seNN9eVQ4Rrvk4SsyT0FnqcL4kxFM="
				target="_blank">
				<!-- <img style="display: inline-block;width: 28px;" src="../../../assets/电子营业执照.png"
					alt=""> --></a>{{ getSystemConfig['login.keep_record'] || '京ICP备2021031018号' }}
			<!-- |
				<a :href="getSystemConfig['login.help_url'] ? getSystemConfig['login.help_url'] : '#'" target="_blank">帮助</a>
				|
				<a :href="getSystemConfig['login.privacy_url'] ? getBaseURL(getSystemConfig['login.privacy_url']) : '#'">隐私</a>
				|
				<a :href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a> -->
			<!-- </p> -->
		</div>
	</div>
	<div v-if="siteBg">
		<img :src="siteBg" class="loginBg fixed inset-0 z-1 w-full h-full" />
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo-mini.svg';
import loginMain from '/@/assets/login-main.svg';
import loginBg from '/@/assets/login_background.jpg';
import { SystemConfigStore } from '/@/stores/systemConfig';
import { getBaseURL } from '/@/utils/baseUrl';
// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/system/login/component/account.vue'));
const Mobile = defineAsyncComponent(() => import('/@/views/system/login/component/mobile.vue'));
const Scan = defineAsyncComponent(() => import('/@/views/system/login/component/scan.vue'));
const ChangePwd = defineAsyncComponent(() => import('/@/views/system/login/component/changePwd.vue'));
import { isEmpty } from 'lodash-es';
import { useUserInfo } from '/@/stores/userInfo';
const { userInfos } = storeToRefs(useUserInfo());

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	tabsActiveName: 'account',
	isScan: false,
	isInitializing: true,
});

watch(
	() => userInfos.value.pwd_change_count,
	(val) => {
		if (val === 0) {
			state.tabsActiveName = 'changePwd';
		} else {
			state.tabsActiveName = 'account';
		}
	},
	{ deep: true, immediate: true }
);

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});

const systemConfigStore = SystemConfigStore();
const { systemConfig } = storeToRefs(systemConfigStore);
const getSystemConfig = computed(() => {
	return systemConfig.value;
});

const siteLogo = computed(() => {
	if (!isEmpty(getSystemConfig.value['login.site_logo'])) {
		return getSystemConfig.value['login.site_logo'];
	}
	return 'http://1.94.168.85:8086/media/files/9/a/9aad06c63ef242ef62622f5f5e35058a.png';
});

const siteBg = computed(() => {
	// 优先使用系统配置，其次使用本地默认背景，确保首屏就有背景
	if (!isEmpty(getSystemConfig.value['login.login_background'])) {
		return getSystemConfig.value['login.login_background'];
	}
	return '';
});

// 页面加载时
onMounted(async () => {
	NextLoading.done();

	// 预加载关键资源
	await Promise.all([
		// 确保logo图片加载完成
		new Promise((resolve) => {
			const img = new Image();
			img.onload = resolve;
			img.onerror = resolve;
			img.src = siteLogo.value;
		}),
		// 确保背景图片加载完成
		siteBg.value ? new Promise((resolve) => {
			const img = new Image();
			img.onload = resolve;
			img.onerror = resolve;
			img.src = siteBg.value;
		}) : Promise.resolve(),
		// 等待一小段时间确保样式完全应用
		new Promise(resolve => setTimeout(resolve, 200))
	]);

	// 显示主要内容
	state.isInitializing = false;
});
</script>

<style scoped lang="scss">
@import '/@/theme/loading.scss';
// 防止样式闪烁的预加载样式
.login-container {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;

	&.loaded {
		opacity: 1;
	}
}

// 初始加载状态样式
.login-loading-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 240, 0.9) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;

	.login-loading-content {
		text-align: center;
		color: white;

		.login-loading-logo {
			margin-bottom: 20px;

			img {
				border-radius: 50%;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			}
		}

		.login-loading-text {
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 30px;
			letter-spacing: 2px;
		}

		.login-loading-spinner {
			width: 40px;
			height: 40px;
			border: 4px solid rgba(255, 255, 255, 0.3);
			border-top: 4px solid white;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto;
		}
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.login-container {
	height: 100%;
	background: var(--el-color-white);

	.login-left {
		flex: 1;
		position: relative;
		background-color: rgba(211, 239, 255, 1);
		margin-right: 100px;

		.login-left-logo {
			display: flex;
			align-items: center;
			position: absolute;
			top: 280px;
			left: 80px;
			z-index: 999;
			animation: logoAnimation 0.3s ease;

			img {
				width: 52px;
				height: 52px;
			}

			.login-left-logo-text {
				display: flex;
				flex-direction: column;

				span {
					margin-left: 10px;
					font-size: 95px;
					font-weight: 100;
					font-family: 'PingFang SC';
					color: #fff; //var(--el-color-primary);
				}

				.login-left-logo-text-msg {
					font-size: 45px;
					color: #fff; //var(--el-color-primary);
				}
			}
		}

		.login-left-img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 52%;

			img {
				width: 100%;
				height: 100%;
				animation: error-num 0.6s ease;
			}
		}

		.login-left-waves {
			position: absolute;
			top: 0;
			right: -100px;
		}
	}

	.login-right {
		width: 700px;
		position: relative;

		.login-right-warp-mian-title {
			position: absolute;
			top: 59px;
			right: 115px;
			font-size: 14px;
			color: #ffffff;
			text-align: right;
			margin-right: 10px;
		}

		.login-right-warp {
			//border: 1px solid var(--el-color-primary-light-3);
			border-radius: 10px;
			width: 450px;
			height: 550px;
			position: relative;
			overflow: hidden;
			//background-color: var(--el-color-white);

			.login-right-warp-one,
			.login-right-warp-two {
				position: absolute;
				display: block;
				width: inherit;
				height: inherit;

				&::before,
				&::after {
					content: '';
					position: absolute;
					z-index: 1;
				}
			}

			.login-right-warp-one {
				&::before {
					filter: hue-rotate(0deg);
					top: 0px;
					left: 0;
					width: 100%;
					height: 3px;
					background: linear-gradient(90deg, transparent, var(--el-color-primary));
					animation: loginLeft 3s linear infinite;
				}

				&::after {
					filter: hue-rotate(60deg);
					top: -100%;
					right: 2px;
					width: 3px;
					height: 100%;
					background: linear-gradient(180deg, transparent, var(--el-color-primary));
					animation: loginTop 3s linear infinite;
					animation-delay: 0.7s;
				}
			}

			.login-right-warp-two {
				&::before {
					filter: hue-rotate(120deg);
					bottom: 2px;
					right: -100%;
					width: 100%;
					height: 3px;
					background: linear-gradient(270deg, transparent, var(--el-color-primary));
					animation: loginRight 3s linear infinite;
					animation-delay: 1.4s;
				}

				&::after {
					filter: hue-rotate(300deg);
					bottom: -100%;
					left: 0px;
					width: 3px;
					height: 100%;
					background: linear-gradient(360deg, transparent, var(--el-color-primary));
					animation: loginBottom 3s linear infinite;
					animation-delay: 2.1s;
				}
			}

			.login-right-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;
				background: #fff;

				.login-right-warp-main-title {
					height: 130px;
					line-height: 130px;
					font-size: 32px;
					font-weight: 600;
					text-align: center;
					letter-spacing: 3px;
					animation: logoAnimation 0.3s ease;
					animation-delay: 0.3s;
					color: var(--el-text-color-primary);
				}

				.logo-title {
					width: 71%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;
				}

				.login-right-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;

					.login-content-main-sacn {
						position: absolute;
						top: 2px;
						right: 12px;
						width: 50px;
						height: 50px;
						overflow: hidden;
						cursor: pointer;
						transition: all ease 0.3s;
						color: var(--el-color-primary);

						&-delta {
							position: absolute;
							width: 35px;
							height: 70px;
							z-index: 2;
							top: 2px;
							right: 21px;
							background: var(--el-color-white);
							transform: rotate(-45deg);
						}

						&:hover {
							opacity: 1;
							transition: all ease 0.3s;
							color: var(--el-color-primary) !important;
						}

						i {
							width: 47px;
							height: 50px;
							display: inline-block;
							font-size: 48px;
							position: absolute;
							right: 1px;
							top: 0px;
						}
					}
				}
			}
		}
	}

	.login-authorization {
		position: absolute;
		bottom: 30px;
		left: 80px;
		right: 0;
		text-align: center;
		color: #d9d9d9;
		font-size: 16px;
		p {
			font-size: 14px;
			color: #d9d9d9;
		}

		a {
			color: var(--el-color-primary);
			/* margin: 0 5px; */
		}
	}
}
</style>
