import type { Component } from 'vue';
import { markRaw } from 'vue';

import head from './pages/head.vue';
const headRef = shallowRef(head);
import headEdit from './edit/head-edit.vue';
const headEditRef = shallowRef(headEdit);

import headData from './pages/headData.vue';
const headDataRef = shallowRef(headData);
import headDataEdit from './edit/headData-edit.vue';
const headDataEditRef = shallowRef(headDataEdit);

import textTitle from './pages/textTitle.vue';
const textTitleRef = shallowRef(textTitle);
import textTitleEdit from './edit/textTitle-edit.vue';
const textTitleEditRef = shallowRef(textTitleEdit);

import navigation from './pages/navigation.vue';
const navigationRef = shallowRef(navigation);
import navigationEdit from './edit/navigation-edit.vue';
const navigationEditRef = shallowRef(navigationEdit);

import imageCube from './pages/imageCube.vue';
const imageCubeRef = shallowRef(imageCube);
import imageCubeEdit from './edit/imageCube-edit.vue';
const imageCubeEditRef = shallowRef(imageCubeEdit);

import activity from './pages/activity.vue';
const activityRef = shallowRef(activity);
import activityEdit from './edit/activity-edit.vue';
const activityEditRef = shallowRef(activityEdit);

import carousel from './pages/carousel.vue';
const carouselRef = shallowRef(carousel);
import carouselEdit from './edit/carousel-edit.vue';
const carouselEditRef = shallowRef(carouselEdit);

import article from './pages/article.vue';
const articleRef = shallowRef(article);
import articleEdit from './edit/article-edit.vue';
const articleEditRef = shallowRef(articleEdit);

import brand from './pages/brand.vue';
const brandRef = shallowRef(brand);
import brandEdit from './edit/brand-edit.vue';
const brandEditRef = shallowRef(brandEdit);

import advert from './pages/advert.vue';
const advertRef = shallowRef(advert);
import advertEdit from './edit/advert-edit.vue';
const advertEditRef = shallowRef(advertEdit);

import floor from './pages/floor.vue';
const floorRef = shallowRef(floor);
import floorEdit from './edit/floor-edit.vue';
const floorEditRef = shallowRef(floorEdit);

import goods from './pages/goods.vue';
const goodsRef = shallowRef(goods);
import goodsEdit from './edit/goods-edit.vue';
const goodsEditRef = shallowRef(goodsEdit);

import goodsList from './pages/goodsList.vue';
const goodsListRef = shallowRef(goodsList);
import goodsListEdit from './edit/goodsList-edit.vue';
const goodsListEditRef = shallowRef(goodsListEdit);

import discover from './pages/discover.vue';
const discoverRef = shallowRef(discover);
import discoverEdit from './edit/discover-edit.vue';
const discoverEditRef = shallowRef(discoverEdit);

import hot from './pages/hot.vue';
const hotRef = shallowRef(hot);
import hotEdit from './edit/hot-edit.vue';
const hotEditRef = shallowRef(hotEdit);

import editordiy from './pages/editordiy.vue';
const editordiyRef = shallowRef(editordiy);
import editordiyEdit from './edit/editordiy-edit.vue';
const editordiyEditRef = shallowRef(editordiyEdit);

import blank from './pages/blank.vue';
const blankRef = shallowRef(blank);
import blankEdit from './edit/blank-edit.vue';
const blankEditRef = shallowRef(blankEdit);

import border from './pages/border.vue';
const borderRef = shallowRef(border);
import borderEdit from './edit/border-edit.vue';
const borderEditRef = shallowRef(borderEdit);

// 组件列表配置
export const componentImportConfigs: any = [
  // {
  //   name: '头部组件',
  //   icon: 'iconfont iconfuwenbenpc',
  //   id: 1,
  //   enabled: true,
  //   components: markRaw(headRef.value),
  //   edit: markRaw(headEditRef.value),
  //   fid: 1
  // },
  // {
  //   name: '站点头部',
  //   icon: 'iconfont iconfuwenbenpc',
  //   id: 18,
  //   enabled: true,
  //   components: markRaw(headDataRef.value),
  //   edit: markRaw(headDataEditRef.value),
  //   fid: 1
  // },
  {
    name: '文本标题',
    icon: 'iconfont iconbiaotipc',
    id: 2,
    enabled: true,
    components: markRaw(textTitleRef.value),
    edit: markRaw(textTitleEditRef.value),
    fid: 1
  },
  {
    name: '图文导航',
    icon: 'iconfont icontuwendaohangpc',
    id: 3,
    enabled: true,
    components: markRaw(navigationRef.value),
    edit: markRaw(navigationEditRef.value),
    fid: 1
  },
  {
    name: '图片魔方',
    icon: 'iconfont iconmofangpc',
    id: 4,
    enabled: true,
    components: markRaw(imageCubeRef.value),
    edit: markRaw(imageCubeEditRef.value),
    fid: 1
  },
  {
    name: '活动魔方',
    icon: 'iconfont iconmofangpc',
    enabled: true,
    id: 5,
    components: markRaw(activityRef.value),
    edit: markRaw(activityEditRef.value),
    fid: 1
  },
  {
    name: '轮播图',
    icon: 'iconfont icona-tupianzhanbopc302',
    enabled: true,
    id: 6,
    components: markRaw(carouselRef.value),
    edit: markRaw(carouselEditRef.value),
    fid: 1
  },
  {
    name: '文章咨询',
    icon: 'iconfont icongonggaopc',
    enabled: true,
    id: 7,
    components: markRaw(articleRef.value),
    edit: markRaw(articleEditRef.value),
    fid: 1
  },
  {
    name: '品牌组件',
    icon: 'iconfont iconmiaoshashangpin',
    enabled: true,
    id: 8,
    components: markRaw(brandRef.value),
    edit: markRaw(brandEditRef.value),
    fid: 1
  },
  {
    name: '图文广告',
    icon: 'iconfont icontupiandaohangpc',
    enabled: true,
    id: 9,
    components: markRaw(advertRef.value),
    edit: markRaw(advertEditRef.value),
    fid: 1
  },
  {
    name: '楼层组件',
    icon: 'iconfont iconshangpinliebiaopc',
    enabled: true,
    id: 10,
    components: markRaw(floorRef.value),
    edit: markRaw(floorEditRef.value),
    fid: 1
  },
  {
    name: '商品组件',
    icon: 'iconfont icona-shangpintuijianpc30',
    enabled: true,
    id: 11,
    components: markRaw(goodsRef.value),
    edit: markRaw(goodsEditRef.value),
    fid: 1
  },
  {
    name: '多商品组',
    icon: 'iconfont iconduoshangpinzupc',
    enabled: true,
    id: 12,
    components: markRaw(goodsListRef.value),
    edit: markRaw(goodsListEditRef.value),
    fid: 1
  },
  {
    name: '发现组件',
    icon: 'iconfont iconjifenshangpinpc',
    enabled: true,
    id: 13,
    components: markRaw(discoverRef.value),
    edit: markRaw(discoverEditRef.value),
    fid: 1
  },
  {
    name: '热区',
    icon: 'iconfont iconrequpc',
    enabled: true,
    id: 14,
    components: markRaw(hotRef.value),
    edit: markRaw(hotEditRef.value),
    fid: 1
  },
  {
    name: '富文本',
    icon: 'iconfont iconfuwenbenpc',
    enabled: true,
    id: 15,
    components: markRaw(editordiyRef.value),
    edit: markRaw(editordiyEditRef.value),
    fid: 1
  },
  {
    name: '辅助空白',
    icon: 'iconfont iconfuzhukongbaipc',
    enabled: true,
    id: 16,
    components: markRaw(blankRef.value),
    edit: markRaw(blankEditRef.value),
    fid: 1
  },
  {
    name: '辅助线',
    icon: 'iconfont iconfuzhuxianpc',
    enabled: true,
    id: 17,
    components: markRaw(borderRef.value),
    edit: markRaw(borderEditRef.value),
    fid: 1
  }
];

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