<template>
  <a-sub-menu :key="menuInfo.key">
    <template #icon><icon :icon="menuInfo.icon" /></template>
    <template #title>{{ menuInfo.title }}</template>
    <template v-for="item in menuInfo.children" :key="item.key">
      <template v-if="!item.children">
        <a-menu-item :key="item.key">
          <template #icon>
            <icon :icon="item.icon ? item.icon : ''" />
          </template>
          {{ item.title }}
        </a-menu-item>
      </template>
      <template v-else>
        <sub-menu :menu-info="item" :key="item.key" />
      </template>
    </template>
  </a-sub-menu>
</template>

<script>
  import { Icon } from './icon';
  export default {
    name: 'SubMenu',
    components: {
      Icon,
    },
    props: {
      menuInfo: {
        type: Object,
        default: () => ({}),
      },
    },
  };
</script>
