<template>
  <div>
    <template v-if="!item.children || (item.children && item.children.length === 0)">
      <el-menu-item
        @click="goRoute(item.path || item.routePath)"
        :index="item.path || item.routePath"
      >
        <template #title>
          {{ item?.meta?.title || item.menuName }}
        </template>
      </el-menu-item>
    </template>
    <el-sub-menu v-else :index="item.path || item.routePath">
      <template #title>
        <el-icon v-if="item.icon">
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item?.meta?.title || item.menuName }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path || item.routePath"
        :item="child"
        class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
});

const router = useRouter();

function goRoute(path: any){
  router.push(path).catch(err => {
    console.log(err);
  });
}

</script>

<style lang="scss" scoped>
.nest-menu {
  span{
    font-size: 13px !important;
    
  }
  li {
    font-size: 13px !important;
  }
}
</style>
