<template>
  <div v-if="showFrame">
    <template v-for="frame in getFramePages" :key="frame.path">
      <div
        style="height: calc(100vh - 149px)"
        v-if="frame.meta.frameSrc && hasRenderFrame(frame.name) && showIframe(frame)"
      >
        <FramePage :frameSrc="frame.meta.frameSrc.replace('#{token}', userStore.getToken)" />
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { unref, computed } from 'vue';
  import FramePage from '/@/views/sys/iframe/index.vue';

  import { useFrameKeepAlive } from './useFrameKeepAlive';
  import { useUserStore } from '/@/store/modules/user';

  const userStore = useUserStore();

  const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();

  const showFrame = computed(() => unref(getFramePages).length > 0);
</script>
