<template>
  <el-tooltip placement="top" effect="dark" :content="contentText" :disabled="isDisabled">
    <li class="el-menu-item ellipsis"
      role="menuitem"
      tabindex="-1"
      :style="[itemStyle, { backgroundColor }]"
      :class="{
        'is-active': active,
        'is-disabled': disabled,
        'border-left': borderLeft
      }"
      @click="handleClick"
      @mouseenter="onMouseEnter"
      @focus="onMouseEnter"
      @blur="onMouseLeave"
      @mouseleave="onMouseLeave"
    >
      <el-tooltip
        
        v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
        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>
      </el-tooltip>
      <template v-else>
        <slot></slot>
        <slot name="title"></slot>
      </template>
    </li>
  </el-tooltip>
</template>
<script>
  import Menu from './menu-mixin';
  import ElTooltip from 'element-ui/packages/tooltip';
  import Emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: 'ElMenuItem',

    componentName: 'ElMenuItem',

    mixins: [Menu, Emitter],

    components: { ElTooltip },

    props: {
      index: {
        default: null,
        validator: val => typeof val === 'string' || val === null
      },
      route: [String, Object],
      disabled: Boolean
    },
    computed: {
      isDisabled() {
        let slots = this.$slots;
        if (slots.default && slots.default.length && slots.default[0].text && slots.default[0].text.length > 8) {
          return false;
        } else if (slots.title && slots.title.length && slots.title[0].children && slots.title[0].children.length && slots.title[0].children[0].text && slots.title[0].children[0].text.length > 8) {
          return false;
        }
        return true;
      },
      contentText() {
        let slots = this.$slots;
        if (slots.default && slots.default.length && slots.default[0].text && slots.default[0].text) {
          return slots.default && slots.default.length && slots.default[0].text && slots.default[0].text;
        } else if (slots.title && slots.title.length && slots.title[0].children && slots.title[0].children.length && slots.title[0].children[0].text && slots.title[0].children[0].text) {
          return slots.title && slots.title.length && slots.title[0].children && slots.title[0].children.length && slots.title[0].children[0].text && slots.title[0].children[0].text;
        }
        return '';
      },
      active() {
        return this.index === this.rootMenu.activeIndex;
      },
      hoverBackground() {
        return this.rootMenu.hoverBackground;
      },
      backgroundColor() {
        return this.rootMenu.backgroundColor || '';
      },
      activeTextColor() {
        return this.rootMenu.activeTextColor || '';
      },
      textColor() {
        return this.rootMenu.textColor || '';
      },
      mode() {
        return this.rootMenu.mode;
      },
      itemStyle() {
        const style = {
          color: this.active ? this.activeTextColor : this.textColor
        };
        if (this.mode === 'horizontal' && !this.isNested) {
          style.borderBottomColor = this.active
            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
            : 'transparent';
        }
        return style;
      },
      isNested() {
        return this.parentMenu !== this.rootMenu;
      },
      borderLeft() {
        return this.rootMenu.borderLeft;
      }
    },
    methods: {
      onMouseEnter() {
        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
        this.$el.style.backgroundColor = this.hoverBackground;
      },
      onMouseLeave(e) {
        e.target && e.target.blur();
        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
        this.$el.style.backgroundColor = this.backgroundColor;
      },
      handleClick() {
        if (!this.disabled) {
          this.dispatch('ElMenu', 'item-click', this);
          this.$emit('click', this);
        }
      }
    },
    mounted() {
      this.parentMenu.addItem(this);
      this.rootMenu.addItem(this);
      console.log(this.$slots.title);
    },
    beforeDestroy() {
      this.parentMenu.removeItem(this);
      this.rootMenu.removeItem(this);
    }
  };
</script>
