<template>
  <MenuGroup :title="`${parentTitle}`">
    <template v-for="item in children">
      <template v-if="item.children && item.children.length === 1">
        <side-menu-group-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item">
        </side-menu-group-item>
        <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`">
          <Icon :type="item.children[0].icon || ''" />
          <span>{{ showTitle(item.children[0]) }}</span>
        </menu-item>
      </template>
      <template v-else>
        <side-menu-group-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item">
        </side-menu-group-item>
        <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
          <span>{{ showTitle(item) }}</span>
        </menu-item>
      </template>
    </template>
  </MenuGroup>
</template>
<script>
import mixin from './mixin'
import itemMixin from './item.mixin'
import SideMenuGroupItem from './SideMenuGroupItem.vue'
export default {
  name: 'SideMenuItem',
  mixins: [mixin, itemMixin],
  components: {
    SideMenuGroupItem,
  },
}
</script>
<style lang="less" scoped>
.ivu-menu-item-group {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
/deep/.ivu-menu-item-group-title {
  padding-left: 0px !important;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  padding-left: 10px;
  color: #2a2a2a;
}
</style>
