<template>
  <div class='flex'>
    <!-- Nav tabs -->
    <ul class="nav nav-{{navStyle}}" role="tablist">
      <li
          :id="'vc-tabset-li-'+attach +'-'+$index"
          v-for="r in renderData"
          v-bind:class="{
            'active': ($index === active),
            'disabled': r.disabled
          }"
          @click.prevent="handleTabListClick($index, r)"
          :disabled="r.disabled"
          class="bg-info"
      >
          <a href="#">
            <slot name="header">
                {{{r.header}}}
            </slot>
            <!-- 一下span为自己添加 -->
            <!-- <span :class="{'glyphicon glyphicon-list': !($index === active), 'glyphicon glyphicon-remove': ($index === active)}"
            style="margin-left: 15px;" @click="deletetTab()"></span> -->
            <!--  -->
            <!-- <span class="glyphicon glyphicon-remove" v-if="($index === active)"
            style="margin-left: 15px;" @click.prevent="deletetTab($index, r)"></span>
            <span class="glyphicon glyphicon-list" v-if="!($index === active)" style="margin-left: 15px;"></span> -->
            <!--  -->
            <!-- 关闭按钮 -->
            <span class="glyphicon glyphicon-remove" style="margin-left: 15px;" @click="deletetTab(r)" v-if="close" :id="'vc-tabset-close-'+attach +'-'+$index"></span>
          </a>

      </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content span" v-el:tab-content>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {remove} from '../Remove'

export default {
  props: {
    navStyle: {
      type: String,
      default: 'tabs'
    },
    effect: {
      type: String,
      default: 'fadein'
    },
    active: {
      type: Number,
      default: 0
    },
    close: {
      type: Boolean,
      default: true
    },
    attach: {
      type: String,
      default: 'vuestrap'
    },
    content: {}
  },
  ready () {
    remove.$on('remove', (name) => {
      console.log('tabset收$on 到的名字为：', name)
      this.$removeTab(name)
    })
  },
  data () {
    return {
      // 数据格式：{comp, header，disabled}
      // - comp: 当前页签对应的tab组件
      renderData: []
    }
  },
  methods: {
    handleTabListClick (index, el) {
      if (this.renderData[index].comp._scope && this.renderData[index].comp._scope.tab) {
        this.$dispatch('tab-changed', this.renderData[index].comp._scope.tab.comp.name)
      }
      if (!this.renderData[index].disabled) this.active = index
    },
    // deletetab函数为自己添加
    deletetTab (el) {
      this.$removeTab(el.comp._scope.tab)
      remove.$emit('delete', el.comp._scope.tab.comp.name)
    },
    // 根据删除也下标，修改所有页签的下标
    modifyAllIndex (index) {
      let cur = this.active
      this.$nextTick(() => {
        // 关闭页签以后的多有页签的的下标向前挪动一位,之前的页签不动
        for (var i = index; i < this.renderData.length; i++) {
          this.renderData[i].comp.index -= 1
        }
        // 修改激活页
        // 获取当前激活页签下标，关闭在当前激活页之后（包含当前激活页），当前激活页下标不变
        // 当关闭当前激活页之前（激活页向前移动一位）
        if (this.active > index || this.active === this.renderData.length) {
          this.active = cur - 1
        } else if (cur === 0) {
          this.active = 0
        } else {
          this.active = cur
        }
        if (this.active === -1) {
          this.$dispatch('tab-changed', null)
        }else {
          this.$dispatch('tab-changed', this.renderData[this.active].comp._scope.tab.comp.name)
        }
      })
    }
  },
  events: {
    'delete' (index) {
      this.modifyAllIndex(index)
    }
  }
}
</script>

<style scoped>
    ul > li > a {
    position: relative;
  }
	ul > li > a > span {
		display: none;
	  }
  ul > li > a:hover > span {
    display: initial;
    position: absolute;
    right: 0;
	  top: 35%;
	// border: 1px solid #EAEAEA;
  }
  ul > li > a:hover > span:hover {
	// border: 1px solid #EAEAEA;
    color: #5CBDED;
  }
</style>
