<template>
	<div class="login-container">
		<div class="login-header">
			<img :src="getImageUrl('login/changePwd_header.png')" alt="" />
			<el-button type="primary" @click="backToLogin">返回登录</el-button>
		</div>
		<div class="login-content">
			<div class="login-content-main">
				<p class="login-content-title">修改密码</p>
				<reset-pwd />
			</div>
		</div>
	</div>
</template>

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

// 引入组件
const ResetPwd = defineAsyncComponent(() => import('/@/views/resetPwd/component/Reset-password.vue'));

// 定义变量
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const router = useRouter();
const backToLogin = () => {
	Session.clear();
  Cookie.clear();
	Local.clear();
	router.push('/');
};
// 页面加载时
onMounted(() => {
	NextLoading.done();
	Watermark.del(); // 清除水印
  // storesThemeConfig.setThemeConfig({
  //   ...themeConfig.value,
  //   isWatermark:false,
  //   watermarkText:''
  // });
});
</script>

<style scoped lang="scss">
.login-container {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: var(--el-color-white);

	.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 {
		width: 550px;
		border-radius: 12px;
		padding: 30px 80px 30px 80px;
		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;
		box-shadow: 0 0 30px 0 rgba(60, 80, 224, 0.14);

		.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>
