<template>
    <li ref="contextMenu" @click="handleClick(item, $event)" :class="itemClass" :title="item[field]">
        <div class="label" :class="(item.hoverBtn||item.chooseIcon)?'withHoverBtn':''">
            <i :class="iconClasses" 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 class="chooseIcon" v-if="item.chooseIcon" :title="item.chooseIcon.title">
              <i :class="item.chooseIcon.iconClass"></i>
            </div>
            <div class="hoverBtn" v-if="item.hoverBtn" :title="item.hoverBtn.title" @click="hoverBtnHandleClick(item.hoverBtn,$event)">
              <i :class="item.hoverBtn.iconClass"></i>
            </div>
        </div>
        <ul class="context-menu" v-if="item.children" :style="contextMenuStyle">
            <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'],
  data(){
    return {
      contextMenuStyle:"",
    }
  },
  computed:{
    iconClasses() {
      const iconClass = this.item.iconClass;
      // 如果是 Element UI 图标（以 el- 开头），添加额外的 el-icon 类以便样式调整
      if (iconClass && iconClass.startsWith('el-')) {
        return [iconClass, 'el-icon'];
      }
      // 其他图标添加 iconfont 类
      return ['iconfont', iconClass];
    },
    itemClass() {
      let item =this.item;
      return {
        // 'item-active':(item.id!=null)&&this.activeKey==item.id,
        'item-active':item.actived,
        'item-disabled': this.isItemDisabled(item),
        'item-divided': item.divided
      };
    },
    activeKey(){
      return this.getActiveKey();
    },
  },
  watch:{
    "item.children":{
      handler:function(val,old){
        setTimeout(()=>{
          if(!this.$refs.contextMenu){
            this.contextMenuStyle= "";
          }else{
            let _domRect=this.$refs.contextMenu.getBoundingClientRect();
            this.contextMenuStyle= "max-height:calc(100vh - "+(_domRect.top+30)+"px)";
          }
        },100);
      },
      immediate: true,
      deep: true
    }
  },
  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{

      }

    },
    hoverBtnHandleClick(item,event){
      event.stopPropagation();
      if (typeof item.handler !== 'undefined') {
        item.handler(event);
      }
    },
    

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

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

<style scoped lang="less">
li{
  &.item-divided {
  border-top: 1px solid #e6e6e6;
  margin-top: 5px;
  }
  .el-icon{
    font-size: 16px;
    font-style: normal;
    margin-top: 5px;
    margin-right: 5px;
  }
}
</style>