<template>
  <template v-for="item in props.menu" :key="item.key">
    <template v-if="isShow(item)">
      <!-- 一级菜单 -->
      <el-menu-item :index="item.url" v-if="!hasChildren(item)">
        <template #title>
          <template v-if="props.showIcon && item.icon">
            <el-icon style="color: white">
              <component :is="item.icon"></component>
            </el-icon>
          </template>
          <span style="color: white">{{ item.name }}</span>
        </template>
      </el-menu-item>
      <!-- 二级菜单 -->
      <el-sub-menu :index="item.url" v-else>
        <template #title>
          <template v-if="props.showIcon && item.icon">
            <el-icon style="color: white">
              <component :is="item.icon"></component>
            </el-icon>
          </template>
          <span style="color: white">{{ item.name }}</span>
        </template>
        <Menu :menu="item.children" :showIcon="false"></Menu>
      </el-sub-menu>
    </template>
  </template>
</template>
<script setup>
const props = defineProps({
  menu: Object,
  showIcon: {
    type: Boolean,
    default: true
  }
});

const hasChildren = ({ children }) => {
  return Array.isArray(children) && children.length;
};

const isShow = ({ show }) => {
  return show === 1;
};
</script>

<style>
/* 菜单栏背景 */
.el-menu-item {
  background-color: #2b333e !important;
}
/* 一级菜单移入移出 */
.el-menu-item:hover {
  background-color: none !important;
}
/* 二级菜单移入移出 */
.el-sub-menu:hover {
  background-color: none !important;
}

/* 二级菜单2移入移出 */
.el-sub-menu__title:hover {
  background-color: rgba(0,0,0,0) !important;
}

/* 选中背景颜色 */
.el-menu-item.is-active {
  background-color: #ed1f65 !important;
}

/* 二级菜单开展箭头图标 */
.el-sub-menu__icon-arrow>svg{
  color:white;
}
</style>
