<template>
	<div v-show="state.isShowLockScreen">
		<div class="layout-lock-screen-mask"></div>
		<div
			class="layout-lock-screen-img"
			:class="{ 'layout-lock-screen-filter': state.isShowLockLogin }"
			:style="{ backgroundImage: `url(${themeConfig.loginImage})` }"
		></div>
		<div class="layout-lock-screen">
			<div
				class="layout-lock-screen-date"
				ref="layoutLockScreenDateRef"
				@mousedown="onDown"
				@mousemove="onMove"
				@mouseup="onEnd"
				@touchstart.stop="onDown"
				@touchmove.stop="onMove"
				@touchend.stop="onEnd"
			>
				<div class="layout-lock-screen-date-box">
					<div class="layout-lock-screen-date-box-time">
						{{ formatDate(now, 'HH:MM:SS') }}
					</div>
					<div class="layout-lock-screen-date-box-info">{{ formatDate(now, 'YYYY-mm-dd WWW') }}</div>
				</div>
				<div class="layout-lock-screen-date-top">
					<SvgIcon name="ele-Top" />
					<div class="layout-lock-screen-date-top-text">上滑解锁</div>
				</div>
			</div>
			<transition name="el-zoom-in-center">
				<div v-show="state.isShowLockLogin" class="layout-lock-screen-login">
					<div class="layout-lock-screen-login-box">
						<div class="layout-lock-screen-login-box-name">{{ userInfos.name }}</div>

						<div class="layout-lock-screen-login-box-value">
							<el-input
								placeholder="请填写密码"
								ref="layoutLockScreenInputRef"
								v-model="state.lockScreenPassword"
								@keyup.enter.native.stop="onLockScreenSubmit()"
								clearable
							>
								<template #append>
									<el-button @click="onLockScreenSubmit">
										<SvgIcon name="ele-Right" class="el-input__icon" />
									</el-button>
								</template>
							</el-input>
						</div>
					</div>
					<div class="layout-lock-screen-login-icon">
						<SvgIcon name="ele-SwitchButton" size="20px" @click="forgetPwd" />
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script setup lang="ts" name="layoutLockScreen">
import { nextTick, onMounted, reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { Cookie, Local, Session } from '@/utils/storage';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { useUserInfo } from '@/stores/userInfo';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useNow } from '@vueuse/core';

// 定义接口来定义对象的类型
interface LockScreenState {
	transparency: number;
	downClientY: number;
	moveDifference: number;
	isShowLockLogin: boolean;
	isFlags: boolean;
	querySelectorEl: HTMLElement | string;
	isShowLockScreen: boolean;
	lockScreenPassword: string;
}

// 定义变量内容
const now = useNow(); // 获取当前时间
const layoutLockScreenInputRef = ref<RefType>();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const state = reactive<LockScreenState>({
	transparency: 1,
	downClientY: 0,
	moveDifference: 0,
	isShowLockLogin: false,
	isFlags: false,
	querySelectorEl: '',
	isShowLockScreen: false,
	lockScreenPassword: '',
});
// 鼠标按下
const onDown = (down: any) => {
	state.isFlags = true;
	state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
};
// 鼠标移动
const onMove = (move: any) => {
	if (state.isFlags) {
		const el = <HTMLElement>state.querySelectorEl;
		const opacity = (state.transparency -= 1 / 200);
		if (move.touches) {
			state.moveDifference = move.touches[0].clientY - state.downClientY;
		} else {
			state.moveDifference = move.clientY - state.downClientY;
		}
		if (state.moveDifference >= 0) return false;
		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacity};`);
		if (state.moveDifference < -400) {
			el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
			state.moveDifference = -el.clientHeight;
			setTimeout(() => {
				el && el.parentNode?.removeChild(el);
			}, 300);
		}
		if (state.moveDifference === -el.clientHeight) {
			state.isShowLockLogin = true;
			layoutLockScreenInputRef.value.focus();
		}
	}
};
// 鼠标松开
const onEnd = () => {
	state.isFlags = false;
	state.transparency = 1;
	if (state.moveDifference >= -400) {
		(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
	}
};
const layoutLockScreenDateRef = ref<RefType>();
// 获取要拖拽的初始元素
const initGetElement = () => {
	nextTick(() => {
		state.querySelectorEl = layoutLockScreenDateRef.value;
	});
};
// 锁屏时间定时器
const initLockScreen = () => {
	state.isShowLockScreen = true;
	setLocalThemeConfig();
};
// 存储布局配置
const setLocalThemeConfig = () => {
	themeConfig.value.isDrawer = false;
	Local.set('themeConfig', themeConfig.value);
};
// 密码填写点击事件
const onLockScreenSubmit = () => {
	if (Session.get('lockPwd') != state.lockScreenPassword) {
		ElMessage({
			message: '锁屏密码错误，请重试',
			type: 'error',
		});
		return;
	}
	themeConfig.value.isLockScreen = false;
	Local.set('themeConfig', themeConfig.value);
};
const forgetPwd = () => {
	ElMessageBox.confirm(`忘记密码重新进入系统，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			setLocalThemeConfig();
			// 清除缓存/token等
			Session.clear();
			Cookie.clear();
			Local.clear();
			window.location.reload();
		})
		.catch(() => {});
};
// 页面加载时
onMounted(() => {
	initGetElement();
	initLockScreen();
});
</script>

<style scoped lang="scss">
.layout-lock-screen-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.layout-lock-screen-filter {
	filter: blur(3px);
}

.layout-lock-screen-mask {
	background: var(--el-color-white);
	@extend .layout-lock-screen-fixed;
	z-index: 9;
}

.layout-lock-screen-img {
	@extend .layout-lock-screen-fixed;
	background-size: calc(100vw + 1px) calc(100vh + 1px);
	z-index: 99;
}

.layout-lock-screen {
	@extend .layout-lock-screen-fixed;
	z-index: 999;

	&-date {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: var(--el-color-white);
		z-index: 9999;
		user-select: none;

		&-box {
			position: absolute;
			left: 30px;
			bottom: 50px;

			&-time {
				font-size: 100px;
				color: var(--el-color-white);
			}

			&-info {
				font-size: 40px;
				color: var(--el-color-white);
			}

			&-minutes {
				font-size: 16px;
			}
		}

		&-top {
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 100%;
			border: 1px solid var(--el-border-color-light, #ebeef5);
			background: rgba(255, 255, 255, 0.1);
			color: var(--el-color-white);
			opacity: 0.8;
			position: absolute;
			right: 30px;
			bottom: 50px;
			text-align: center;
			overflow: hidden;
			transition: all 0.3s ease;

			i {
				transition: all 0.3s ease;
			}

			&-text {
				opacity: 0;
				position: absolute;
				top: 150%;
				font-size: 12px;
				color: var(--el-color-white);
				left: 50%;
				line-height: 1.2;
				transform: translate(-50%, -50%);
				transition: all 0.3s ease;
				width: 35px;
			}

			&:hover {
				border: 1px solid rgba(255, 255, 255, 0.5);
				background: rgba(255, 255, 255, 0.2);
				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
				color: var(--el-color-white);
				opacity: 1;
				transition: all 0.3s ease;

				i {
					transform: translateY(-40px);
					transition: all 0.3s ease;
				}

				.layout-lock-screen-date-top-text {
					opacity: 1;
					top: 50%;
					transition: all 0.3s ease;
				}
			}
		}
	}

	&-login {
		position: relative;
		z-index: 9999994;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: var(--el-color-white);

		&-box {
			text-align: center;
			margin: auto;

			&-img {
				width: 180px;
				height: 180px;
				margin: auto;

				img {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			&-name {
				font-size: 26px;
				margin: 15px 0 30px;
			}
		}

		&-icon {
			position: absolute;
			right: 30px;
			bottom: 30px;

			i {
				font-size: 20px;
				margin-left: 15px;
				cursor: pointer;
				opacity: 0.8;

				&:hover {
					opacity: 1;
				}
			}
		}
	}
}

</style>
