<template>
    <div class="tabs" :class="{'tabs-border': showBorder}">
      <div :class="'tabs-' + getTabsType() + '-bar'">
        <div v-for="(item,index) in navList" :class="tabCls(item)" @click="handleChange(index)" :style="getTabFontStyle()">
          {{ item.label }}
          <span v-if="ifShowClose(item)" class="close icon" @click.stop="closeTab(index)" />
        </div>
      </div>
      <div class="tabs-content">
        <slot />
      </div>
    </div>
</template>
  
  <script>
  export default {
    props: {
      value: {
        type: [String, Number]
      },
      border: {
        type: Boolean,
        default: false
      },
      tabsType: {
        type: String,
        default: 'tab'
      },
      fontSize: {
        type: [String, Number],
        default: 16
      },
      fontColor: {
        type: String,
        default: '#000000'
      }
    },
    data() {
      return {
        defType: ['tab', 'card', 'card2', 'brief'],
        currentValue: this.value,
        showBorder: this.border,
        navList: []
      }
    },
    watch: {
      value: function(val) {
        this.currentValue = val
      },
      currentValue: function() {
        this.updateStatus()
      }
    },
    methods: {
      tabCls: function(item) {
        var active = ''
        var tabsType = this.getTabsType()
        var tabsBaseClass = 'tabs-' + tabsType
  
        if (item.name === this.currentValue) {
          active = 'tabs-' + tabsType + '-active'
        }
  
        return [
          tabsBaseClass,
          active
        ]
      },
      getTabs() {
        // 通过遍历子组件，得到所有的pane组件
        return this.$children.filter(function(item) {
          return item.$options.name === 'Pane' || item.$options.name === 'pane'
        })
      },
      updateNav() {
        this.navList = []
        var _this = this
        this.getTabs().forEach(function(pane, index) {
          _this.navList.push({
            label: pane.label,
            name: pane.name || index,
            closable: pane.closable
          })
          if (!pane.name) {
            pane.name = index
          }
          if (index == 0) {
            if (!_this.currentValue) {
              _this.currentValue = pane.name || index
            }
          }
        })
        this.updateStatus()
      },
      updateStatus() {
        var _this = this
        // 显示当前选中的tab对应的pane组件
        _this.getTabs().forEach(function(tab) {
          tab.show = tab.name === _this.currentValue
          // return
        })
      },
      handleChange: function(index) {
        var nav = this.navList[index]
        var name = nav.name
        // 更新当前选择的tab
        this.currentValue = name
        // 更新value
        this.$emit('input', name)
      },
      ifShowClose(item) {
        // 是否显示关闭标签按钮
        return item.closable
      },
      // 点击关闭按钮触发的事件
      closeTab(index) {
        // console.log(this.navList[index].name, this.currentValue);
        // 如果关闭的是当前选择的tab，则将currentValue转到前一个tab
        if (this.navList[index].name == this.currentValue) {
          let toIndex = index - 1
          toIndex = toIndex >= 0 ? toIndex : this.navList.length + toIndex
          console.log(toIndex)
          this.currentValue = this.navList[toIndex].name
        }
        // 关闭当前标签页
        this.navList.splice(index, 1)
      },
      // 根据组件属性tabsType 设置tabs头部样式
      getTabsType() {
        if (this.$data.defType.indexOf(this.tabsType) === -1) {
          return 'tab'
        }
        return this.tabsType
      },
      // 根据组件属性fontSize 设置tab 字体大小和颜色
      getTabFontStyle() {
        if (!/^#[0-9a-fA-F]{6}$/.test(this.fontColor)) {
          this.fontColor = '#000000'
        }
        if (!/^[1-3][0-9]$/.test(this.fontSize) || this.fontSize < 12) {
          this.fontSize = 16
        }
        return 'font-size: ' + this.fontSize + 'px; color: ' + this.fontColor
      }
    }
  }
  </script>
<style lang="scss" scoped>
  [v-cloak] {
    display: none;
}
.tabs {
    margin: 3px;
    font-size: 14px;
    color: #657180;
}
.tabs-border {
    border-width: 1px;
    border-radius: 2px;
    border-style: solid;
    border-color: #e6e6e6;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%)
}
.tabs-tab-bar:after {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    margin-top: -1px;
    background: #d7dde4;
}
.tabs-tab {
    cursor: pointer;
    padding: 6px 16px;
    margin-right: 6px;
    background: #fff;
    position: relative;
    display: inline-block;
    border: 1px solid #d7dde4;
}
.tabs-tab-active {
    color: #3399ff;
    border-top: 1px solid #3399ff;
    border-bottom: 1px solid #fff;
}
.tabs-tab-active:before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    display: block;
    position: absolute;
    background: #3399ff;
}
/*brief 风格的tabs 样式 start*/
.tabs-brief-bar:after {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    margin-top: -1px;
    background: #d7dde4;
}
.tabs-brief {
    cursor: pointer;
    padding: 8px 16px;
    background: #fff;
    position: relative;
    display: inline-block;
}
.tabs-brief-active {
    border-top: none;
    font-weight: 800;
    color: #3399ff !important;
    border-bottom: 1px solid #d7dde4;
}
.tabs-brief-active:after {
    content: '';
    left: 0;
    right: 0;
    height: 2px;
    bottom: -3px;
    display: block;
    position: absolute;
    background: #3399ff;
}
/*brief 风格的tabs 样式 end*/

/*card 风格的tabs 样式 start*/
.tabs-card-bar {
    background: #F1F1F1;
}
.tabs-card {
    cursor: pointer;
    padding: 8px 16px;
    position: relative;
    display: inline-block;
}
.tabs-card-active {
    font-weight: 800;
    color: #3399ff !important;
}
/*card 风格的tabs 样式 end*/

/*card2 风格的tabs 样式 start*/
.tabs-card2-bar {
    background: #F1F1F1;
}
.tabs-card2 {
    cursor: pointer;
    padding: 8px 16px;
    position: relative;
    display: inline-block;
}
.tabs-card2-active {
    font-weight: 800;
    background: #ffffff;
}
/*card 风格的tabs 样式 end*/

.tabs-content {
    min-height: 100px;
    padding: 6px;
}
.pane {
    height: 0;
    width: 100%;
    visibility: hidden;
    transition: all .5s ease-in;
    transform: translateX(-100%);
}
.pane-active {
    visibility: visible;
    transform: translateX(0);
}

/* 关闭按钮样式 start*/
.close.icon {
    width: 11px;
    height: 11px;
    color: #000;
    margin-left: 5px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
.close.icon:hover {
    background: #eee;
}
.close.icon:before {
    content: '';
    top: 5px;
    width: 11px;
    height: 1px;
    position: absolute;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.close.icon:after {
    content: '';
    top: 5px;
    width: 11px;
    height: 1px;
    position: absolute;
    background-color: currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* 关闭按钮样式 end*/
  </style>