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

// 这里添加布局类型
const LayoutComponent: Record<LayoutType | 'mobile', Component> = {
  default: LayoutDefault,
  vertical: LayoutVertical,
  blankPage: LayoutBlankPage,
  mobile: LayoutMobile,

};

const designStore = useDesignStore();
const { isMobile } = useResponsive();
const route = useRoute();

/** 获取布局格式 */
const layout = computed((): LayoutType | 'mobile' => {
  // 移动端强制使用移动布局
  // if (isMobile.value) {
  //   return 'mobile';
  // }
  // 优先使用路由 meta 中定义的 layout
  if (route.meta?.layout) {
    return route.meta.layout as LayoutType;
  }
  // 否则使用全局设置的 layout
  return 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">
:deep(.aside-content .conversations-container){
  width: 100%;
}

:deep(.aside-content .conversations-list){
  padding: 0 !important;
}

:deep(.aside-content .conversations-wrap){
  padding: 0 !important;
}
:deep(.aside-content .el-scrollbar__thumb){
  width: 0 !important;
}
:deep(.nav-menu)
{
  border-right: 0.5px solid var(--s-color-border-tertiary, rgba(0, 0, 0, 0.08));
}
</style>
