<template>
  <el-sub-menu v-if="data?.children && data?.children.length > 0"
               :index="data?.completeRoute"
               :router="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 :index="data?.completeRoute"
                :router="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;
}

a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
  color: #000; /* 去除默认的颜色和点击后变化的颜色 */
}
</style>
