<!--
 * @Author: Billy
 * @Date: 2022-01-04 11:46:31
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-06 17:40:39
 * @Description: 请输入
-->

<template>
  <div class="menu">
    <el-menu
      v-if="menuItems && menuItems.length"
      :default-active="activeIndex"
      @select="handleSelect"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="(item, index) in menuItems">
        <el-submenu
          v-if="item.children && item.children.length"
          :index="item.routerName"
          :key="index"
        >
          <template slot="title">
            <i :class="item.iconClass"></i>
            <span>{{ item.title }}</span>
          </template>
          <template v-for="(subItem, index2) in item.children">
            <el-menu-item :index="subItem.routerName" :key="index2">
              {{ subItem.title }}
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.routerName" :key="index">
          <i :class="item.iconClass"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  props: {
    // 主菜单栏的信息数组
    menuItems: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 当前激活菜单的 index (支持.sync)
    defaultActive: { type: String },
  },
  computed: {
    activeIndex: {
      get() {
        if (this.activeIndex_) return this.activeIndex_;
        else return this.menuItems[0].routerName;
      },
      set(val) {
        // this.$emit("update:defaultActive", val); // 暂时用不上
        this.activeIndex_ = val;
      },
    },
  },
  watch: {
    defaultActive: function (val, oldVal) {
      this.activeIndex_ = val;
    },
  },
  data() {
    return {
      activeIndex_: this.defaultActive,
    };
  },
  methods: {
    handleSelect(index, indexPath) {
      // console.log("index :>> ", index);
      // console.log("indexPath :>> ", indexPath);
      const routerName = index;
      this.$safePush({ name: routerName });
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
  },
};
</script>
<style lang="scss" scoped>
.el-menu {
  border-right: none; // 取消垂直导航菜单默认的右边框
  &.el-menu--horizontal {
    border-bottom: none; // 取消水平导航菜单默认的下边框
  }
}
</style>