<template>
  <el-sub-menu v-if="data?.children && data?.children.length > 0" :index="data?.completeRoute">
    <template #title>
      <i :class="data?.meta?.icon" v-if="data?.meta?.icon"></i>
      <span>{{ data?.metaTitle }}</span>
    </template>
    <menu-item-v2 :data="item" v-for="item in data?.children"/>
  </el-sub-menu>
<!--  <el-menu-item v-else-if="data?.children && data?.children.length === 1" :index="data?.children[0]?.completeRoute">-->
<!--    <i :class="data?.children[0]?.meta?.icon" v-if="data?.children[0]?.meta?.icon"></i>-->
<!--    <span>{{ data?.children[0]?.metaTitle }}</span>-->
<!--  </el-menu-item>-->
  <el-menu-item v-else :index="data?.completeRoute">
    <i :class="data?.meta?.icon" v-if="data?.meta?.icon"></i>
    <span>{{ data?.metaTitle }}</span>
  </el-menu-item>
</template>

<script setup name='MenuItemV2' lang="ts">

const props = defineProps({
  data: Object
})

</script>

<style scoped lang="scss">
i {
  margin-right: 5px;
}
</style>

//4224
