import { constantRoutes } from '@/router'
import { getMenuList } from '@/api/system'

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }) {
    return new Promise(resolve => {
      getMenuList().then(response => {
        const menuData = response.data || []
        const accessedRoutes = filterAsyncRoutes(menuData)
        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
      }).catch(() => {
        commit('SET_ROUTES', constantRoutes)
        resolve(constantRoutes)
      })
    })
  }
}

function filterAsyncRoutes(routes) {
  return routes.filter(route => {
    if (route.component && route.component !== '') {
      route.component = loadComponent(route.component)
    } else {
      route.component = () => import('@/views/home/index.vue')
    }
    if (route.children && route.children.length > 0) {
      route.children = filterAsyncRoutes(route.children)
    }
    return true
  })
}

function loadComponent(componentPath) {
  const path = componentPath.replace(/^\//, '')
  const componentMap = {
    'home/index.vue': () => import('@/views/home/index.vue'),
    'dashboard/demo/index.vue': () => import('@/views/dashboard/demo/index.vue'),
    'dashboard/order/index.vue': () => import('@/views/dashboard/order/index.vue'),
    'dashboard/cost/index.vue': () => import('@/views/dashboard/cost/index.vue'),
    'dashboard/energy/index.vue': () => import('@/views/dashboard/energy/index.vue'),
    'screens/index.vue': () => import('@/views/screens/index.vue'),
    'screens/acid-rolling/index.vue': () => import('@/views/screens/acid-rolling/index.vue'),
    'reports/index.vue': () => import('@/views/reports/index.vue'),
    'reports/acid-rolling/index.vue': () => import('@/views/reports/acid-rolling/index.vue'),
    'reports/acid-stop/index.vue': () => import('@/views/reports/acid-stop/index.vue'),
    'system/user/index.vue': () => import('@/views/system/user/index.vue'),
    'system/role/index.vue': () => import('@/views/system/role/index.vue'),
    'system/menu/index.vue': () => import('@/views/system/menu/index.vue'),
    'system/config/index.vue': () => import('@/views/system/config/index.vue'),
    'data-source/index.vue': () => import('@/views/data-source/index.vue')
  }
  return componentMap[path] || (() => import('@/views/home/index.vue'))
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}