<template>
  <el-sub-menu v-if="hasChild && !item.hiddenChild" :index="item.path">
    <template #title>
      <span>{{ item.meta?.title }}</span>
    </template>

    <template v-for="items in filterHiddenChild(item.children)" :key="items.path">
      <sider-bar-item :item="items" />
    </template>
  </el-sub-menu>

  <el-menu-item v-else :index="item.path">{{ item.meta?.title }}</el-menu-item>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SiderBarItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const hasChild = computed(() => props.item?.children && props.item.children.length)

    const filterHiddenChild = (child) => child.filter(v => !!!v.hidden)

    return {
      hasChild,
      filterHiddenChild
    }
  }
})
</script>
<style lang="scss" scoped></style>
