// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/Layout/index.vue'


Vue.use(VueRouter)

// export const roleMap = {
//     '-1':'運維管理員',
//     '1':'普通用戶',
//     '2':'項目經(jīng)理',
//     '3':'部門管理員',
//     '4':'綜合部管理員',
//     '5':'部門領(lǐng)導(dǎo)'
// }

// 公共路由
export const routes = [
  {
    path: '/',
    name: 'redirect',
    component: Layout,
    hidden: true, // 隱藏菜單
    redirect: "/homePage", // 用戶在地址欄輸入 '/' 時會自動重定向到 /homePage 頁面
  },
  {
    path: '/homePage',
    component: Layout,
    redirect: "/homePage/index",
    meta: {
      title: "首頁",
    },
    children: [
      {
        path: 'index',
        name: 'homePageIndex',
        meta: {
          title: "首頁",
        },
        component: () => import('@/views/homePage/index.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error/401.vue'),
    hidden: true
  },
]


// 動態(tài)權(quán)限路由
export const dynamicRoutes = [
  {
    path: '/admin',
    meta: {
      title: "系統(tǒng)管理",
    },
    component: Layout,
    permission: ['-1', '2', '3', '4', '5'], // all 所有角色都可以訪問  1 普通用戶  2 項目經(jīng)理  3 部門管理員  4 綜合部管理員  5  部門領(lǐng)導(dǎo)  -1 項目運維管理員
    children: [
      {
        path: 'user',
        name: 'userIndex',
        meta: {
          title: "用戶管理",
        },
        permission: ['-1', '2', '3', '4', '5'],
        component: () => import('@/views/admin/user/index.vue')
      },
      {
        path: 'role',
        name: 'roleIndex',
        meta: {
          title: "角色管理",
        },
        permission: ['-1', '2', '3', '4', '5'],
        component: () => import('@/views/admin/role/index.vue'),
        children: [
          {
            path: 'add',
            name: 'addRole',
            meta: {
              title: "添加角色",
            },
            permission: ['-1',, '3', '4', '5'],
            component: () => import('@/views/admin/user/index.vue')
          },
          {
            path: 'update',
            name: 'updateRole',
            meta: {
              title: "編輯角色",
            },
            permission: ['-1', '2', '3', '4', '5'],
            component: () => import('@/views/admin/role/index.vue')
          }
        ]
      }
    ]
  },
  {
    path: '/tableEcho',
    meta: {
      title: "表格管理",
    },
    component: Layout,
    permission: ['-1', '1', '2'],
    children: [
      {
        path: 'test',
        name: 'tableEchoIndex',
        meta: {
          title: "表格測試",
        },
        permission: ['-1', '1', '2'],
        component: () => import('@/views/tableEcho/index.vue'),
        children: [
          {
            path: 'add',
            name: 'addTable',
            hidden: true,
            meta: {
              title: "新增測試",
            },
            permission: ['-1', '2'],
            component: () => import('@/views/tableEcho/add.vue')
          }
        ]
      },
    ],
  },
]

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

export default router

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getStore } from '@/utils/store';

const whiteList = ['/login', '/404', '/401'];

router.beforeEach((to, from, next) => {
  let token = getStore('token');

  if (token) {
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
      if (store.getters.roles.length === 0) {
        // 判斷當前用戶是否已拉取完user_info信息
        store.dispatch('GetInfo').then((res) => {
          console.log('--------------', res);
          router.addRoutes(res) // 動態(tài)添加可訪問路由表
          next({ ...to, replace: true }) // hack方法 確保addRoutes已完成
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next(`/`)
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 沒有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登錄白名單，直接進入
      next()
    } else {
      next(`/login`) // 否則全部重定向到登錄頁
    }
  }
})

res.forEach( route => {
	router.addRoute(route);
})

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { routes, dynamicRoutes } from "@/router";
import { login, getInfo, logout } from "@/api/user";
import { setStore, clearStore } from '@/utils/store';


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    routes,
    token: "",
    roleType: "",
    roles: [],
    permissions: [],
    sidebarRouters: [],

  },
  getters: {
    token: state => state.token,
    roles: state => state.roles,
    permissions: state => state.permissions,
    sidebarRouters: state => state.sidebarRouters,
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
    SET_USERINFO: (state, user) => {
      state.userInfo = user;
    },
    SET_ROLETYPE: (state, roleType) => {
      state.roleType = roleType;
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles;
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions;
    },
    SET_ROUTE: (state, sidebarRouters) => {
      state.sidebarRouters = sidebarRouters;
    },
  },
  actions: {
    Login({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(res => {
          setToken(res.data.token);
          setStore('token', res.data.token);
          commit('SET_TOKEN', res.data.token);
          resolve();
        }).catch(error => {
          reject(error);
        })
      })
    },
    // 獲取用戶信息
    GetInfo({ commit }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          console.log('res::: ', res);
          if (res.data.code === 0 || 200) {
            const user = res.data.sysUser;
            const roleType = res.data.roleType;
            commit('SET_USERINFO', user);

            // roleType 用戶所用的權(quán)限級別 1 普通用戶  2 項目經(jīng)理  3 部門管理員  4 綜合部管理員  5  部門領(lǐng)導(dǎo)  -1 項目運維管理員
            setStore('ROLE_TYPE', roleType);
            if (res.data.roles) { // 驗證返回的roles是否為真
              commit('SET_ROLES', res.data.roles);
              commit('SET_PERMISSIONS', res.data.permissions);
            } else {
              commit('SET_ROLES', ['ROLE_DEFAULT']);
            }
            // 過濾路由
            let newRouters = filterRouter(roleType, dynamicRoutes);

            // 連接公共路由
            const sidebarRouters = routes.concat([...newRouters])

            commit('SET_ROUTE', sidebarRouters);

            resolve(sidebarRouters);
          } else {
            reject(error);
          }
        }).catch(error => {
          reject(error);
        })
      })
    },
    // 退出系統(tǒng)
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
          clearStore('token');
          clearStore('userInfo')
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
  },
  modules: {
  }
})

function filterRouter(roleType, routes) {
  return routes.filter(item => {  // filter 方法創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素,測試未通過的元素會自動剔除
    // 如果一級路由的 permission 含有當前角色的 roleType
    if (item.permission.includes(roleType)) {

      // 如果該一級路由含有子路由時,遞歸調(diào)用該函數(shù)判斷子路由是否有權(quán)限
      if (Array.isArray(item.children) && item.children.length > 0) {

        // 遞歸調(diào)用該函數(shù),最后接受校驗通過后的子路由
        let newChildren = filterRouter(roleType, item.children);

        // 如果子路由有值,則賦值給當前路由的 children,剔除校驗不通過的子路由
        if (newChildren.length > 0) {
          item.children = newChildren;
        } else if (newChildren.length === 0) { // 如果子路由為空,則刪除該路由的 children 屬性
          delete item.children;
        }
      }

      // 最后返回 true, 表示該路由通過權(quán)限校驗
      return true;
    }
  })
}