<template>
  <div class='flex foot_tabset1'>
    <!-- Nav tabs -->
    <ul class="nav nav-{{navStyle}}" role="tablist" style="margin-left: 1%;overflow: hidden">
      <li style="margin: 5px"
          :id="'vc-tabset-li-'+attach +'-'+$index"
          v-for="r in renderData"
          @click.prevent="handleTabListClick($index, r)"
          :disabled="r.disabled"
      >
        <button class="button_new" style="width: max-content" v-bind:class="{
            'btn-succ': ($index === active),
            'disabled': r.disabled
          }">
          <slot name="header">
            {{r.header}}
          </slot>
          <!-- 关闭按钮 -->
          <span class="glyphicon glyphicon-remove" style="margin-left: 15px;" @click="deletetTab(r)" v-if="close" :id="'vc-tabset-close-'+attach +'-'+$index"></span>
        </button>

      </li>
    </ul>

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

<script>
  import {remove} from 'vue-client/src/stores/Remove.js'

  export default {
    props: {
      navStyle: {
        type: String,
        default: 'tabs'
      },
      effect: {
        type: String,
        default: 'fadein'
      },
      active: {
        type: Number,
        default: 0
      },
      close: {
        type: Boolean,
        default: false
      },
      attach: {
        type: String,
        default: 'vuestrap'
      },
      content: {}
    },
    ready () {
      remove.$on('remove', (name) => {
        //tag
        this.$removeTab(name)
      })
    },
    data () {
      return {
        // 数据格式：{comp, header，disabled}
        // - comp: 当前页签对应的tab组件
        renderData: []
      }
    },
    methods: {
      handleTabListClick (index, el) {
        // 没有打开过, 则添加显示
        //tag
        //tag
        if (!this.$parent.show.includes(el.header)) {
          this.$parent.show.push(el.header)
        }
        if (el.comp._scope && el.comp._scope.tab) {
          this.$dispatch('tab-changed', el.comp._scope.tab.comp.name)
        }
        if (!el.disabled) this.active = index
      },
      // deletetab函数为自己添加
      deletetTab (el) {
        this.$removeTab(el.comp._scope.tab.comp.name)
        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: #5cb95c;*/
  /*}*/
  ul > li > button {
    background-color: #FFFFFF;
    border-radius: 4px;
    color: #999;
    border: 1px solid #5cb95c;
  }
  .btn-succ{
    background-color: #6aa6e2;
    border-radius: 4px;
    color: #fff;
  }
  .foot_tabset1 > .nav {
    overflow-x: scroll;
    white-space: nowrap;
  }
</style>
