<template>
  <div :class="_class">
    <div
      :class="_navClass"
      ref="tabNav"
    >
      <div
        class="hive-tabs-nav-scroll"
        ref="navScroll"
        :style="{transform: 'translateX(' + -scrollLeft + 'px)'}"
      >
        <a
          :class="getNavItemClass(item)"
          v-for="(item, index) in navList"
          :key="index"
          @click="onNavItemClick(item, $event)"
        >
          {{ item.label }}
          <Icon
            @click="onClose(item.value)"
            v-if="item.closeTab || item.closeTab===''"
            icon="clear"
          />
        </a>
      </div>
      <div
        class="hive-tabs-scroll__prev"
        @click="handleScrollClick(true)"
        v-if="scrollLeft > 0"
      >
        <Icon icon="left" />
      </div>
      <div
        class="hive-tabs-scroll__next"
        @click="handleScrollClick(false)"
        v-if="scrollShow"
      >
        <Icon icon="right" />
      </div>
    </div>

    <div :class="_contentClass">
      <!-- @slot content 内容 -->
      <slot />
    </div>
  </div>
</template>

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

const name = 'hive-tabs';

export default {
  name,
  components: {
    Icon
  },
  mixins: [
    GetElSlots
  ],
  props: {
    /**
     * 当前选中的值
     */
    value: [String, Number],
    /**
     * tabs 主题
     * @member normal | primary
     */
    type: String
  },
  provide() {
    return {
      tabs: this
    };
  },
  data() {
    const elSlots = this.getElSlots();
    const navList = this.getNavList(elSlots);
    const firstNav = navList[0] || {};
    const curValue = this.value || firstNav.value || 0;
    return {
      elSlots,
      navList,
      curValue,
      scrollShow: false,
      scrollLeft: 0
    };
  },
  computed: {
    _class() {
      return [
        name,
        {
          [`hive-tabs--${this.type}`]: this.type
        }
      ];
    },
    _navClass() {
      return [
        `${name}-nav`
      ];
    },
    _contentClass() {
      return [
        `${name}-content`
      ];
    }
  },
  watch: {
    curValue(value) {
      // 双向绑定
      /**
       * 选中值改变回调函数
       */
      this.$emit('input', value);
    }
  },

  mounted() {
    let that = this;
    setTimeout(function() {
      that.getNavScroll();
    }, 300);
    window.addEventListener('resize', this.getNavScroll, false);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getNavScroll);
  },
  updated() {
    this.initSlots();
    this.getNavScroll();
  },
  methods: {
    // 获取导航数据
    getNavList(elSlots) {
      return elSlots.map((vnode, index) => {
        const { propsData } = vnode.componentOptions;
        return { value: index, ...propsData };
      });
    },

    // 导航点击
    onNavItemClick({ value }, e) {
      if (e.currentTarget === e.target) {
        this.curValue = value;
        /**
         * tab 点击事件回调函数
         */
        this.$emit('click-tab', value);
      }
    },

    // 获取导航样式
    getNavItemClass({ value, disabled, information, closeTab }) {
      return [
        `${name}-tab`,
        {
          [`${name}-tab--active`]: value === this.curValue,
          [`${name}-tab--disabled`]: disabled,
          [`${name}-tab--info`]: information || information === '',
          [`${name}-tab--close`]: closeTab || closeTab === ''
        }
      ];
    },
    // 点击关闭
    onClose(e) {
      /**
       * tab 删除事件回调函数
       */
      this.$emit('close-tab', e);
    },
    // 滚动按钮
    handleScrollClick(lr) {
      const navWidth = this.$refs.tabNav.offsetWidth;
      const scrollWidth = this.$refs.navScroll.offsetWidth;
      const removeLeft = this.type ? 220 : 100;
      let attribute = this.scrollLeft + (lr ? (-navWidth + removeLeft) : (navWidth - removeLeft));

      if (attribute < 0) attribute = 0;
      if (attribute + navWidth > scrollWidth) attribute = scrollWidth - navWidth;

      this.scrollLeft = attribute;
      this.scrollShow = attribute + navWidth !== scrollWidth;
    },
    // 是否滚动
    getNavScroll() {
      let navScroll = this.$refs.navScroll;
      let tabNav = this.$refs.tabNav;

      let navScrollWidth = navScroll.offsetWidth;
      let tabNavWidth = tabNav.offsetWidth;
      // console.log(tabNavWidth);
      if (navScrollWidth > tabNavWidth && this.scrollLeft === 0) {
        this.scrollShow = true;
      } else if (navScrollWidth < tabNavWidth) {
        this.scrollShow = false;
        this.scrollLeft = 0;
      }
    },
    // 初始化slots
    initSlots() {
      const elSlots = this.getElSlots();
      const navList = this.getNavList(elSlots);
      const firstNav = navList[0] || {};
      const curValue = this.value || firstNav.value || 0;
      if (navList.length !== this.navList.length) {
        this.navList = navList;
        this.curValue = curValue;
      }
    }
  }
};
</script>
