<template>
  <n-menu
    :mode="menuMode"
    :value="(currentRoute.title && currentRoute.meta.activeMenu) || currentRoute.title"
    :options="getMenuOptions"
    @update:value="handleMenuSelect"
  />
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed, defineProps, toRaw } from 'vue'
import { isExternal } from '@/utils/is.js'
import { usePermissionStore } from '@/store/modules/permission'

const props = defineProps({
  menuMode: {
    type: String,
    default: 'vertical'
  }
})

const menuMode = toRaw(props.menuMode)

const router = useRouter()
const { currentRoute } = router
const permissionStore = usePermissionStore()
const getMenuOptions = computed(() => {
  return generateOptions(permissionStore.routes, '')
})

function resolvePath(basePath, path) {
  if (isExternal(path)) return path
  return (
    '/' +
    [basePath, path]
      .filter((path) => !!path && path !== '/')
      .map((path) => path.replace(/(^\/)|(\/$)/g, ''))
      .join('/')
  )
}

function generateOptions(routes, basePath) {
  // console.log('routes', routes)
  const options = []
  routes.forEach((route) => {
    if (route.title && !route.isHidden) {
      const curOption = {
        label: (route.meta && route.meta.title) || route.title,
        key: route.title,
        path: resolvePath(basePath, route.path)
      }
      if (route.children && route.children.length) {
        curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
      }
      options.push(curOption)
    }
  })
  return options
}

function handleMenuSelect(key, item) {
  if (isExternal(item.path)) {
    window.open(item.path)
  } else {
    router.push(item.path)
  }
}

</script>
<style scoped lang='scss'>
</style>
