<template>
  <li
    :class="{
      'mm-dropdown-item--title': title,
      'mm-dropdown-item__hover': showOnHover,
      'mm-dropdown-item--active': active,
    }"
    class="mm-dropdown-item"
    @click="handleClick"
    @mouseenter="handleEnter"
    @mouseleave="handleLeave">
    <div
      v-if="divider"
      class="mm-dropdown-item-divider"></div>
    <div
      v-if="title || $slots.title"
      class="mm-dropdown-item-title">
      <slot name="title">
        {{ title }}
      </slot>
    </div>
    <div
      :class="{
        'mm-dropdown-item-content--disabled': disabled,
        'mm-dropdown-item-content--selected': selected,
      }"
      class="mm-dropdown-item-content">
      <template v-if="getRight() || getLeft() || showArrow">
        <div
          class="mm-dropdown-item-left">
          <slot v-bind="scopedProps"></slot>
          <slot
            v-bind="scopedProps"
            name="left"></slot>
        </div>
        <div
          v-if="getRight() || showArrow"
          class="mm-dropdown-item-right">
          <slot
            v-bind="scopedProps"
            name="right">
            <ui-icon
              :class="{
                'mm-dropdown-item-arrow': true,
                'mm-dropdown-item-arrow__reverse': selected,
              }"
              name="chevronright"
              size="12px"></ui-icon>
          </slot>
        </div>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </div>
  </li>
</template>

<script>
import Icon from "../icon"
import config from "../../managers/config"

config.defaults({
  "DropdownItem.hideOnClick": true,
  "DropdownItem.hideOnSubClick": false,
})

export default {
  components: {
    "ui-icon": Icon,
  },
  inject: {
    dropdownParent: {
      from: "mm-dropdown",
      default: null,
    },
  },
  props: {
    name: {
      type: [String, Number],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Boolean,
      default: false,
    },
    divider: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    showArrow: {
      type: Boolean,
      default: false,
    },
    showOnHover: {
      type: Boolean,
      default: false,
    },
    hideOnClick: {
      type: Boolean,
      default: () => config.get("DropdownItem.hideOnClick"),
    },
    hideOnSubClick: {
      type: Boolean,
      default: () => config.get("DropdownItem.hideOnSubClick"),
    },
    onClick: {
      type: Function,
      default: () => {},
    },
    onSubClick: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      active: false,
      hover: false,
    }
  },
  computed: {
    scopedProps() {
      return {
        setActive: this.setActive,
        active: this.active,
        selected: this.selected,
        disabled: this.disabled,
        name: this.name,
        hover: this.hover,
      }
    },
  },
  methods: {
    handleClick(event) {
      if (this.disabled) {
        return
      }

      // 嵌套情况
      if (this.$parent.isDropdown) {
        this.$emit("subClick", event, this.name, this)
        this.onSubClick(event, this.name, this)
        if (this.hideOnSubClick) {
          this.dropdownParent.$emit("item-click", event, this)
        }
        return
      }

      if (!this.dropdownParent) {
        return
      }

      this.$emit("click", event, this.name, this)
      this.onClick(event, this.name, this)

      if (this.hideOnClick) {
        this.dropdownParent.$emit("item-click", event, this)
      }
    },

    setActive(active) {
      this.active = Boolean(active)
    },

    getRight() {
      return this.$scopedSlots.right || this.$slots.right
    },
    getLeft() {
      return this.$scopedSlots.left || this.$slots.left
    },

    handleEnter() {
      this.hover = true
    },

    handleLeave() {
      this.hover = false
    },
  },
}
</script>
