<template>
  <div class="left-menu-item">
    <template v-for="m in list">
      <el-menu-item
        v-if="!m.children || m.children.length === 0"
        :key="m.path"
        :index="m.path"
        :style="{ display: !m.meta.hidden ? 'block' : 'none' }"
      >
        <i :class="[m.meta.icon]" />
        <span v-if="!isCollapse" slot="title" class="menu_span">{{ m.meta.name }}</span>
      </el-menu-item>
      <el-submenu v-else :key="m.path" :index="m.path">
        <template slot="title">
          <i :class="[m.meta.icon]" />
          <span v-if="!isCollapse" slot="title" class="menu_span">{{ m.meta.name }}</span>
        </template>
        <left-menu-item :key="m.path" :list="m.children" />
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'LeftMenuItem',
  props: {
    list: {
      type: Array,
      default: () => {}
    },
    isCollapse: Boolean
  }
};
</script>

<style lang="less" scoped></style>
