<template>
  <!-- <Suspense> -->
  <!-- component with nested async dependencies -->
  <RouterView v-slot="{ Component, route }">
    <template v-if="Component">
      <keep-alive :max="5" :include="route.path.split('/').length <= 2?[Component.type.__name]:null" v-if="selfStore.isLogin">
        <component :is="Component" v-if="route.meta.KeepAlive" :key="null" />
      </keep-alive>
      <!-- <component :is="Component" v-if="route.meta.KeepAlive" :key="route.path" /> -->
      <component :is="Component" v-if="!selfStore.isLogin || !route.meta.KeepAlive" />
    </template>
  </RouterView>
  <!-- loading state via #fallback slot -->
  <!-- <template #fallback>
    Loading...
  </template>
</Suspense> -->
</template>

<script setup>
import { watch, onMounted, watchEffect } from "vue";
// import { useRoute , useRouter} from "vue-router";
import { useSelfStore } from 'stores/self';
import { useInterval } from 'src/composables/Interval';
// import { useQuasar } from 'quasar';
// import { api } from 'boot/axios'
const selfStore = useSelfStore()
// const route = useRoute();
function getNewMessage() {
  selfStore.refresh();
}

const { clearTimer, setTimer } = useInterval(getNewMessage)
onMounted(()=>{
  watchEffect(() => {
  if (selfStore.isLogin) {
    setTimer();
  } else {
    clearTimer();
  }
})
})
document.getElementById("appEnterLoading").remove();
</script>
