<template>
  <li class="hn-side-menu-item"
    role="sideMenuItem"
    tabindex="-1"
    :style="[paddingStyle, itemStyle, { backgroundColor }]"
    :class="{
      'is-active': active,
      'is-disabled': disabled
    }"
    @click="handleClick"
    @mouseenter="onMouseEnter"
    @focus="onMouseEnter"
    @blur="onMouseLeave"
    @mouseleave="onMouseLeave"
  >
    <template
      v-if="parentSideMenu.$options.componentName === 'HnSideMenu' && rootSideMenu.collapse && $slots.title">
      <i 
        v-if="this.active" 
        class="hn-side-menu-item__mark"
        :style="{backgroundColor: activeMarkColor}" />
      <hn-tooltip
        effect="dark"
        placement="right">
        <div slot="content"><slot name="title"></slot></div>
        <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
          <slot></slot>
        </div>
      </hn-tooltip>
    </template>
    <template v-else>
      <i 
        v-if="this.active" 
        class="hn-side-menu-item__mark"
        :style="{backgroundColor: activeMarkColor}" />
      <slot></slot>
      <slot name="title"></slot>
    </template>
  </li>
</template>
<script>
import SideMenuMixin from './side-menu-mixin';
import HnTooltip from 'heiner-ui/packages/tooltip';
import Emitter from 'heiner-ui/src/mixins/emitter';
export default {
  name: 'HnSideMenuItem',
  componentName: 'HnSideMenuItem',
  mixins: [SideMenuMixin, Emitter],
  components: { HnTooltip },
  props: {
    index: {
      default: null,
      validator: val => typeof val === 'string' || val === null
    },
    route: [String, Object],
    disabled: Boolean
  },
  computed: {
    active() {
      return this.index === this.rootSideMenu.activeIndex;
    },
    hoverBackground() {
      if (this.active) {
        return this.rootSideMenu.activeBackground;
      }
      return this.rootSideMenu.hoverBackground;
    },
    backgroundColor() {
      if (this.active) {
        return this.rootSideMenu.activeBackground;
      }
      // 一级菜单
      if (this.parentSideMenu.$options.componentName === 'HnSideMenu') {
        return this.rootSideMenu.backgroundColor;
      }
      // 二级及以下菜单
      return this.rootSideMenu.openedBackground;
    },
    activeMarkColor() {
      return this.rootSideMenu.activeMarkColor;
    },
    activeTextColor() {
      return this.rootSideMenu.activeTextColor;
    },
    textColor() {
      return this.rootSideMenu.textColor;
    },
    hoverTextColor() {
      if (this.active) {
        return this.activeTextColor;
      }
      return this.rootSideMenu.hoverTextColor;
    },
    itemStyle() {
      const style = {
        color: this.active ? this.activeTextColor : this.textColor
      };
      return style;
    }
  },
  methods: {
    onMouseEnter() {
      this.$el.style.backgroundColor = this.hoverBackground;
      this.$el.style.color = this.hoverTextColor;
    },
    onMouseLeave() {
      this.$el.style.backgroundColor = this.backgroundColor;
      this.$el.style.color = this.itemStyle.color;
    },
    handleClick() {
      if (!this.disabled) {
        this.dispatch('HnSideMenu', 'side-item-click', this);
        this.$emit('click', this);
      }
    }
  },
  mounted() {
    this.parentSideMenu.addSideItem(this);
    this.rootSideMenu.addSideItem(this);
  },
  beforeDestroy() {
    this.parentSideMenu.removeSideItem(this);
    this.rootSideMenu.removeSideItem(this);
  }
};
</script>