<template>
  <div class='menu-wrapper'>
    <template v-for="item in menuData">
      <el-submenu v-if="item.children&&!item.hidden" :key="item.id" :index="item.actionUrl">
        <template slot="title">
            <Icon :type="item.icon || 'icon-dian'"></Icon>
            <span slot="title">{{item.name}}</span>
        </template>
        <template v-for="child in item.children">
          <sidebar-item class="nest-menu" v-if="!item.hidden&&!isLimitLevel&&child.children" :menuData='[child]' :key="child.id"></sidebar-item>
          <el-menu-item v-else-if="!child.hidden" :index="child.actionUrl" :key="child.id">
            <Icon :type="child.icon || 'icon-dian'"></Icon>
            <span slot="title">{{child.name}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else-if="!item.hidden" :index="item.actionUrl" :key="item.id">
        <Icon :type="item.icon"></Icon>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
    name: 'SidebarItem',
    props: {
        menuData: {
            type: Array
        },
        isLimitLevel: {
            type: Boolean
        }
    }
};
</script>

<style>

</style>
