<template>
    <li @click="handleClick(item, $event)" :class="itemClass" :title="item[field]">
        <div class="label">
            <i class="iconfont" :class="item.iconClass" v-if="item.iconClass"></i>
            <span class="item-label" v-html="item.html||item[field]"></span>
            <span class="children-indicator iconfont icon-arrow-right trigger" v-if="item.children"></span>
        </div>
        <ul class="context-menu" v-if="item.children">
            <context-menu-item
                    v-for="(childItem, index) in item.children"
                    :item="childItem"
                    :field="field"
                    :key="index">
            </context-menu-item>
        </ul>
    </li>
</template>

<script>
export default {
  name: 'context-menu-item',
  props: {
    item: {
      type: Object,
    },
    field:{
      type:String,
      default:'title'
    }
  },
  inject:['getActiveKey','setActiveKey'],
  computed:{
    itemClass() {
      let item =this.item;
      return {
        // 'item-active':(item.id!=null)&&this.activeKey==item.id,
        'item-active':item.actived,
        'item-disabled': this.isItemDisabled(item)
      };
    },
    activeKey(){
      return this.getActiveKey();
    }
  },
  methods: {
    handleClick(item, event) {

      // !item.children&&this.setActiveKey(item.id);
      if (typeof item.handler !== 'undefined') {
      
        if (!this.isItemDisabled(item)) {
          item.handler(event);
        } else {
          
          event.stopPropagation();
        }

      }else{

      }

    },

    

    isItemDisabled(item) {
      if (typeof item.disabled !== 'undefined') {
        return item.disabled;
      }

      return false;
    },
  },
};
</script>