<template>
	<div class="login-container flex">

		<div class="top">
			<el-image :src="login_logo" class="top_logo"></el-image>
		</div>
		<el-image :src="bk_login" class="bk"></el-image>

		<div class="login-right flex">
			<div class="login-right-warp flex-margin">
				<div class="login-right-warp-mian">
					<div class="login-right-warp-main-title">欢迎登录</div>
					<div class="login-right-warp-main-form">
						<Account />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { ref, defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';

import bk_login from '/@/assets/bk_login.png';
import login_logo from '/@/assets/login_logo.png';
const width = ref(window.innerWidth)
// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));

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

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


// 工具函数：判断是否为移动设备（基于屏幕宽度）
const isMobileByWidth = (): boolean => {
	if (typeof window === 'undefined') {
		return false; // 非浏览器环境
	}
	// 通常以 768px 作为移动设备的宽度阈值
	return window.innerWidth < 768;
};

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

	console.log("🚀 ~ window.innerWidth:", window.innerWidth)
});
</script>

<style scoped lang="scss">
.login_bg {
	position: fixed;
	top: 0;
	left: 0;
}

.bk {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

.top {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 56px;
	background-color: white;
	z-index: 999;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;

	.top_logo {
		width: 146px;
		height: 34px;
	}
}

.login-container {
	height: 100%;
	// background: var(--el-color-white);
	// background: url('/@/assets/bk_login.png');

	.login-left {
		width: 70vw;
		position: relative;

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

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

				span {
					margin-left: 10px;
					font-size: 28px;
					color: #26a59a;
				}

				.login-left-logo-text-msg {
					font-size: 12px;
					color: #32a99e;
				}
			}
		}

		.login-left-img {
			// transform: translate(-50%, -50%);
			width: 100%;
			height: 100vh;
			box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1);

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

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

	.login-right {
		width: 506px;
		z-index: 100;
		position: fixed;
		left: 50%;

		top: 50%;
		transform: translate(-50%, -50%);

		.login-right-warp {
			// border: 1px solid var(--el-color-primary-light-3);
			border: 1px solid #f5f5f5;
			border-radius: 10px;
			width: 100%;
			position: relative;
			overflow: hidden;
			background-color: var(--el-color-white);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

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

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

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

					.login-content-main-sacn {
						position: absolute;
						top: 0;
						right: 0;
						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;
						}
					}
				}
			}
		}
	}
}
</style>
