<template>
  <div class="el-bio-menu" :class="{collapse}">
    <menu-item
      v-for="(navItem, navItemIndex) in menu"
      :key="navItemIndex"
      :nav-item="navItem"
      :defaultActive="defaultActive"
      :collapse="collapse"
      :iconKey="iconKey"
      @clickMenuItem="menuItemClick"/>
  </div>
</template>

<script>
// 目前BioMenu 最多支持3层菜单
import menuItem from './menuItem';
export default {
  name: 'BioMenu',

  props: {
    menu: {
      type: Array,
      required: true
    },

    collapse: {
      type: Boolean,
      default: false,
      required: true
    },

    defaultActive: {
      required: true
    },

    iconKey: {
      type: String,
      default: 'iconname'
    }
  },

  components: {
    menuItem
  },

  data() {
    return {
      activeIndex: ''
    };
  },

  watch: {
    defaultActive: {
      immediate: true,
      handler() {
        this.menu.forEach(row => this.openFunction(row));
      }
    }
  },

  methods: {
    menuItemClick(item) {
      this.$emit('menuItemClick', item);
    },

    openFunction(nav) {
      if (this.defaultActive.allCode.includes(nav.code)) {
        this.$set(nav, 'collapse', true);
      }

      if (nav.children) {
        nav.children.forEach(row => {
          this.openFunction(row);
        });
      }
    }
  }
};
</script>
