<template>
	<div class="login-container w100 h100">
		<div class="login-content">
			<div class="login-content-main">
				<h4 class="login-content-title">{{ getThemeConfig.globalViceTitle }}</h4>
				<div v-if="!state.isScan">
					<el-tabs v-model="state.tabsActiveName">
						<!-- <el-tab-pane label="账号密码登录" name="account"> -->
						<account />
						<!-- </el-tab-pane> -->
						<!-- <el-tab-pane label="手机号登录" name="mobile">
							<Mobile />
						</el-tab-pane> -->
					</el-tabs>
				</div>
				<!-- <Scan v-if="isScan" />
				<div class="login-content-main-scan" @click="isScan = !isScan">
					<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
					<div class="login-content-main-scan-delta"></div>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, reactive, onMounted, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import { Local } from '/@/utils/storage';
import Watermark from '/@/utils/watermark';
import { getImageUrl } from '/@/utils/tools';
// 定义接口来定义对象的类型
interface LoginState {
	tabsActiveName: string;
	isScan: boolean;
}

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/Account.vue'));
// const Mobile = defineAsyncComponent(() => import('/@/views/login/component/Mobile.vue'));
// const Scan = defineAsyncComponent(() => import('/@/views/login/component/Scan.vue'));

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<LoginState>({
	tabsActiveName: 'account',  // 默认显示账号密码登录
	isScan: false,  // 是否显示扫码登录
});
let bgImg = themeConfig.value.loginImage ?? `url(${getImageUrl('login/bg.png')})`;
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 页面加载时
onMounted(async () => {
	NextLoading.done();
	Watermark.del(); // 清除水印
	themeConfig.value.isWatermark = false;
	themeConfig.value.watermarkText = '';
	Local.set('themeConfig', themeConfig.value);
});
</script>

<style scoped lang="scss">
.login-container {
	position: relative;
	background-image: v-bind(bgImg);
	// background-image: url("/@/assets/images/login/bg.png");
	background-repeat: no-repeat;
	background-size: calc(100vw + 1px) calc(100vh + 1px);

	.login-content {
		width: 500px;
		padding: 83px 80px 60px 80px;
		position: absolute;
		right: 10vw;
		top: 50vh;
		transform: translateY(-50%) translate3d(0, 0, 0);
		background-color: var(--el-color-white);
		border-radius: 20px;
		overflow: hidden;
		z-index: 1;
		box-shadow: 0 0 20px 0 rgba(26, 64, 144, 0.46);

		.login-content-main {
			margin: 0 auto;

			.login-content-title {
				color: var(--el-color-primary);
				font-size: 28px;
				font-weight: 500;
				line-height: 48px;
				text-align: center;
				letter-spacing: 4px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
		}

		.login-content-main-scan {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			overflow: hidden;
			cursor: pointer;
			transition: all ease 0.3s;
			color: var(--el-text-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: 2px;
				top: -1px;
			}
		}
	}
}
</style>
