import type { Component } from 'vue';
import { markRaw } from 'vue';
// 辅助函数：自动导入展示组件和编辑组件
// const createComponentMap = (name: string) => ({
//   pages: defineAsyncComponent(() => import(`@/views/diy/pccomponents/pages/${name}.vue`)),
//   edit: defineAsyncComponent(() => import(`@/views/diy/pccomponents/edit/${name}-edit.vue`))
// });

const createComponentMap = (name: string) => ({
  pagePath: `./pages/${name}.vue`,
  editPath: `./edit/${name}-edit.vue`,
  fid: 1
});

// 组件列表配置
export const componentImportConfigs: any = [
  {
    name: '头部组件',
    icon: 'iconfont iconfuwenbenpc',
    id: 1,
    enabled: true,
    ...createComponentMap('head')
  },
  {
    name: '文本标题',
    icon: 'iconfont iconbiaotipc',
    id: 2,
    enabled: true,
    ...createComponentMap('textTitle')
  },
  {
    name: '图文导航',
    icon: 'iconfont icontuwendaohangpc',
    id: 3,
    enabled: true,
    ...createComponentMap('navigation')
  },
  {
    name: '图片魔方',
    icon: 'iconfont iconmofangpc',
    id: 4,
    enabled: true,
    ...createComponentMap('imageCube')
  },
  {
    name: '活动魔方',
    icon: 'iconfont iconmofangpc',
    enabled: true,
    id: 5
  },
  {
    name: '轮播图',
    icon: 'iconfont icona-tupianzhanbopc302',
    enabled: true,
    id: 6,
    ...createComponentMap('carousel')
  },
  {
    name: '文章咨询',
    icon: 'iconfont icongonggaopc',
    enabled: true,
    id: 7,
    ...createComponentMap('article')
  },
  {
    name: '品牌组件',
    icon: 'iconfont iconmiaoshashangpin',
    enabled: true,
    id: 8,
    ...createComponentMap('brand')
  },
  {
    name: '图文广告',
    icon: 'iconfont icontupiandaohangpc',
    enabled: true,
    id: 9,
    ...createComponentMap('advert')
  },
  {
    name: '楼层组件',
    icon: 'iconfont iconshangpinliebiaopc',
    enabled: true,
    id: 10,
    ...createComponentMap('floor')
  },
  {
    name: '商品组件',
    icon: 'iconfont icona-shangpintuijianpc30',
    enabled: true,
    id: 11,
    ...createComponentMap('goods')
  },
  {
    name: '多商品组',
    icon: 'iconfont iconduoshangpinzupc',
    enabled: true,
    id: 12,
    ...createComponentMap('goodsList')
  },
  {
    name: '发现组件',
    icon: 'iconfont iconjifenshangpinpc',
    enabled: true,
    id: 13,
    ...createComponentMap('discover')
  },
  {
    name: '热区',
    icon: 'iconfont iconrequpc',
    enabled: true,
    id: 14,
    ...createComponentMap('hot')
  }
];

/**
 * 加载所有组件
 * @returns 组件配置列表
 */
export async function loadDiyComponents(): Promise<any[]> {
  const components: any[] = [];

  const loadPromises = componentImportConfigs
    .filter((config: any) => config.enabled !== false)
    .map(async (config: any) => {
      try {
        const [pageModule, editModule] = await Promise.all([import(/* @vite-ignore */ config.pagePath), import(/* @vite-ignore */ config.editPath)]);
        return {
          name: config.name,
          icon: config.icon,
          fid: config.fid,
          id: config.id,
          components: markRaw(pageModule.default),
          edit: markRaw(editModule.default),
          enabled: true
        } as any;
      } catch (error) {
        console.warn(`加载组件失败：${config.name}`, error);
        return null;
      }
    });

  const results = await Promise.all(loadPromises);
  return results.filter((item): item is any => item !== null);
}

/**
 * 获取组件分组配置
 * @param components 组件列表
 * @returns 分组后的组件配置
 */
export function getComponentGroups(components: any[]): any[] {
  return [
    {
      name: '基础组件',
      list: components,
      id: 1
    }
    // 后续可扩展多个分组，如：营销组件、商品组件等
  ];
}