import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'

import globals from '@/globals'

// Layouts
import Layout from '@/layout/LayoutHorizontalUNSidenav'
// import Layout from '@/layout/Layout3'

Vue.use(Router)
Vue.use(Meta)

const router = new Router({
  base: '/',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/pages/Login/Login')
    },
    {
      path: '/',
      component: Layout,
      meta: {
        // 添加该字段，表示进入这个路由是需要登录的
        requireAuth: true
      },
      children: [
        /* {
          path: '',
          name: 'home',
          component: () => import('@/pages/Home/Home'),
          meta: {
            requireAuth: true
          }
        }, */
        {
          path: 'project',
          name: 'project',
          component: () => import('@/pages/Project/Project'),
          meta: {
            requireAuth: true
          }
        },
        {
          path: 'personnel',
          // name: 'personnel',
          component: () => import('@/pages/Personnel'),
          children: [
            {
              path: '',
              name: 'personnel-list',
              component: () => import('@/pages/Personnel/PersonnelV1.1'),
              meta: {
                requireAuth: true
              }
            },
            {
              path: 'add',
              name: 'personnel-add',
              component: () => import('@/pages/PersonnelForm/PersonnelForm'),
              meta: {
                requireAuth: true
              }
            }, {
              path: 'import',
              name: 'personnel-import',
              component: () => import('@/pages/Personnel/component/PersonnelImport'),
              meta: {
                requireAuth: true
              }
            }
          ],
          meta: {
            requireAuth: true
          }
        },
        {
          path: 'user',
          component: () => import('@/pages/User/UserContainer'),
          children: [
            {
              path: '',
              name: 'user',
              component: () => import('@/pages/User/User')
            },
            {
              path: 'add',
              name: 'userForm',
              component: () => import('@/pages/User/component/UserForm')
            }
          ]
        },
        {
          path: 'role',
          component: () => import('@/pages/Role/Role'),
          meta: {
            requireAuth: true
          }
        },
        {
          path: 'device',
          meta: {
            requireAuth: true
          },
          component: () => import('@/pages/DeviceManagement'),
          children: [
            {
              path: '',
              name: 'device-management-list',
              component: () =>
                import('@/pages/DeviceManagement/DeviceManagementList'),
              meta: {
                requireAuth: true
              }
            },
            {
              path: 'add',
              name: 'device-add',
              component: () => import('@/pages/DeviceManagement/DeviceAdd'),
              meta: {
                requireAuth: true
              }
            }
          ]
        },
        {
          path: 'mapdevice',
          meta: {
            requireAuth: true
          },
          component: () => import('@/pages/MapDeviceManagement'),
          children: [
            {
              path: '',
              name: 'map-device-list',
              component: () =>
                import('@/pages/MapDeviceManagement/MapDeviceManagementList'),
              meta: {
                requireAuth: true
              }
            },
            {
              path: 'mapadd',
              name: 'map-add',
              component: () => import('@/pages/MapDeviceManagement/MapAdd'),
              meta: {
                requireAuth: true
              }
            },
            {
              path: 'add',
              name: 'map-device-add',
              component: () =>
                import('@/pages/MapDeviceManagement/MapDeviceAdd'),
              meta: {
                requireAuth: true
              }
            }
          ]
        },
        {
          path: 'dic',
          name: 'dic',
          component: () =>
            import('@/pages/Dic'),
          meta: {
            requireAuth: true
          },
          children: [{
            path: '',
            meta: {
              requireAuth: true
            },
            component: () =>
              import('@/pages/Dic/Dic')
          }, {
            path: 'add',
            meta: {
              requireAuth: true
            },
            component: () =>
              import('@/pages/Dic/Form')
          }]
        }
      ]
    },
    {
      path: '/401',
      component: () => import('@/pages/Error/401.vue')
    },
    {
      path: '*',
      component: () => import('@/pages/Error/404.vue')
    }
  ]
})

router.afterEach(() => {
  // 主页动画
  const splashScreen = document.querySelector('.app-splash-screen')
  if (splashScreen) {
    splashScreen.style.opacity = 0
    setTimeout(
      () =>
        splashScreen &&
        splashScreen.parentNode &&
        splashScreen.parentNode.removeChild(splashScreen),
      300
    )
  }
  // On small screens collapse sidenav
  if (
    window.layoutHelpers &&
    window.layoutHelpers.isSmallScreen() &&
    !window.layoutHelpers.isCollapsed()
  ) {
    setTimeout(() => window.layoutHelpers.setCollapsed(true, true), 10)
  }

  // Scroll to top of the page
  globals().scrollTop(0, 0)
})

router.beforeEach((to, from, next) => {
  // Set loading state
  document.body.classList.add('app-loading')

  // Add tiny timeout to finish page transition
  setTimeout(() => next(), 10)
})

export default router