<template>
  <div class="project-menu-item-container">
    <template>
      <!-- 有下级菜单 -->
      <template v-if="checkHasChidren">
        <el-submenu :index="createMenuIndex(menuItem.nodeValue)" ref="projectSubMenuItem" class="project-sub-menu-item"
          :class="`project-sub-menu-item-level-${menuItem.level}`" :disabled="menuItem.originData && menuItem.originData.disabled">
          <template slot="title">
            <!-- 预留插槽 -->
            <div class="project-sub-menu-title" :class="{'project-sub-menu-title-next' : menuItem.level !== 1}" :style="menuStyles(menuItem)" :title="menuItem.nodeName">
              <slot :name="`${menuItem.nodeName}-${menuItem.level}`" :data="menuItem">
                <img src="" alt="" v-if="menuItem.originData && menuItem.originData.icon">
                <div class="project-sub-menu-title-text">{{menuItem.nodeName}}</div>
              </slot>
            </div>
          </template>
          <!-- 子集递归 -->
          <project-menu-item v-for="(child,index) of menuItem.children" :menuItem="child" :key="`${child.nodeValue}-${child.level}`"></project-menu-item>
        </el-submenu>
      </template>
      <!-- 无子集菜单 -->
      <template v-else>
        <el-menu-item :index="createMenuIndex(menuItem.nodeValue)" class="project-only-menu-item"
          :class="`project-only-menu-item-level-${menuItem.level}`" :disabled="menuItem.originData && menuItem.originData.disabled">
          <template slot="title">
            <div class="project-only-menu-title-container">
              <!-- 预留插槽 -->
              <div class="project-only-menu-title" :class="{'project-only-menu-title-next' : menuItem.level !== 1}" :style="menuStyles(menuItem)" :title="menuItem.nodeName">
                <slot :name="`${menuItem.nodeName}-${menuItem.level}`" :data="menuItem">
                  <img src="" alt="" v-if="menuItem.originData && menuItem.originData.icon">
                  <div class="project-only-menu-title-text">{{menuItem.nodeName}}</div>
                </slot>
              </div>
            </div>
          </template>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  name: "projectMenuItem",
  props: {
    menuItem: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  data() {
    return {

    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {
    checkHasChidren() {
      return !!(this.menuItem && this.menuItem?.children?.length);
    },
  },
  //方法集
  methods: {
    menuStyles(menuItem) {
      const { level } = menuItem;
      const styles = {

      };
      let paddingLeft = 0;
      if (level == 1) {
        paddingLeft = 12;
        styles["font-weight"] = "bold";
      } else {
        paddingLeft = (level - 1) * 12 + 20;
      }
      styles["padding-left"] = `${paddingLeft}px`;
      return styles;
    },
    createMenuIndex(index) {
      if (index || index == "0") {
        return index.toString();
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.project-menu-item-container {
}
</style>
