<template>
  <li
    :class="_class"
    @mouseenter="selectStyle"
    @mouseleave="outStyle"
    :style="{ paddingLeft: paddingL + 'px'}">
    <template v-if="this.menu.mode === 'vertical'">
      <div :class="_title" @click="showList">
        <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>
        <span class="hive-menu__icon" v-if="!this.menu.inline || !hover">
          <hive-icon :icon="iconR"></hive-icon>
        </span>
      </div>
      <template v-if="_second">
        <ul class="hive-menu__submenu-menu" v-if="show">
          <slot name="child"></slot>
        </ul>
      </template>
      <div :class="_spreading" v-if="spreading">
        <span>
          <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>
        </span>
      </div>
      <ul class="hive-menu__submenu-menu--inline--spreading" v-if="spreading">
        <slot name="child"></slot>
      </ul>
    </template>
    <template v-if="this.menu.mode === 'horizontal'">
      <div
        :class="_title"
        @click="showList">
        <slot name="title"></slot>
        <span class="hive-menu__icon" v-if="!hover">
          <hive-icon :icon="iconR"></hive-icon>
        </span>
      </div>
      <template v-if="show">
        <ul class="hive-menu__submenu-menu">
          <slot name="child"></slot>
        </ul>
      </template>
      <template v-if="horizontal">
        <ul class="hive-menu__submenu-menu hive-menu__submenu--horizontal-level1">
          <slot name="child"></slot>
        </ul>
      </template>
    </template>
  </li>
</template>

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

  export default {
    name,
    props: {
      icon: String,
      index: String,
    },
    data() {
      return {
        show: false,
        iconR: 'carret_down',
        spreading: false,
        hover: false,
        horizontal: false,
        second: false,
        paddingL: 24 * (this.index.split('-').length - 1),
        indexNum: -1,
      };
    },
    inject: [
      'menu',
    ],
    computed: {
      _class() {
        return [
          name,
          this.menu.mode === 'horizontal' ? `${name}--horizontal` : '',
          this.hover && this.menu.inline ? `${name}--inline` : '',
          this.hover && this.menu.inline ? `${name}-level1--inline` : '',
          this.menu.mode === 'horizontal' && this.index - this.menu.itemIndex.split('-', 1) === 0 ? `${name}--horizontal--selected` : '',
        ];
      },
      _title() {
        return [
          `${name}-title`,
          this.menu.mode === 'horizontal' ? `${name}-title--horizontal` : '',
        ];
      },
      _second() {
        if (this.menu.inline && this.second) {
          return false;
        } else {
          return true;
        }
      },
      _spreading() {
        return [
          `${name}-title`,
          `${name}-title--inline--spreading`,
        ];
      },
    },
    watch: {
      'menu.openKey': function(value) {
        this.openIndex = value;
        if (value.split('-', 1) - this.index) {
          this.show = false;
          this.iconR = 'carret_down';
        } else {
          this.show = true;
          this.iconR = 'carret_up';
        }
      },
    },
    mounted() {
      if (this.index.indexOf('-') === -1) {
        this.hover = true;
      } else {
        this.hover = false;
      }
      if (this.index.split('-').length < 2) {
        this.second = true;
      } else {
        this.second = false;
      }
      if (window.localStorage.getItem('hive-menu__index')) {
        if (this.index === window.localStorage.getItem('hive-menu__index').slice(0, -2) && this.menu.mode !== 'horizontal') {
          this.show = true;
        }
      }
      if (this.index === this.menu.openKey) {
        this.show = true;
        this.iconR = 'carret_up';
      } else {
        this.show = false;
        this.iconR = 'carret_down';
      }
    },
    methods: {
      showList() {
        if (this.menu.mode === 'horizontal' && this.index.split('-').length <= 1) {
          return false;
        }
        if (this.show) {
          this.show = false;
          this.iconR = 'carret_down';
        } else {
          this.show = true;
          this.iconR = 'carret_up';
          this.menu.openKey = this.index;
        }
      },
      selectStyle() {
        if (this.hover && this.menu.inline) {
          this.spreading = true;
        } else if (this.hover && this.menu.mode === 'horizontal') {
          this.horizontal = true;
        }
      },
      outStyle() {
        if (this.hover && this.menu.inline) {
          this.spreading = false;
        } else if (this.hover && this.menu.mode === 'horizontal') {
          this.horizontal = false;
        }
      },
    },
  };
</script>
