<template>
  <div v-show="isLockedScreen">
    <LockScreenMask :isBlur="isShowLockLogin" />
    <LockScreenDragArea @slide-up="handleSlideUp" />
    <transition name="el-zoom-in-center">
      <LockScreenLoginForm
        ref="lockScreenLoginFormRef"
        v-show="isShowLockLogin"
        @submit="onLockScreenSubmit"
      />
    </transition>
  </div>
</template>

<script lang="ts">
import { computed, onMounted, ref, onUnmounted, defineComponent } from "vue";
import store, { useStore } from "@/hooks/useStore";
import LockScreenLoginForm from "./components/lock-screen-login-form.vue";
import LockScreenMask from "./components/lock-screen-mask.vue";
import LockScreenDragArea from "./components/lock-screen-drag-area.vue";
import { clearTimerUtil } from "@/utils";

let LOCKING_TIMER_ID: NodeJS.Timer | undefined = undefined; // 等待锁屏的时间定时器

export default defineComponent({
  name: "layoutLockScreen",
  setup() {
    const lockScreenLoginFormRef = ref<typeof LockScreenLoginForm | undefined>(
      undefined
    );
    const storeInstance = useStore();
    const isLockedScreen = ref(false); // 已经锁屏
    const isShowLockLogin = ref(false); // 锁屏显示登录表单

    const globalLockThemeConfig = computed(() => {
      return storeInstance.state.themeConfig;
    });

    const handleSlideUp = () => {
      // 显示输入框
      isShowLockLogin.value = true;
      // 输入框获取焦点
      lockScreenLoginFormRef.value!.focus();
    };

    /**
     * 初始化计算屏幕锁屏倒计时
     */
    const initLockingScreen = () => {
      // 如果开启锁屏
      if (globalLockThemeConfig.value.isLockScreen) {
        LOCKING_TIMER_ID = setInterval(() => {
          // 如果当前时间大于0
          if (globalLockThemeConfig.value.lockScreenTime > 0) {
            setThemeConfig({
              lockScreenTime: globalLockThemeConfig.value.lockScreenTime - 1,
            });
          }
          // 剩余锁屏的时间 是否开启锁屏
          const { lockScreenTime, isLockScreen } = globalLockThemeConfig.value;
          // 如果中断锁屏
          if (!isLockScreen) clearTimerUtil(LOCKING_TIMER_ID);
          // 如果锁屏倒计时结束
          if (lockScreenTime <= 0) {
            // 设置锁屏
            isLockedScreen.value = true;
            // 关闭定时器
            clearTimerUtil(LOCKING_TIMER_ID);
            // 收缩设置的抽屉模态框 重置倒计时时间
            setThemeConfig({
              isDrawer: false,
              lockScreenTime: 30,
            });
          }
        }, 1000);
      } else {
        clearTimerUtil(LOCKING_TIMER_ID);
      }
    };
    /**
     * 修改主题配置
     */
    const setThemeConfig = (
      config: Partial<typeof globalLockThemeConfig.value>
    ) => {
      store.commit("themeConfig/setThemeConfig", config);
    };
    /**
     * 密码输入点击事件
     */
    const onLockScreenSubmit = () => {
      // 提交成功后关闭锁屏
      store.commit("themeConfig/setThemeConfig", {
        isLockScreen: false,
      });
    };
    // 页面加载时
    onMounted(() => {
      initLockingScreen();
    });

    onUnmounted(() => {
      clearTimerUtil(LOCKING_TIMER_ID);
    });

    return {
      isShowLockLogin,
      isLockedScreen,
      handleSlideUp,
      lockScreenLoginFormRef,
      onLockScreenSubmit,
    };
  },

  components: {
    LockScreenLoginForm,
    LockScreenMask,
    LockScreenDragArea,
  },
});
</script>
