<template>
  <router-view v-if="showWorkPane" v-slot="{ Component }">
    <transition :name="transitionName" appear>
      <multi-tab-store-consumer>
          <workplaceUnit></workplaceUnit>
        <!-- <component v-if="Component" :is="Component"></component>
        <slot v-else /> -->
      </multi-tab-store-consumer>
    </transition>
  </router-view>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, ref } from 'vue';
import { MultiTabStoreConsumer } from '@/components/multi-tab';
import { injectMenuState } from './use-menu-state';
import workplaceUnit from '@/views/workbench/workplaceUnit.vue';

import bus from '@/utils/bus';

export default defineComponent({
  name: 'CustomRouterView',

  setup() {
    const menuState = injectMenuState();

    const showWorkPane = ref(true);
    const resetApplicationPanel = (tabId) => {
      showWorkPane.value = false;
      setTimeout(() => {
        showWorkPane.value = true;
      })
    }

    bus.on('homePanel:resetApplicationPanel', resetApplicationPanel);
    
    onBeforeUnmount(() => {
      bus.off('homePanel:resetApplicationPanel', resetApplicationPanel);
    })

    return {
      transitionName: computed(() => menuState.transitionName.value),
      showWorkPane,
    };
  },
  components: {
    MultiTabStoreConsumer,
    workplaceUnit,
  },
});
</script>
