<template>
  <li>
    <div
      class="el-dropdown-menu__item"
      :class="{
        'is-disabled': disabled || readonly,
        'el-dropdown-menu__item--divided': divided,
      }"
      @click="handleClick"
      :aria-disabled="disabled"
      :tabindex="disabled ? null : -1"
    >
      <i :class="icon" v-if="icon"></i>
      <slot>
        {{ currentLabel }}
      </slot>
    </div>
    <div class="divide-box" v-if="divided"></div>
  </li>
</template>
<script>
import Emitter from "modesign-ui/src/mixins/emitter";

export default {
  name: "ElDropdownItem",

  mixins: [Emitter],

  componentName: "ElDropdownItem",

  inject: ["dropdownMenu"],

  props: {
    value: [String, Number],
    label: [String, Number],
    command: {},
    disabled: Boolean,
    divided: Boolean,
    icon: String,
  },
  computed: {
    currentLabel() {
      return this.label || (this.isObject ? "" : this.value);
    },
    readonly() {
      return this.dropdownMenu.readonly;
    }
  },
  methods: {
    handleClick(e) {
      if (!this.disabled || !this.readonly) {
        this.dispatch("ElDropdown", "menu-item-click", [this.command, this]);
      }
    },
  },
};
</script>
