import { defineStore } from 'pinia'
import { ConstantStore } from '@/enum/store'
import { reactive, watch } from 'vue'
import RootRouter from '@/router'
import VueRouter from 'vue-router'

const initAppRouterState: ROUTER.RouterRecords = {
  navbar: {
    route: [],
    selectPath: []
  },
  sider: {
    route: [],
    selectPath: '',
    openKeys: []
  }
}
export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
  const appRouter = reactive<ROUTER.RouterRecords>(initAppRouterState)

  const initAppRouter = () => {
    appRouter.navbar.route = RootRouter.options.routes.map((route: any) => {
      return {
        path: route.link ? route.path.substr(1) : route.path,
        name: route.name,
        link: !!route.link,
        redirect: route.redirect || ''
      }
    }).filter(_ => _.path !== '/login')

    appRouter.sider.route = RootRouter.options.routes[1].children!
  }

  if (appRouter.navbar.route.length === 0) {
    initAppRouter()
  }

  const changeNavbarRoute = (route: ROUTER.RoutesProps) => {
    if (route.link) {
      window.open(route.path)
    } else {
      appRouter.navbar.selectPath = [route.path]
      RootRouter.push(route.path)
    }
  }

  watch(
    () => RootRouter.currentRoute,
    () => {
      console.log('RootRouter.currentRoute:', RootRouter.currentRoute)
    }
  )

  return {
    router: appRouter,
    changeNavbarRoute
  }
})