import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { AppRouteRecordRaw } from './types'
import type { App } from 'vue'
import { getParentLayout } from './utils'

/* Layout */
const Layout = () => import('../layout/index.vue')
/* ParentView */
import ParentView from '_c/ParentView/index.vue'

/**
* redirect: noredirect        当设置 noredirect 的时候该路由在面包屑导航中不可被点击
* name:'router-name'          设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
* meta : {
    hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
    alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
                              只有一个时，会将那个子路由当做根路由显示在侧边栏，
                              若你想不管路由下面的 children 声明的个数都显示你的根路由，
                              你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
                              一直显示根路由(默认 false)
    title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
    icon: 'svg-name'          设置该路由的图标
    noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
    breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
    affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
    noTagsView: true           如果设置为true，则不会出现在tag中(默认 false)
    activeMenu: '/dashboard'  显示高亮的路由路径
  }
**/

export const constantRouterMap: AppRouteRecordRaw[] = [
  {
    path: '/redirect',
    component: Layout,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('_c/Redirect/index.vue'),
        meta: {}
      }
    ],
    meta: {
      hidden: true
    }
  },
  {
    path: '/404',
    component: () => import('_c/Error/404.vue'),
    name: 'NoFind',
    meta: {
      hidden: true,
      title: '404'
    }
  },
  {
    path: '/login',
    component: () => import('_p/index/views/login/index.vue'),
    name: 'Login',
    meta: {
      hidden: true,
      title: '登录'
    }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Root',
    meta: {},
    children: [
      {
        path: 'dashboard',
        component: () => import('_p/index/views/dashboard/index.vue'),
        name: 'Dashboard',
        meta: {
          title: '首页',
          icon: 'dashboard',
          noCache: true,
          affix: true
        }
      }
    ]
  },
  // {
  //   path: '/external-link',
  //   component: Layout,
  //   meta: {},
  //   children: [
  //     {
  //       path: 'http://192.168.169.57/ue/2019/doc/vue-standard/dist/',
  //       meta: { title: '文档', icon: 'documentation' }
  //     }
  //   ]
  // }
]

export const asyncRouterMap: AppRouteRecordRaw[] = [
  // {
  //   path: '/components-demo',
  //   component: Layout,
  //   redirect: '/components-demo/echarts',
  //   name: 'ComponentsDemo',
  //   meta: {
  //     title: '功能组件',
  //     icon: 'component',
  //     alwaysShow: true
  //   },
  //   children: [
  //     {
  //       path: 'echarts',
  //       component: () => import('_p/index/views/components-demo/echarts/index.vue'),
  //       name: 'EchartsDemo',
  //       meta: {
  //         title: '图表'
  //       }
  //     },
  //     {
  //       path: 'image',
  //       component: () => import('_p/index/views/components-demo/image/index.vue'),
  //       name: 'ImageDemo',
  //       meta: {
  //         title: '图片'
  //       }
  //     },
  //     {
  //       path: 'preview',
  //       component: () => import('_p/index/views/components-demo/preview/index.vue'),
  //       name: 'PreviewDemo',
  //       meta: {
  //         title: '图片预览'
  //       }
  //     },
  //     {
  //       path: 'scroll',
  //       component: () => import('_p/index/views/components-demo/scroll/index.vue'),
  //       name: 'ScrollDemo',
  //       meta: {
  //         title: '滚动'
  //       }
  //     },
  //     {
  //       path: 'count-to',
  //       component: () => import('_p/index/views/components-demo/count-to/index.vue'),
  //       name: 'CountToDemo',
  //       meta: {
  //         title: '数字动画'
  //       }
  //     },
  //     {
  //       path: 'search',
  //       component: () => import('_p/index/views/components-demo/search/index.vue'),
  //       name: 'SearchDemo',
  //       meta: {
  //         title: '查询'
  //       }
  //     },
  //     {
  //       path: 'button',
  //       component: () => import('_p/index/views/components-demo/button/index.vue'),
  //       name: 'ButtonDemo',
  //       meta: {
  //         title: '按钮'
  //       }
  //     },
  //     {
  //       path: 'editor',
  //       component: () => import('_p/index/views/components-demo/editor/index.vue'),
  //       name: 'EditorDemo',
  //       meta: {
  //         title: '富文本编辑器'
  //       }
  //     },
  //     {
  //       path: 'markdown',
  //       component: () => import('_p/index/views/components-demo/markdown/index.vue'),
  //       name: 'MarkdownDemo',
  //       meta: {
  //         title: 'markdown编辑器'
  //       }
  //     }
  //   ]
  // },
  // // {
  // //   path: '/table-demo',
  // //   component: Layout,
  // //   redirect: '/table-demo/basic-usage',
  // //   name: 'TableDemo',
  // //   meta: {
  // //     title: '表格',
  // //     icon: 'table',
  // //     alwaysShow: true
  // //   },
  // //   children: [
  // //     // {
  // //     //   path: 'test',
  // //     //   component: () => import('_p/index/views/table-demo/test'),
  // //     //   name: 'test',
  // //     //   meta: {
  // //     //     title: 'test'
  // //     //   }
  // //     // },
  // //     {
  // //       path: 'basic-usage',
  // //       component: () => import('_p/index/views/table-demo/basic-usage/index.vue'),
  // //       name: 'BasicUsage',
  // //       meta: {
  // //         title: '基础用法'
  // //       }
  // //     },
  // //     {
  // //       path: 'table-ellipsis',
  // //       component: () => import('_p/index/views/table-demo/table-ellipsis/index.vue'),
  // //       name: 'TableEllipsis',
  // //       meta: {
  // //         title: '单元格自动省略'
  // //       }
  // //     },
  // //     {
  // //       path: 'table-load',
  // //       component: () => import('_p/index/views/table-demo/table-load/index.vue'),
  // //       name: 'TableLoad',
  // //       meta: {
  // //         title: '远程加载数据'
  // //       }
  // //     },
  // //     {
  // //       path: 'table-border',
  // //       component: () => import('_p/index/views/table-demo/table-border/index.vue'),
  // //       name: 'TableBorder',
  // //       meta: {
  // //         title: '带边框'
  // //       }
  // //     },
  // //     {
  // //       path: 'table-merge',
  // //       component: () => import('_p/index/views/table-demo/table-merge/index.vue'),
  // //       name: 'TableMerge',
  // //       meta: {
  // //         title: '表格行/列合并'
  // //       }
  // //     },
  // //     {
  // //       path: 'custom-menu',
  // //       component: () => import('_p/index/views/table-demo/custom-menu/index.vue'),
  // //       name: 'CustomMenu',
  // //       meta: {
  // //         title: '自定义筛选菜单'
  // //       }
  // //     },
  // //     {
  // //       path: 'edit-cell',
  // //       component: () => import('_p/index/views/table-demo/edit-cell/index.vue'),
  // //       name: 'EditCell',
  // //       meta: {
  // //         title: '可编辑单元格'
  // //       }
  // //     },
  // //     {
  // //       path: 'edit-row',
  // //       component: () => import('_p/index/views/table-demo/edit-row/index.vue'),
  // //       name: 'EditRow',
  // //       meta: {
  // //         title: '可编辑行'
  // //       }
  // //     },
  // //     {
  // //       path: 'table-tree',
  // //       component: () => import('_p/index/views/table-demo/table-tree/index.vue'),
  // //       name: 'TableTree',
  // //       meta: {
  // //         title: '树形数据展示'
  // //       }
  // //     },
  // //     {
  // //       path: 'table-expanded',
  // //       component: () => import('_p/index/views/table-demo/table-expanded/index.vue'),
  // //       name: 'TableExpanded',
  // //       meta: {
  // //         title: '可展开'
  // //       }
  // //     },
  // //     {
  // //       path: 'fixed-header',
  // //       component: () => import('_p/index/views/table-demo/fixed-header/index.vue'),
  // //       name: 'FixedHeader',
  // //       meta: {
  // //         title: '固定头和列'
  // //       }
  // //     }
  // //   ]
  // // },
  // {
  //   path: '/directives-demo',
  //   component: Layout,
  //   redirect: '/directives-demo/clipboard',
  //   name: 'DirectivesDemo',
  //   meta: {
  //     title: '自定义指令',
  //     icon: 'clipboard',
  //     alwaysShow: true
  //   },
  //   children: [
  //     {
  //       path: 'clipboard',
  //       component: () => import('_p/index/views/directives-demo/clipboard/index.vue'),
  //       name: 'ClipboardDemo',
  //       meta: {
  //         title: 'Clipboard'
  //       }
  //     }
  //   ]
  // },
  // {
  //   path: '/hooks-demo',
  //   component: Layout,
  //   redirect: '/hooks-demo/watermark',
  //   name: 'HooksDemo',
  //   meta: {
  //     title: 'Hooks',
  //     icon: 'international',
  //     alwaysShow: true
  //   },
  //   children: [
  //     {
  //       path: 'watermark',
  //       component: () => import('_p/index/views/hooks-demo/useWatermark/index.vue'),
  //       name: 'UseWatermarkDemo',
  //       meta: {
  //         title: 'UseWaterMark'
  //       }
  //     },
  //     {
  //       path: 'useScrollTo',
  //       component: () => import('_p/index/views/hooks-demo/useScrollTo/index.vue'),
  //       name: 'UseScrollToDemo',
  //       meta: {
  //         title: 'UseScrollTo'
  //       }
  //     }
  //   ]
  // },
  // {
  //   path: '/icon',
  //   component: Layout,
  //   name: 'IconsDemo',
  //   meta: {},
  //   children: [
  //     {
  //       path: 'index',
  //       component: () => import('_p/index/views/icons/index.vue'),
  //       name: 'Icons',
  //       meta: {
  //         title: '图标',
  //         icon: 'icon'
  //       }
  //     }
  //   ]
  // },
  {
    path: '/level',
    component: Layout,
    redirect: '/level/menu1/menu1-1/menu1-1-1',
    name: 'Level',
    meta: {
      title: '多级菜单缓存',
      icon: 'nested'
    },
    children: [
      {
        path: 'menu1',
        name: 'Menu1Demo',
        component: getParentLayout('Menu1Demo'),
        redirect: '/level/menu1/menu1-1/menu1-1-1',
        meta: {
          title: 'Menu1'
        },
        children: [
          {
            path: 'menu1-1',
            name: 'Menu11Demo',
            component: getParentLayout('Menu11Demo'),
            redirect: '/level/menu1/menu1-1/menu1-1-1',
            meta: {
              title: 'Menu1-1',
              alwaysShow: true
            },
            children: [
              {
                path: 'menu1-1-1',
                name: 'Menu111Demo',
                component: () => import('_p/index/views/level/Menu111.vue'),
                meta: {
                  title: 'Menu1-1-1'
                }
              }
            ]
          },
          {
            path: 'menu1-2',
            name: 'Menu12Demo',
            component: () => import('_p/index/views/level/Menu12.vue'),
            meta: {
              title: 'Menu1-2'
            }
          }
        ]
      },
      {
        path: 'menu2',
        name: 'Menu2Demo',
        component: () => import('_p/index/views/level/Menu2.vue'),
        meta: {
          title: 'Menu2'
        }
      }
    ]
  },
  // {
  //   path: '/example-demo',
  //   component: Layout,
  //   name: 'ExampleDemo',
  //   meta: {
  //     alwaysShow: true,
  //     icon: 'example',
  //     title: '综合实例'
  //   },
  //   children: [
  //     {
  //       path: 'example',
  //       component: () => import('_p/index/views/example-demo/example/index.vue'),
  //       name: 'Example',
  //       meta: {
  //         title: '列表综合实例'
  //       }
  //     }
  //   ]
  // }
]

const router = createRouter({
  history: createWebHashHistory(),
  strict: true,
  routes: constantRouterMap as RouteRecordRaw[]
})

export function resetRouter(): void {
  const resetWhiteNameList = [
    'RedirectRoot',
    'Redirect',
    'Login',
    'Root',
    'Dashboard',
    'Page404'
  ]
  router.getRoutes().forEach((route) => {
    const { name } = route
    if (name && !resetWhiteNameList.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name)
    }
  })
}

export function setupRouter(app: App<Element>) {
  app.use(router)
}

export default router