<template>
  <div :class="_bgClass">
    <ul :class="_class" v-if="mode === 'vertical'">
      <header
        v-if="collapseIcon"
        :class="_headerClass">
        <img v-if="!inline" :src="collapseIcon.logo" />
        <hive-icon v-if="inline" :icon="collapseIcon.icon"></hive-icon>
      </header>
      <slot></slot>
      <div
        :class="_footerClass"
        v-if="collapsable"
        @click="handleCop">
        <hive-icon :icon="footerIcon"></hive-icon>
      </div>
    </ul>
    <template v-if="mode === 'horizontal'">
      <slot name="left"></slot>
      <div class="demo-menu-right">
        <ul :class="_class">
          <slot></slot>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
  import GetElSlots from '../scripts/mixins/get-el-slots';

  const wrap = 'demo-menu-bg';
  const name = 'hive-menu';

  export default {
    name,
    mixins: [
      GetElSlots,
    ],
    props: {
      mode: String,
      active: String,
      collapsable: Boolean,
      collapseIcon: Object,
      defaultOpenKeys: String,
    },
    data() {
      const elSlots = this.getElSlots();
      return {
        elSlots,
        itemIndex: this.active,
        footerIcon: 'left',
        inline: false,
        openKey: this.defaultOpenKeys,
      };
    },
    provide() {
      return {
        menu: this,
      };
    },
    computed: {
      _headerClass() {
        return [
          `${name}__header`,
          `${name}__header--${this.mode}`,
          this.inline ? `${name}__header--inline` : '',
        ];
      },
      _footerClass() {
        return [
          `${name}__footer`,
          this.inline ? `${name}__footer--inline` : '',
        ];
      },
      _bgClass() {
        return [
          wrap,
          `${wrap}--${this.mode}`,
        ];
      },
      _class() {
        return [
          name,
          `${name}--${this.mode}`,
          this.inline ? `${name}--inline` : '',
        ];
      },
    },
    watch: {
      'itemIndex': function() {
        this.$emit('update:active', this.itemIndex);
        this.$emit('select', this.itemIndex);
      },
    },
    mounted() {
      this.initSlots();
    },
    methods: {
      handleCop() {
        if (this.inline) {
          this.inline = false;
          this.footerIcon = 'left';
        } else {
          this.inline = true;
          this.footerIcon = 'right';
        }
      },
      // 初始化slots
      initSlots() {
        const total = this.elSlots.length;
        this.elSlots.forEach((item, index) => {
          const { componentInstance } = item;
          componentInstance.total = total;
          componentInstance.current = ++index;
        });
      },
    },
  };
</script>
