<template>
  <fragment>
    <template v-for="item in menus">
      <!-- 递归组件，循环渲染children -->
      <el-submenu
        v-if="item.children && item.children.length && checkMenu(item.children) && item.type === 'MENU'"
        :index="item.name"
        :key="item.id"
      >
        <template #title>
          <i :class="item.icon" class="fs16 mr15"></i>
          <span>{{ item[$i18n.locale] }}</span>
        </template>
        <side-menus :menus="item.children" />
      </el-submenu>
      <!-- 只有一级菜单 -->
      <el-menu-item
        v-if="
          (!item.children ||
            !item.children.length ||
            (item.children && item.children.length && !checkMenu(item.children))) &&
            item.type === 'MENU'
        "
        :key="item.id"
        :index="item.name"
        class="custom-menu-item"
      >
        <template #title>
          <i :class="item.icon" class="fs16 mr15"></i>
          <span>{{ item[$i18n.locale] }}</span>
        </template>
      </el-menu-item>
    </template>
  </fragment>
</template>

<script>
import { Fragment } from "vue-fragment";
export default {
  name: "sideMenus",
  props: {
    menus: {
      type: Array,
      default: () => [],
    },
  },
  components: { Fragment },
  methods: {
    // 判断菜单children是否存在type为MENU的条件，如存在则列为二级菜单，否则该有child菜单为一级菜单
    checkMenu(arr) {
      return !!arr.find((item) => item.type === "MENU");
    },
  },
};
</script>
