<template>
  <div class="recursion-menu">
    <template v-for="list in menuList">
      <xl-submenu
        v-if="list.children && list.children.length>0"
        :key="list.id"
        :index="list.id"
      >
        <template slot="title">
          <i :class="list.icon" />
          <span>{{ list.resName }}</span>
        </template>
        <recursion-menu :menu-list="list.children" />
      </xl-submenu>
      <xl-menu-item
        v-else
        :key="list.id"
        :index="list.id"
      >
        <i :class="list.icon" />
        <span slot="title">{{ list.resName }}</span>
      </xl-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'RecursionMenu',
  props: {
    menuList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {

  }
}
</script>

<style>
</style>
