<template>
  <div id="app" @click="isTimeOut">
    <router-view></router-view>
  </div>
</template>
<script>
import { useMessage, useDialog, useNotification, useLoadingBar } from 'naive-ui';
import { useStore } from 'vuex';
import { onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    let store = useStore();
    let sysTheme = computed(() => {
      return store.getters.sysTheme;
    });
    let lastTime = null; // 最后一次点击的时间
    let currentTime = null; // 当前点击的时间
    let timeOut = 60 * 30 * 1000; // 设置超时时间:30分钟
    watch(
      () => sysTheme.value,
      (newVal, oldVal) => {
        if (newVal) {
          document.documentElement.setAttribute('theme', 'dark');
        } else {
          document.documentElement.removeAttribute('theme');
        }
      }
    );
    onMounted(() => {
      if (sysTheme.value) {
        document.documentElement.setAttribute('theme', 'dark');
      }
      lastTime = new Date().getTime();
    });
    window.$message = useMessage();
    window.$dialog = useDialog();
    window.$notification = useNotification();
    window.$loadingBar = useLoadingBar();

    const router = useRouter();
    function isTimeOut() {
      currentTime = new Date().getTime(); // 记录这次点击的时间
      if (currentTime - lastTime > timeOut) {
        // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
        // router.push({ name: "index" });
        lastTime = new Date().getTime(); //当登录页属于此页面的子页面时，需要手动赋值最后一次点击的时间
      } else {
        lastTime = new Date().getTime(); // 如果在30分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
      }
    }

    return {
      sysTheme,
      lastTime,
      currentTime,
      timeOut,
      isTimeOut,
    };
  },
};
</script>
<style lang="less">
@import 'styles/common.less';

.app-page {
  height: 100vh;
}
</style>