<template>
  <RouterView :key="cacheKey">
    <template #default="{ Component, route }">
      <!-- <div id="tips-container" class="tips-container"></div> -->
      <transition v-if="!cacheKey" :name="getTransitionName({
        route,
        openCache,
        enableTransition: getEnableTransition,
        cacheTabs: getCaches,
        def: getBasicTransition,
      })
        " mode="out-in" appear>
        <keep-alive v-if="openCache" :include="getCaches">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />
      </transition>
    </template>
  </RouterView>
  <IframeApp v-show="cacheKey" class="iframeApp" />
  <FrameLayout v-if="getCanEmbedIFramePage" />
</template>

<script lang="ts">
import { computed, defineComponent, unref, onMounted } from 'vue';
import FrameLayout from '/@/layouts/iframe/index.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { getTransitionName } from './transition';
import IframeApp from '/@/views/twoThree/index.vue';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useAlarmNotify } from '/@/views/alarm/log/hook/useAlarmNotify';
import eventBus from '/@/utils/eventBus';
// import Tips from '/@/views/tips/index.vue';
// import { createApp } from 'vue';
export default defineComponent({
  name: 'PageLayout',
  components: { FrameLayout, IframeApp },
  setup() {
    const { getShowMultipleTab } = useMultipleTabSetting();
    const tabStore = useMultipleTabStore();

    const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();

    const { getBasicTransition, getEnableTransition } = useTransitionSetting();

    const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));

    const getCaches = computed((): string[] => {
      if (!unref(getOpenKeepAlive)) {
        return [];
      }
      return tabStore.getCachedTabList;
    });

    useAlarmNotify();

    // onMounted(()=>{
    //   const tips = createApp(Tips)
    //   // 挂载消息提示组件
    //   tips.mount('#tips-container')
    // })

    return {
      getTransitionName,
      openCache,
      getEnableTransition,
      getBasicTransition,
      getCaches,
      getCanEmbedIFramePage,
    };
  },

  computed: {
    cacheKey() {
      var bool = this.getType(this.$route);
      return bool;
    },
  },

  methods: {
    getType(e) {
      // console.log(e);
      if (e.path == "/dataAdmin/dataAdmin/mapUpload") {
        eventBus.emit('userSysRemove')
      }
      // 判断是否是iframe页面,iframe页面性能优化
      return e && e.meta && e.meta.isLink;
    },
  },
});
</script>
<style lang="less" scoped>
.tips-container {
  position: absolute;
  z-index: 9999;
}

.iframeApp {
  width: 100%;
  height: 100%;
}
</style>
