<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <component :is="pageComponent"></component>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useMineDepartmentStore } from '/@/store/modules/mine';
  import LeafPage from './components/LeafPage.vue';
  import RootPage from './components/RootPage.vue';
  import { Empty } from 'ant-design-vue';

  const mineStore = useMineDepartmentStore();

  const pageComponent = ref<any>(Empty);

  watch(
    () => mineStore.getDepart,
    (n, o) => {
      if (n?.isLeaf === o?.isLeaf) return;

      if (n?.isLeaf) {
        pageComponent.value = LeafPage;
      } else {
        pageComponent.value = RootPage;
      }
    },
    {
      immediate: true,
    }
  );
</script>
