<template>
  <template v-if="!item.hidden" >
    <template
      v-if="hasOneShowingChild(item.children, item)"
    >
      <a-menu-item :key="item.path" @click="changeRoute(item)" >
        <Title :title="item.name" :icon="item.icon" ></Title>
      </a-menu-item>
    </template>

      <a-sub-menu v-else :key="item.path" >
        <template #title>
          <Title :title="item.name" :icon="item.icon" ></Title>
        </template>
        <sidebar-item
          v-for="child in item.children"
          :key="child.path"
          :item="child"
          :base-path="resolvePath(child.path)"
        />
      </a-sub-menu>
  </template>
</template>

<script setup lang="ts" >
import path from 'path-browserify'
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useAppRouter } from '@/store/router'

import Title from './title'

const appRouter = useAppRouter()
const RootRouter = useRouter()
const props = defineProps({
  // 每一个router Item
  item: {
    type: Object,
    required: true
  },
  // 基础路径，用于拼接
  basePath: {
    type: String,
    default: ''
  }
})

const changeRoute = (route: ROUTER.RoutesProps) => {
  if (route.link) {
    window.open(route.path)
  } else {
    RootRouter.push(route.path)
  }
}

const state = reactive({
  onlyOneChild: null
})

const { onlyOneChild } = toRefs(state)

const hasOneShowingChild = (children = [], parent: any) => {
  const showingChildren = children.filter((item) => {
    if (item.hidden) {
      return false
    } else {
      state.onlyOneChild = item
      return true
    }
  })

  if (showingChildren.length === 1) {
    return true
  }

  if (showingChildren.length === 0) {
    state.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
    return true
  }

  return false
}

function isExternal (path: string) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

const resolvePath = (routePath: string) => {
  if (isExternal(routePath)) {
    return routePath
  }
  if (isExternal(props.basePath)) {
    return props.basePath
  }
  return path.resolve(props.basePath, routePath)
}
</script>

<style lang="less" >

</style>
