<template>
  <hive-submenu
    v-if="citemData.children && citemData.children.length > 0"
    :key="sec"
    :index="sec"
  >
    <template slot="title">
      {{ citemData.name + sec }}
    </template>
    <template slot="child">
      <item
        v-for="(item, index) in citemData.children"
        :item-data="item"
        :key="sec + '-' + index"
        :sec="sec + '-' + index"
      />
    </template>
  </hive-submenu>
  <hive-menu-item
    v-else
    :key="sec"
    :index="sec"
  >
    <hive-icon icon="delete" />
    {{ citemData.name + sec }}
  </hive-menu-item>
</template>

<script>
import item from './item';

export default {
  name: 'Item',
  components: {
    item
  },
  props: {
    itemData: Object,
    sec: [String, Number]
  },
  computed: {
    citemData() {
      return this.itemData;
    }
  }
};
</script>
