<template>
  <router-view> </router-view>
  <a-spin
    v-if="spinning"
    size="large"
    :spinning="spinning"
    :delay="1000"
    class="global-mask fade-in"
  />
  <ExplainModal />
</template>

<script lang="ts">
import { defineComponent, watch, watchEffect } from "vue";
import { useMainStore } from "@/store";
import { useTimers } from "./setups/useTimers";
import { getToken } from "./auth/auth";
import { httpApp } from "./plugins/axiosApp";

export default defineComponent({
  name: "App",

  setup() {
    const { addInterval } = useTimers();
    addInterval(() => {
      if (getToken()) {
        void httpApp.post("/api/ess/user/online/signal");
      }
    }, 60 * 1000);

    let spinning = $ref(false);
    const mainStore = useMainStore();

    watch(
      () => mainStore.globalMask,
      () => (spinning = mainStore.globalMask)
    );

    watchEffect(() => {
      const bodyScrollProp = spinning ? "hidden" : "auto";
      document.body.style.overflow = bodyScrollProp;
    });
    return { spinning };
  },
});
</script>

<style>
#app {
  font-family: "PingFang SC", tahoma, arial, "Hiragino Sans GB", "宋体",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--app-main-bg-color);
  width: 100%;
  color: var(--app-main-text-color);
}

.global-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全。要控制body的overflow。 */
  min-width: var(--app-min-width);
  overflow: hidden;
  display: flex;
  place-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 6000;
}
.fade-in {
  opacity: 0.7;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
</style>
