<template>
  <div
    :class="_class"
    v-on="_itemEvents"
  >
    <div
      :class="_contentClass"
      v-on="_contentEvents"
    >
      <div
        class="hive-menu-item__contentinner"
        :style="_customStyle"
        v-on="_contentInnerEvents"
      >
        <span
          class="hive-menu-item__content-icon"
          v-if="_hasIcon"
        >
          <!-- 菜单项 icon -->
          <slot name="icon">
            <HiveIcon :icon="icon" />
          </slot>
        </span>
        <span class="hive-menu-item__content-content">
          <!-- 菜单项内容 -->
          <slot />
        </span>
        <HiveIcon
          class="hive-menu-item__content-carret"
          icon="carret_down"
          v-if="isMenu"
        />
      </div>
    </div>
    <div
      class="hive-menu-item__submenu"
      v-if="isMenu"
      v-show="_isRealExpanded"
    >
      <slot name="children" />
    </div>
  </div>
</template>

<script>
import HiveIcon from '../icon';
import TreeNodeMixin from '../tree/mixins/tree-node';

const name = 'hive-menu-item';

export default {
  name,
  components: { HiveIcon },
  mixins: [ TreeNodeMixin ],
  inject: ['menu'],
  props: {
    /**
     * @ignore
     */
    isMenu: Boolean,
    /**
     * 菜单项头部图标，mode 为 vertical 时，需要提供以作折叠时显示
     */
    icon: String,
    /**
     * 菜单项唯一标识
     */
    index: String,
    /**
     * Vue Router 路径对象
     */
    route: [Object, String]
  },
  data() {
    return {
      collapseExpanded: false,
      contentInnerHovered: false
    };
  },
  computed: {
    _isSelected() {
      return this.isMenu ? false : this.menu.active === this.index;
    },
    _class() {
      return [
        name,
        `${name}--mode-${this.menu.mode}`,
        `${name}--deep-${this.deep}`,
        `${name}--paddingdeep-${this._paddingDeep}`,
        {
          [`${name}--ismenu`]: this.isMenu,
          [`${name}--selected`]: this._isSelected,
          [`${name}--childrenselected`]: this._isHalfSelected,
          [`${name}--hoverexpanded`]: this._isCollapsedDeep0Submenu && this.collapseExpanded
        }
      ];
    },
    _contentClass() {
      return [
        `${name}__content`,
        {
          [`${name}__content--selected`]: this._isSelected,
          [`${name}__content--childrenselected`]: this._isHalfSelected,
          [`${name}__content--ismenu`]: this.isMenu,
          [`${name}__content--expanded`]: this._isExpanded
        }
      ];
    },
    _customStyle() {
      const { itemStyle, activeItemStyle, hoverItemStyle, activeSubItemStyle, activeCollapsedItemStyle } = this.menu;
      let caledActiveItemStyle = this._isCollapsedDeep0 ? activeCollapsedItemStyle : activeItemStyle;

      let customStyle = itemStyle;
      if (this._isSelected) {
        customStyle = caledActiveItemStyle;
      } else if (this.contentInnerHovered) {
        customStyle = hoverItemStyle;
      } else if (this.isMenu && this._isHalfSelected) {
        customStyle = activeSubItemStyle;
      }
      return customStyle;
    },
    _itemEvents() {
      if (this._isCollapsedDeep0Submenu && this.isMenu) {
        return {
          mouseenter: () => this.onMouseEnter(),
          mouseleave: () => this.onMouseLeave()
        };
      }
      return null;
    },
    _contentEvents() {
      if (!this._isCollapsedDeep0Submenu) {
        return {
          click: () => this.onContentClick()
        };
      }
      return null;
    },
    _contentInnerEvents() {
      const { hoverItemStyle } = this.menu;
      if (hoverItemStyle) {
        return {
          mouseover: () => this.onContentInnerMouseOver(),
          mouseout: () => this.onContentInnerMouseOut()
        };
      }
      return null;
    },
    _hasIcon() {
      return this.menu.collapsable && this.deep === 0;
    },
    _isCollapsed() {
      return (
        this.menu.mode === 'horizontal' ||
        (this.menu.mode === 'vertical' && this.menu.dataCollapsed)
      );
    },
    _isCollapsedDeep0() {
      return (
        this.deep === 0 && this._isCollapsed
      );
    },
    _isCollapsedDeep0Submenu() {
      return (
        this._isCollapsedDeep0 && this.isMenu
      );
    },
    _paddingDeep() {
      return this._isCollapsed && this.deep > 0 ? this.deep - 1 : this.deep;
    },
    _isRealExpanded() {
      if (this._isCollapsedDeep0Submenu) {
        return this.collapseExpanded;
      }
      return this._isExpanded;
    }
  },
  mounted() {

  },
  methods: {
    onContentClick() {
      if (this.isMenu) {
        this.handleMenuClick();
      } else {
        this.handleItemClick();
      }
    },

    // 子菜单点击
    handleMenuClick() {
      this.menu.toggleExpand(this);
    },

    // 菜单项点击
    handleItemClick() {
      this.menu.itemIndex = this.index;

      // 快捷路由跳转
      if (this.route) {
        try {
          this.$router.push(
            this.route,
            () => {},
            error => console.error(error)
          );
        } catch (e) {
          console.error(e);
        }
      }
    },

    onMouseEnter() {
      this.collapseExpanded = true;
    },

    onMouseLeave() {
      this.collapseExpanded = false;
    },

    onContentInnerMouseOver() {
      this.contentInnerHovered = true;
    },

    onContentInnerMouseOut() {
      this.contentInnerHovered = false;
    }
  }
};
</script>
