<template>
  <div class="tabs-scroll">
    <hive-tabs v-model="value" @close-tab="removeTab">
      <hive-tabs-pane
        v-for="item in tabpne"
        :closeTab="item.closeTab"
        :information="item.information"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        {{ item.content }}
      </hive-tabs-pane>
    </hive-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
        tabpne: [],
      };
    },
    mounted() {
      this.forPan();
    },
    methods: {
      forPan() {
        let arr = [];
        for (var i = 1; i < 20; i++) {
          arr.push({
            label: '菜单' + i,
            value: i,
            closeTab: true,
            information: true,
            content: 'Tab ' + i + ' content',
          });
        }

        this.tabpne = arr;
      },
      removeTab(value) {
        let activeValue = this.value;
        let lastIndex;
        const panes = this.tabpne.filter(pane => pane.value !== value);
        this.tabpne.forEach((item, i) => {
          if (item.value === value) {
            lastIndex = i - 1;
          }
        });
        if (lastIndex >= 0 && activeValue === value) {
          activeValue = panes[lastIndex].value;
        } else if (panes.length === 1 || lastIndex < 0) {
          activeValue = panes[0] ? panes[0].value : null;
        }
        this.value = activeValue;
        this.tabpne = panes;
      },
    },
  };
</script>
