<!--
 * @Author: Devin
 * @Date: 2022-11-17 11:32:14
 * @LastEditors: Devin
 * @LastEditTime: 2022-11-28 19:58:43
 * @Description: 菜单项
-->
<template>
  <template v-if="subMenu?.children">
    <el-sub-menu>
      <template #title>
        <common-icon
          :class="isCollapse ? '' : 'mr-10'"
          :size="18"
          :name="subMenu.icon"
        ></common-icon>
        <span>{{ subMenu.label }}</span>
      </template>
      <template v-for="menu in subMenu.children" :key="menu.name">
        <menu-item :sub-menu="menu"></menu-item>
      </template>
    </el-sub-menu>
  </template>
  <el-menu-item v-else :index="subMenu.path">
    <!-- {{ subMenu.label }} -->
    <!-- <template #title>
      
    </template> -->
    <common-icon
      :class="isCollapse ? '' : 'mr-10'"
      :size="18"
      :name="subMenu.icon"
    ></common-icon>
    <template #title>
      <span>{{ subMenu.label }}</span>
    </template>
  </el-menu-item>
</template>

<script lang="ts">
export default {
  name: 'MenuItem',
  props: {
    subMenu: {
      type: Object,
      default: () => {}
    },
    isCollapse: {
      type: Boolean,
      default: () => false
    }
  }
};
</script>

<style laneg="scss" scoped>
/* .el-menu-item {
  color: rgba(255, 255, 255, 0.6);
} */
.mr-10 {
  margin-right: 10px;
}

.el-menu-item {
  color: #455a74;
  height: 40px !important;
  line-height: 40px !important;
}
.menu-icon {
  margin-right: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.menu-icon {
  margin-right: 5px;
  margin-top: -2px;
}
</style>