<template>
  <div class="tabs-close">
    <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>
    {{ value }}

  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '3',
        tabpne: [{
                   label: '菜单1',
                   value: '1',
                   closeTab: true,
                   content: 'Tab 1 content',
                 },
                 {
                   label: '菜单2',
                   value: '2',
                   information: true,
                   content: 'Tab 2 content',
                 }, {
                   label: '菜单3',
                   value: '3',
                   closeTab: true,
                   information: true,
                   content: 'Tab 3 content',
                 }, {
                   label: '菜单4',
                   value: '4',
                   closeTab: true,
                   information: true,
                   content: 'Tab 4 content',
                 }],
      };
    },
    methods: {
      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>
