import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { useAuthStore } from '@/stores/modules/auth'
import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config'
import { basicRouter, errorRouter } from '@/routers/modules/basicRouter'
import NProgress from '@/config/nprogress'
import { findMenuByName, getFlatRouters } from '@/utils'
import sysPermissionsRouter from '@/routers/modules/sysPermissions'
import customerRouter from '@/routers/modules/customer'
import sysConfigRouter from '@/routers/modules/sysConfig'

/**
 * @description 📚 路由参数配置简介
 * @param path ==> 路由菜单访问路径
 * @param name ==> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
 * @param redirect ==> 路由重定向地址
 * @param component ==> 视图文件路径
 * @param meta ==> 路由菜单元信息
 * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
 * @param meta.rootSign ==> 《重要》控制该路由属于哪个菜单权限组如果是菜单的路由，不用设置，默认为字段name，如果该路由不是菜单路由，则必须设置，否则会跳转至403
 * @param meta.activeMenu ==> 当前路由为详情页时，需要高亮的菜单
 * @param meta.keepAlive ==> 当前路由是否缓存
 * @param meta.showFooter ==> 是否显示页面footer
 * @param meta.affix ==> 菜单是否固定在标签页中 (首页通常是固定项)
 * */

// 所有业务模块的路由
export const asyncRoutes = [...sysPermissionsRouter, ...customerRouter, ...sysConfigRouter]

// 所有路由
export const routes = [...basicRouter, ...asyncRoutes, ...errorRouter]

// 扁平化后的路由表
const flatRoutes = getFlatRouters(routes)

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  strict: false,
  scrollBehavior() {
    return {
      el: '#app',
      top: 0,
      behavior: 'smooth'
    }
  }
})

/**
 * @description 路由拦截 beforeEach
 * */
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()
  const authStore = useAuthStore()

  // 1.NProgress 开始
  NProgress.start()

  // 2.动态设置标题
  const title = import.meta.env.PUBLIC_GLOB_APP_TITLE
  document.title = to.meta.title ? `${to.meta.title} - ${title}` : title

  // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由到登陆页
  if (to.path.toLocaleLowerCase() === LOGIN_URL) {
    if (userStore.token) {
      next(from.fullPath)
      return
    }
    next()
    return
  }

  // 4.判断是否有 Token，没有重定向到 login 页面
  if (!userStore.token) {
    next({ path: LOGIN_URL, replace: true })
    return
  } else {
    // 再判断是否存在userId，有token，同时有用户信息，放行
    let userInfo = userStore.userInfo
    if (userInfo && userInfo?.userId) {
      handlePermission()
    } else {
      // 请求用户信息接口
      await userStore.setUserInfo()
      const userInfo = userStore.userInfo
      if (userInfo && userInfo?.userId) {
        handlePermission()
      } else {
        next({ path: LOGIN_URL, replace: true })
        return
      }
    }
  }

  // 处理用户访问路由权限
  function handlePermission() {
    // 判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
    if (ROUTER_WHITE_LIST.includes(to.path)) {
      next()
      return
    }
    // 判断当前访问的路由是否存在与路由表里
    const isRoute = flatRoutes.some((v: RouteRecordRaw) => to.name && v.name === to.name)
    if (!isRoute) {
      // 访问的路由确实不存在，跳转404
      next({ path: '/404' })
      return
    }
    // 判断用户是否有访问路由的权限，没有则跳转403
    // const userAccessRules = authStore.routeNameMap // 用户菜单权限所拥有的可访问路由标识集合：{ customer: true, workbench: true }
    // if (!userAccessRules[to.name as string] && !userAccessRules[to.meta?.rootSign as string]) {
    //   console.log(998)
    //   next({ path: '/403' })
    //   return
    // } else {
    // 存储当前激活菜单，如果当前不需要tab，则激活activeMenu
    authStore.setMenuSign(to.meta?.activeMenu ? (to.meta.activeMenu as string) : (to.name as string))
    const activeMenuId = findMenuByName(authStore.authMenuListGet, to.name as string)?.menuId ?? ''
    if (activeMenuId) {
      authStore.setActiveMenuId(activeMenuId)
      localStorage.setItem('activeMenuId', activeMenuId)
    }

    next()
    return
    // }
  }
})

/**
 * @description 路由跳转错误
 * */
router.onError(error => {
  NProgress.done()
  console.warn('路由错误', error.message)
})

/**
 * @description 路由跳转结束
 * */
router.afterEach(() => {
  NProgress.done()
})

export default router
