<template>
  <div>
    <div v-for="(item, index) in data" :key="index" class="menu_group">
      <el-submenu :index="item.path" v-if="item[children].length > 0 && (visibleContrary ? !item[visible] : item[visible])" :class="isCollapse ? 'nest_menu' : ''">
        <template slot="title">
          <div class="menu_title">
            <i class="fireflyiconLevel1" :class="item.icon?'el-icon-' + item.icon:'el-icon-default'" v-if="item.level == 1" />
            <i class="firefly-el-icon" :class="'el-icon-' + item.icon" v-else />
            <span slot="title" :style="{ fontWeight: item.level == 1 ? 'bold' : 'normal'}">{{ item[title] }}</span>
          </div>
        </template>
        <menu-item
          :data="item[children]"
          :key="index"
          :children="children"
          :title="title"
          :sideHideWidth="sideHideWidth"
          :sideOpenWidth="sideOpenWidth"
          :isCollapse="isCollapse"
          :visible="visible"
          :visibleContrary="visibleContrary"
          class="menu_list"
          @activeIndex="toRouterPath"
        ></menu-item>
      </el-submenu>
      <el-menu-item :key="index" :index="item.path" class="noChildMenu" v-if="item[children].length == 0 && (visibleContrary ? !item[visible] : item[visible])">
        <div class="menu_title" @click="toRouterPath(item.path)">
          <i class="fireflyiconLevel1" :class="item.icon?'el-icon-' + item.icon:'el-icon-default'" v-if="item.level == 1" />
          <i class="firefly-el-icon" :class="'el-icon-' + item.icon" v-else />
          <span slot="title" :style="{ fontWeight: item.level == 1 ? 'bold' : 'normal'}">{{ item[title] }}</span>
        </div>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
export default {
  name: 'menuItem',
  created() {},
  methods: {
    toRouterPath(path) {
      this.$emit('activeIndex', path);
    },
    // 点击title的方法
    onTitle() {
      this.$emit('titleClick');
    }
  },
  props: {
    // 判断是否取反
    visibleContrary: {
      type: Boolean,
      default: true
    },
    // 菜单是否隐藏(必填)
    visible: {
      type: String,
      default: null,
      require: true
    },
    // 控制菜单是收起还是展开(非必填)
    isCollapse: {
      type: Boolean,
      default: true
    },
    // 侧边宽度隐藏(非必填)
    sideHideWidth: {
      type: String,
      default: '88px'
    },
    // 侧边宽度打开(非必填)
    sideOpenWidth: {
      type: String,
      default: ''
    },
    // 路由子节点 默认children(非必填)
    children: {
      type: String,
      default: 'children'
    },
    title: {
      type: String,
      default: 'title'
    },
    data: {
      type: Array,
      default: []
    }
  }
};
</script>
<style lang="scss" scoped>
@import '../../../css/fireflyMenu.scss';
</style>
