<template>
  <Submenu :name="`${parentItem.key}`">
    <template slot="title">
      <i v-if="parentItem.customIcon" :class="['icon', 'iconfont', parentItem.customIcon]"/>
      <Icon v-else :type="parentItem.icon || ''"/>
      <span>{{ parentItem.title }}</span>
    </template>
    <template v-for="item in parentItem.children">
      <side-menu-item v-if="item.children && item.children.length > 0 && !item.menuLeaf" :key="`menu-${item.key}`" :parent-item="item"></side-menu-item>
      <menu-item v-else :name="item.key" :key="`menu-${item.key}`">
        <i v-if="item.customIcon" :class="['icon', 'iconfont', item.customIcon]"/>
        <Icon v-else :type="item.icon || ''"/>
        <span>{{ item.title }}</span></menu-item>
    </template>
  </Submenu>
</template>
<script>
  export default {
    name: 'SideMenuItem',
    methods: {
    },
    props: {
      parentItem: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>
<style>

</style>
