<template>
  <Locale>
    <RouterView v-slot="{ Component }">
      <!-- <KeepAlive> -->
      <component :is="Component" />
      <!-- </KeepAlive> -->
    </RouterView>

    <div id="dialog"></div>
  </Locale>
</template>

<script lang="ts" setup>
import Locale from "@/config/locale.vue";
import { ElLoading } from "element-plus";
import { lifeHook } from "./request/state";

let loading: ReturnType<typeof ElLoading.service> | null = null;
let timeout: ReturnType<typeof setTimeout>;

lifeHook.push({
  start: () => {
    clearTimeout(timeout);
    if (!loading) {
      loading = ElLoading.service({
        lock: true,
        fullscreen: true,
        text: "加载中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    }
  },
  end: () => {
    if (loading) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        loading!.close();
        loading = null;
      }, 16);
    }
  },
});
</script>
