import { RouteConfig } from 'vue-router/types/index'
import Vue, { ComponentOptions, AsyncComponent } from 'vue'
type Component = ComponentOptions<Vue> | typeof Vue | AsyncComponent

export interface IMenuTreeNode {
    name: string
    path?: string
    children?: IMenuTreeNode[]
    component?: Component
}

const menuTree: IMenuTreeNode[] = [
    {
        name: '开发指南',
        path: '/guide',
        component: () => import('../pages/guide/guide.vue')
    },
    {
        name: '公共组件',
        children: [
            {
                name: '标题类',
                children: [
                    {
                        name: '标题',
                        path: '/title',
                        component: () => import('../pages/title/title.vue')
                    },
                    {
                        name: 'canvas渐变色标题',
                        path: '/canvasTitle',
                        component: () => import('../pages/canvasTitle/canvasTitle.vue')
                    },
                    {
                        name: 'css渐变色标题',
                        path: '/cssTitle',
                        component: () => import('../pages/cssTitle/cssTitle.vue')
                    }
                ]
            },
            {
                name: '轮播类',
                children: [
                    {
                        name: '轮播图',
                        path: '/carousel',
                        component: () => import('../pages/carousel/carousel.vue')
                    },
                    {
                        name: '文字走马灯',
                        path: '/marquee',
                        component: () => import('../pages/marquee/marquee.vue')
                    },
                    {
                        name: '轮播表格',
                        path: '/slideTable',
                        component: () => import('../pages/slideTable/slideTable.vue')
                    },
                    {
                        name: '城市轮播'
                    }
                ]
            },
            {
                name: '表单类',
                children: [
                    {
                        name: '输入框',
                        path: '/input',
                        component: () => import('../pages/input/input.vue')
                    },
                    {
                        name: '选择器',
                        path: '/select',
                        component: () => import('../pages/select/select.vue')
                    }
                ]
            },
            {
                name: '进度条类',
                children: [
                    {
                        name: '环形进度条'
                    },
                    {
                        name: '进度条'
                    },
                    {
                        name: '水波球'
                    },
                    {
                        name: '双环图',
                        path: '/doubleCircle',
                        component: () => import('../pages/doubleCircle/doubleCircle.vue')
                    },
                ]
            },
            {
                name: '其他类',
                children: [
                    {
                        name: '图表',
                        path: '/echart',
                        component: () => import('../pages/echart/echart.vue')
                    },
                    {
                        name: '表格'
                    },
                    {
                        name: '数字翻牌效果'
                    },

                    {
                        name: '卡片翻牌效果'
                    },
                    {
                        name: '柱子跳动效果'
                    },
                    {
                        name: '线条和点流动',
                        path: '/canvasLine',
                        component: () => import('../pages/canvasLine/canvasLine.vue')
                    },
                    {
                        name: '椭圆和点流动',
                        path: '/canvasCircle',
                        component: () => import('../pages/canvasCircle/canvasCircle.vue')
                    },
                    {
                        name: '地图飞线和点',
                        path: '/svgLine',
                        component: () => import('../pages/svgLine/svgLine.vue')
                    },
                    {
                        name: 'tab页（可轮播）',
                        path: '/selectTab',
                        component: () => import('../pages/selectTab/selectTab.vue')
                    },
                    {
                        name: '配置化',
                        path: '/dataConfig',
                        component: () => import('../pages/dataConfig/dataConfig.vue')
                    },
                    {
                        name: '弹框'
                    },
                    {
                        name: 'css告警圈',
                        path: '/alarmRingCss',
                        component: () => import('../pages/alarmRingCss/alarmRingCss.vue')
                    },
                    {
                        name: 'canvas告警圈',
                        path: '/alarmRingCanvas',
                        component: () => import('../pages/alarmRingCanvas/alarmRingCanvas.vue')
                    },
                    {
                        name: '转圈canvas环线',
                        path: '/canvasMoveCircle',
                        component: () => import('../pages/canvasMoveCircle/canvasMoveCircle.vue')
                    }
                ]
            }
        ]
    },
    {
        name: '特殊组件',
        children: [
            {
                name: '两地三中心'
            },
            {
                name: '3D地球'
            },
            {
                name: '3D卡片',
                path: '/TdCards',
                component: () => import('../pages/TdCards/TdCards.vue')
            },
            {
                name: '3D机房'
            }
        ]
    }
]

function createMenuList(menuTree: IMenuTreeNode[]): RouteConfig[] {
    let menuList: RouteConfig[] = []
    menuTree.forEach(menu => {
        if (menu.component && menu.path) {
            menuList.push({
                name: menu.name,
                path: menu.path,
                component: menu.component
            })
        }
        if (menu.children && menu.children.length) {
            menuList = menuList.concat(createMenuList(menu.children))
        }
    })
    return menuList
}

export const menuList: RouteConfig[] = createMenuList(menuTree)

export default menuTree