<!-- 主布局 -->
<script setup lang="ts">
import type { LayoutType } from '@/config/design';
import LayoutBlankPage from '@/layouts/LayoutBlankPage/index.vue';
// import { useScreenStore } from '@/hooks/useScreen';
import LayoutVertical from '@/layouts/LayoutVertical/index.vue';
import { useDesignStore } from '@/stores';

// 这里添加布局类型
const LayoutComponent: Record<LayoutType, Component> = {
  vertical: LayoutVertical,
  blankPage: LayoutBlankPage,
};

const designStore = useDesignStore();
// const { isMobile } = useScreenStore();
/** 获取布局格式 */
const layout = computed((): LayoutType => designStore.layout);
onMounted(() => {
  // 更好的做法是等待所有资源加载
  window.addEventListener('load', () => {
    const loader = document.getElementById('yixinai-loader');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => {
        loader.style.display = 'none';
      }, 500); // 匹配过渡时间
    }
  });

  // 设置超时作为兜底
  setTimeout(() => {
    const loader = document.getElementById('yixinai-loader');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => {
        loader.style.display = 'none';
      }, 500);
    }
  }, 500); // 最多显示0.5秒
});
</script>

<template>
  <div>
    <component :is="LayoutComponent[layout]" />
  </div>
</template>

<style scoped lang="scss"></style>
