<template>
  <nav :class="_class">
    <header
      class="hive-menu-header"
      v-if="this.$scopedSlots.header"
    >
      <!-- @slot 菜单头部 vertical collapsable 时接受 collapsed 作为作用域变量-->
      <slot
        name="header"
        :collapsed="dataCollapsed"
      />
    </header>
    <!-- @slot 菜单列表 -->
    <div class="hive-menu-nav">
      <slot />
    </div>
    <div
      :class="_footerClass"
      v-if="collapsable && mode === 'vertical'"
      @click="tollgeCollapse"
    >
      <Icon
        class="hive-menu__footer-carret"
        :icon="footerIcon"
      />
    </div>
  </nav>
</template>

<script>
import Icon from '../icon';
import TreeMixin from '../tree/mixins/tree';

const name = 'hive-menu';

export default {
  name,
  components: { Icon },
  mixins: [TreeMixin],
  provide() {
    return {
      menu: this,
      deep: 0,
      paddingDeep: 0
    };
  },
  props: {
    /**
     * 定义菜单垂直、水平模式
     * @member 'vertical'|'horizontal'
     */
    mode: {
      type: String,
      default: 'vertical'
    },
    /**
     * 默认选中的item,对应item的index
     */
    active: String,
    /**
     * vertical 模式是否允许菜单折叠
     */
    collapsable: Boolean,
    /**
     * vertical 模式菜单头部折叠状态
     */
    collapsed: Boolean,
    /**
     * vertical 模式定义展开的子菜单
     */
    expandedIndexes: Array,
    /**
     * 自定义菜单项样式
     */
    itemStyle: Object,
    /**
     * 自定义菜单项选中样式
     */
    activeItemStyle: Object,
    /**
     * 自定义菜单项悬停时样式
     */
    hoverItemStyle: Object,
    /**
     * 自定义子菜单选中样式（子菜单中有选中的菜单项）
     */
    activeSubItemStyle: Object,
    /**
     * 自定义收起状态菜单项选中样式（vertical 模式折叠或 horizontal 模式）
     */
    activeCollapsedItemStyle: Object
  },
  data() {
    return {
      itemIndex: this.active,
      footerIcon: 'left',
      dataCollapsed: this.collapsed,
      afterCollapsed: this.collapsed,
      dataExpandedIndexes: this.expandedIndexes
        ? [...this.expandedIndexes]
        : []
    };
  },
  computed: {
    _headerClass() {
      return [
        `${name}__header`,
        `${name}__header--${this.mode}`,
        this.collapsed ? `${name}__header--collapsed` : ''
      ];
    },
    _footerClass() {
      return [
        `${name}__footer`,
        {
          [`${name}__footer--collapsed`]: this.dataCollapsed
        }
      ];
    },
    _class() {
      return [
        name,
        `${name}--${this.mode}`,
        {
          [`${name}--vertical--collapsable`]: this.collapsable,
          [`${name}--vertical--collapsed`]: this.dataCollapsed,
          [`${name}--vertical--aftercollapsed`]: this.afterCollapsed,
          [`${name}--vertical--collapsed-noicon`]:
            this.dataCollapsed && this.noIcon
        }
      ];
    }
  },
  watch: {
    active(v) {
      this.itemIndex = v;
    },
    itemIndex() {
      /**
       * 选中菜单项变化事件
       * @param { string | number } menuitem index
       */
      this.$emit('update:active', this.itemIndex);
      /**
       * 当前选择的item 的唯一标识
       */
      this.$emit('select', this.itemIndex);
    },
    collapsed(v) {
      this.dataCollapsed = v;
    },
    dataCollapsed() {
      /**
       * vertical 模式下菜单折叠事件
       * @param { boolean } collapsed
       */
      this.$emit('update:collapsed', this.dataCollapsed);
    }
  },
  beforeCreate() {
    this.$collapsedT = 0;
  },
  methods: {
    setCollapse(collapsed) {
      clearTimeout(this.$collapsedT);
      if (collapsed) {
        this.dataCollapsed = collapsed;
        this.$collapsedT = setTimeout(() => {
          this.afterCollapsed = collapsed;
        }, 200);
      } else {
        this.dataCollapsed = collapsed;
        this.afterCollapsed = collapsed;
      }
    },
    tollgeCollapse() {
      this.setCollapse(!this.dataCollapsed);
    }
  }
};
</script>
