<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in" appear>
      <keep-alive :include="cacheList">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useTabBarStore } from '@/store'
import { getWorkUndoneCount } from '@/api/project/work'
import { useUndoneCount } from '@/hooks/useUndoneCount'

const tabBarStore = useTabBarStore()
const { setCount } = useUndoneCount()
const cacheList = computed(() => tabBarStore.getCacheList)
const interId = ref()
const setUndoneCount = async () => {
  const { undone_count: count } = await getWorkUndoneCount()
  setCount(count)
}

onMounted(async () => {
  await setUndoneCount()
  interId.value = setInterval(async () => {
    await setUndoneCount()
  }, 10000)
})

onUnmounted(() => {
  if (interId.value) {
    console.log('清楚定时器')
    window.clearInterval(interId.value)
  }
})
</script>

<style scoped lang="less"></style>
