<script setup lang="ts">
import { onMounted, onUnmounted, computed } from 'vue';
import useI18n from '@/hooks/useI18n';
import useMaskStore from '@/store/modules/mask';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { useRoute, useRouter } from 'vue-router';
import { useThrottleFn } from '@vueuse/core';
import { getConfigKey } from '@/api/system/config';
const maskStore = useMaskStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n();

/**显示遮罩 */
const isOpen = computed(() => !['none', 'lock'].includes(maskStore.type));

// 用户无操作一段时间后进行锁屏
function idleTimeout(time: number, callback: Function) {
  if (time === 0) return;
  let timeoutId: any;
  let idleTime = 0;
  function resetIdleTime() {
    idleTime = 0;
  }
  // 监听用户活动事件
  document.addEventListener('mousemove', useThrottleFn(resetIdleTime, 1000));
  document.addEventListener('keydown', useThrottleFn(resetIdleTime, 1000));
  document.addEventListener('click', useThrottleFn(resetIdleTime, 1000));
  // 定时检查用户是否长时间无操作
  timeoutId = setInterval(() => {
    idleTime += 1000;
    if (idleTime >= time) {
      clearTimeout(timeoutId);
      callback();
    }
  }, 1000);
}

/**组件实例挂载之后调用 */
onMounted(() => {
  // 本地锁定类型设置;
  maskStore.handleMaskType(maskStore.type);
  getConfigKey('sys.lockTime')
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS && res.data) {
        maskStore.lockTimeout = +res.data;
      }
      maskStore.handleMaskType(maskStore.type);
      // 是锁屏的调整到页面
      if (maskStore.type === 'lock') {
        maskStore.handleMaskType('lock');
        router.push({ name: 'LockScreen', query: { redirect: route.path } });
      }
    })
    .finally(() => {
      // 无操作x秒后跳转锁屏
      idleTimeout(maskStore.lockTimeout * 1000, () => {
        if (route.name === 'LockScreen') return;
        maskStore.handleMaskType('lock');
        router.push({ name: 'LockScreen', query: { redirect: route.path } });
      });
    });
});

/**组件实例被卸载之后调用 */
onUnmounted(() => {});
</script>
<template>
  <a-modal
    v-model:open="isOpen"
    get-container="#app"
    :footer="null"
    :zIndex="1008"
    :closable="false"
    :keyboard="false"
    :centered="true"
    :maskClosable="false"
    :maskStyle="{
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
    }"
    wrapClassName="lock-screen"
    :wrap-style="{
      background: 'rgba(0, 0, 0, 0.85)',
    }"
  >
    <!-- 锁屏-OMC重启升级 -->
    <div class="lock-screen_reload" v-if="maskStore.type === 'reload'">
      <LoadingOutlined style="font-size: 56px" />
      <div class="text">
        {{ t('components.LockScreen.backReload') }}
      </div>
      <div class="desc">
        {{ t('components.LockScreen.backReload2') }}
      </div>
    </div>

    <!-- 锁屏-OMC系统重置 -->
    <div class="lock-screen_reload" v-if="maskStore.type === 'reset'">
      <LoadingOutlined style="font-size: 56px" />
      <div class="text">
        {{ t('components.LockScreen.systemReset') }}
      </div>
      <div class="desc">
        {{ t('components.LockScreen.systemReset2') }}
      </div>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.lock-screen_reload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;

  color: #fff;

  & .text {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-top: 24px;
  }
  & .desc {
    margin-top: 8px;
    font-size: 16px;
  }
}
</style>

<style lang="less">
.lock-screen {
  .ant-modal-content {
    background-color: transparent;
    box-shadow: none;
  }
}
</style>
