<script setup lang="ts">
import {
  defineAsyncComponent,
  onMounted,
  ref,
  shallowRef,
  type Component,
} from 'vue';
import { getConfigKey, changeValue } from '@/api/system/config';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';

const currentComponent = shallowRef<Component | null>(null);

const spinning = ref<boolean>(true);

/**匹配views里面所有的.vue或.tsx文件 */
const views = import.meta.glob('../views/**/*.{vue,tsx}') as Record<
  string,
  () => Promise<Component>
>;

/**
 * 查找页面模块
 * @param dirName 组件路径
 * @returns 路由懒加载函数
 */
function findView(dirName: string): () => Promise<Component> {
  for (const dir in views) {
    let viewDirName = '';
    const component = dir.match(/\/(.+)\.(vue|tsx)/);
    if (component && component.length === 3) {
      viewDirName = component[1];
    }
    if (viewDirName === dirName) {
      return views[dir];
    }
  }
  return () => import('@/views/configManage/neOverview/index.vue');
}

onMounted(() => {
  //获取当前系统设置的首页路径
  getConfigKey('sys.homePage').then(res => {
    spinning.value = false;
    if (res.code === RESULT_CODE_SUCCESS && res.data) {
      if (res.data) {
        const asyncComponent = findView(`${res.data}`);
        currentComponent.value = defineAsyncComponent(asyncComponent);
      }
    } else {
      currentComponent.value = defineAsyncComponent(
        () => import('@/views/configManage/neOverview/index.vue')
      );
    }
  });
});
</script>

<template>
  <a-spin
    size="large"
    :spinning="spinning"
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 362px;
    "
  >
    <component :is="currentComponent" />
  </a-spin>
</template>

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