<template>
	<div class="login-container w100 h100">
		<div class="login-content">
			<div class="login-content-main">
				<h4 class="login-content-title">修改密码</h4>
				<div v-if="!state.isScan">
					<el-tabs v-model="state.tabsActiveName">
						<forget-pwd />
					</el-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

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

// 引入组件
const ForgetPwd = defineAsyncComponent(() => import('/@/views/forgetPwd/component/Forget-password.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')})`;
// 页面加载时
onMounted(async () => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	position: relative;
	background-image: v-bind(bgImg);
	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>
