<!--
 * @Author: sjl
 * @Date: 2023-04-08 11:51:03
 * @Descripttion: 
-->
<template>
  <RouterView :key="cacheKey" class="RouterView">
    <template #default="{ Component, route }">
      <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" sjl="sujunlingkeep1">
          <component :is="Component" :key="route.fullPath" sjl="sujunlingkeep2" />
        </keep-alive>
        <component
          v-else
          :is="Component"
          :key="route.fullPath"
          class="p-4-my"
          sjl="sujunlingkeep3"
        />
      </transition>
    </template>
  </RouterView>
  <IframeApp v-show="cacheKey" class="iframeApp" />
  <FrameLayout v-if="getCanEmbedIFramePage" />
</template>

<script lang="ts">
  import { computed, defineComponent, unref } 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 { useMultipleTabStore } from '/@/store/modules/multipleTab';
  import IframeApp from '/@/views/qiankun/onepage/iframe.vue';
  import { getAppEnvConfig } from '/@/utils/env';
  const { VITE_GLOB_LIGONG_PAGE } = getAppEnvConfig();
  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;
      });

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

    data() {
      return {
        cache: {},
      };
    },

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

    methods: {
      getType(e) {
        console.log(e);
        var type = (e && e.menuOut == '2') || (e && e.meta && e.meta.menuOut == '2');
        if (type) {
          setTimeout(() => {
            if (window.mic) window.mic.sendToApp('wlw', { type: 'changeRouter', path: e.path });
          }, 100);
        }
        return type;
      },
    },
  });
</script>
<style scoped>
  .iframeApp {
    width: 100%;
    height: 100%;
  }

  .p-4-my {
    padding: 16px !important;
  }
</style>
