<template>
  <li
    :class="className"
    @click="clickHandler"
  >
    <slot />
  </li>
</template>

<script>
const name = 'hive-dropdown-item';
export default {
  name,
  inject: ['hiveDropdown'],
  props: {
    /**
     * item 的唯一标识
     */
    index: String,
    /**
     * 是否禁用
     */
    disabled: Boolean,
    /**
     * 显示分割线
     */
    divided: Boolean
  },
  computed: {
    className() {
      return [
        'hive-dropdown-item',
        'hive-dropdown__content-item',
        {
          'hive-dropdown__content-item--disabled': this.disabled,
          'hive-dropdown__content-item--divided': this.divided
        }
      ];
    }
  },
  methods: {
    clickHandler() {
      if (this.disabled) return;
      this.hiveDropdown.$emit('dropdown-item:click', this.index);
    }
  }
};
</script>
