<template>
  <li
    :class="_class"
    @click="handleSelect"
    @mouseenter="selectStyle"
    @mouseleave="outStyle"
    :style="{paddingLeft: paddingL + 'px'}">
    <template v-if="this.menu.mode === 'vertical'">
      <div>
        <template v-if="icon">
          <hive-icon :icon="icon"></hive-icon>
          <span><slot name="title"></slot></span>
        </template>
        <template v-else>
          <slot name="title"></slot>
        </template>
      </div>
      <div :class="_spreading" v-if="spreading">
        <template v-if="icon">
          <hive-icon :icon="icon"></hive-icon>
          <span><slot name="title"></slot></span>
        </template>
        <template v-else>
          <slot name="title"></slot>
        </template>
      </div>
    </template>
    <template v-if="this.menu.mode === 'horizontal'">
      <div><slot name="title"></slot></div>
    </template>
  </li>
</template>

<script>
  const name = 'hive-menu__item';

  export default {
    name,
    props: {
      icon: String,
      index: String,
    },
    data() {
      return {
        spreading: false,
        hover: false,
        paddingL: 24 * (this.index.split('-').length),
      };
    },
    inject: [
      'menu',
    ],
    computed: {
      _class() {
        let selected;
        if (this.menu.active === this.index) {
          if (this.hover && this.menu.mode === 'horizontal') {
            selected = `${name}--horizontal--selected`;
          }
          else {
            selected = `${name}--selected`;
          }
        }
        return [
          name,
          selected,
          this.hover && this.menu.inline ? `${name}-level1--inline` : '',
          this.menu.mode === 'horizontal' ? `${name}--horizontal` : '',
        ];
      },
      _spreading() {
        return [
          `${name}--spreading`,
          `${name}-level1--inline`,
          `${name}-level1--inline--spreading`,
        ];
      },
    },
    mounted() {
      if (this.index.indexOf('-') === -1) {
        this.hover = true;
      } else {
        this.hover = false;
      }
    },
    methods: {
      selectStyle() {
        if (this.hover && this.menu.inline) {
          this.spreading = true;
        }
      },
      outStyle() {
        if (this.hover && this.menu.inline) {
          this.spreading = false;
        }
      },
      handleSelect() {
        this.menu.itemIndex = this.index;
        window.localStorage.setItem('hive-menu__index', this.index);
      },
    },
  };
</script>
