<template>
  <div v-if="!item.hidden" class="protal-layout-navbar-item">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild?.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild?.menuName" :to="resolvePath(onlyOneChild.menuPath)">
        <el-menu-item :index="resolvePath(onlyOneChild.menuPath)" :class="{'submenu-title-noDropdown':!isNest}">
          <item :icon="onlyOneChild.menuIcon" :title="t(onlyOneChild.menuName)" />
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.menuPath)" popper-append-to-body>
      <template #title>
        <item v-if="item.menuName" :icon="item.menuIcon" :title="t(item.menuName)" />
      </template>
      <navbar-item
        v-for="child in item.children"
        :key="child.menuPath"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.menuPath)"
        class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script lang="ts">
import { isExternal } from '@/portal/utils/validate'
import Item from './Item.vue'
import AppLink from './Link.vue'
import { SyncDataMenuItem } from '@/types/module'
import { defineComponent, PropType, ref } from 'vue-demi'
import { useI18n } from 'vue-i18n'

export function resolve (
  relative: string,
  base: string,
  append?: boolean
): string {
  const firstChar = relative.charAt(0)
  if (firstChar === '/') {
    return relative
  }

  if (firstChar === '?' || firstChar === '#') {
    return base + relative
  }

  const stack = base.split('/')

  if (!append || !stack[stack.length - 1]) {
    stack.pop()
  }

  const segments = relative.replace(/^\//, '').split('/')
  for (let i = 0; i < segments.length; i++) {
    const segment = segments[i]
    if (segment === '..') {
      stack.pop()
    } else if (segment !== '.') {
      stack.push(segment)
    }
  }

  if (stack[0] !== '') {
    stack.unshift('')
  }

  return stack.join('/')
}

export default defineComponent({
  name: 'NavbarItem',
  components: {
    Item,
    AppLink
  },
  props: {
    item: {
      type: Object as PropType<SyncDataMenuItem>,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    const onlyOneChild = ref<(SyncDataMenuItem & { noShowingChildren?: boolean }) | undefined>()

    function hasOneShowingChild (children: Array<SyncDataMenuItem> = [], parent: SyncDataMenuItem) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          onlyOneChild.value = item
          return true
        }
      })

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

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

      return false
    }

    function resolvePath (routePath: string) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(props.basePath)) {
        return props.basePath
      }
      return resolve(routePath || '.', props.basePath, true)
    }

    const { t } = useI18n()

    return {
      onlyOneChild,
      hasOneShowingChild,
      resolvePath,
      t
    }
  }
})
</script>
<style lang="scss">
.protal-layout-navbar-item {
  .sub-el-icon{
    width: 1.3em;
    height: 1.3em;

  }
  .sub-el-icon:before {
    font-size: 1.3em;
  }
  .el-icon-arrow-down:before {
    font-size: 18px;
    font-weight: bold;
    color: #cccccc;
  }
}

</style>
