<template>
	<div class="login-container">
		<div class="login-header">
			<img :src="imgSrc" alt="" />
			<el-button type="primary" @click="backToLogin">返回登录</el-button>
		</div>
		<el-card class="login-content">
			<div class="login-content-main">
				<p class="login-content-title">修改密码</p>
				<reset-pwd />
			</div>
		</el-card>
		<LayoutFooter v-if="isFooter" class="changePwd-footer" />
	</div>
</template>

<script setup lang="ts" name="resetPwd">
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { NextLoading } from '@/utils/loading';
import { Cookie, Local, Session } from '@/utils/storage';
import { useRouter } from 'vue-router';

// 引入组件
const ResetPwd = defineAsyncComponent(() => import('@/views/resetPwd/components/Reset-password.vue'));
const LayoutFooter = defineAsyncComponent(() => import('@/layout/footer/index.vue'));
// 定义变量
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const imgSrc = ref('');
imgSrc.value = themeConfig.value.changPwdImage;
const router = useRouter();
const backToLogin = () => {
	Session.clear();
	Cookie.clear();
	Local.clear();
	router.push('/');
};
// 设置 footer 显示/隐藏
const isFooter = computed(() => {
	return themeConfig.value.isFooter;
});

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

<style scoped lang="scss">
.changePwd-footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 10;
	&-warp {
		margin: auto;
		text-align: center;
		animation: error-num 0.3s ease;
	}
}
.login-container {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: var(--hotline-bg-color);

	.login-header {
		width: 100%;
		height: 60px;
		background-color: var(--el-color-primary);
		box-shadow: 0 21px 38px 0 rgba(0, 31, 255, 0.14);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30px;
	}

	.login-content {
		border-radius: 12px;
		padding: 20px 30px;
		position: absolute;
		left: calc(50% - 300px);
		top: 50%;
		transform: translateY(-50%) translate3d(0, 0, 0);
		background-color: var(--el-color-white);
		overflow: hidden;
		z-index: 1;
		.login-content-main {
			margin: 0 auto;

			.login-content-title {
				color: var(--hotline-color-text-main);
				border-left: 5px solid var(--el-color-primary);
				font-size: 18px;
				letter-spacing: 4px;
				padding-left: 5px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
		}
	}
}
</style>
