<!-- @format -->

<template>
  <router-view v-slot="{ Component }" v-if="isRouterAlive">
    <transition name="fade-slide" mode="out-in">
      <div class="ns-content-main">
        <keep-alive :include="data">
          <component :is="Component" />
        </keep-alive>
      </div>
    </transition>
  </router-view>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, nextTick } from 'vue';
  import { useKeepAlive } from '/nerv-base/store/modules/keepAlive';
  import { listenerReloadChange } from '/nerv-lib/util/routeChange';
  export default defineComponent({
    name: 'NsContent',
    props: {
      keepAliveList: {
        type: Array,
        default: () => [],
      },
    },
    setup() {
      const cachedViews = ref(['Status']);
      const keepAliveStore = useKeepAlive();
      const isRouterAlive = ref(true);

      listenerReloadChange(() => {
        isRouterAlive.value = false;
        nextTick(() => {
          isRouterAlive.value = true;
        });
      });
      const data = computed(() => {
        return keepAliveStore.getKeepAlive;
      });

      return { cachedViews, data, isRouterAlive };
    },
  });
</script>

<style lang="less" scoped>
  .ns-content-main {
    height: 100%;
    & > div {
      height: 100%;
    }
  }
</style>