<template>
  <ul class="child-ul-wrapper" :class="float">
    <li v-for="i in itemchildren" :key="i.name" class="child-li-wrapper">
      <div v-if="i.children && i.children.length > 0" class="has-child">
        <div class="parent-name btn-wrapper-simple">
          <i :class="i.icoName ? i.icoName : ''" class="nav-icon-fontawe"></i>
          <span class="nav-name-right">{{ i.btnName }}</span>
          <i class="icon"></i>
        </div>
        <tree-child-component :itemchildren="i.children" :float="float" @childhandler="fnHandler" />
      </div>
      <div v-else>
        <div class="no-child-btn btn-wrapper-simple" @click.stop="fnHandler(i, $event)">
          <i :class="i.icoName ? i.icoName : ''" class="nav-icon-fontawe"></i>
          <span class="nav-name-right">{{ i.btnName }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeChildComponent',
  props: ['itemchildren', 'float'],
  methods: {
    fnHandler(item, event) {
      this.$emit('childhandler', item, event)
    },
  },
}
</script>
