<template>
  <div>
    <el-tabs :value="value" @input="onInput" :type="type"  :class="border?'':'el-tabs-border'" @tab-click="handleClick">
      <el-tab-pane v-if="content" v-for="(item,index) in content"  :label="item.label" :name="item.value" :key="index">
        {{item.name}}
      </el-tab-pane>
      <slot v-if="!content"></slot>
    </el-tabs>
  </div>

</template>

<script>
    export default {
        name: "index",
        props:{
            value:{
                default:''
            },
            type:{
              default:''
            },
            border:{
                default:false
            },
            content:{
                type:Array,
                default(){
                    return null
                }
            }
        },
        methods:{
            onInput(value) {
                this.$emit('input',value)
            },
            handleClick(tab) {
                this.$emit('tabClick',tab)
            }
        }
    }
</script>

<style scoped lang="scss">
  /deep/ .el-tabs__header{
    margin: 0;
  }
  /deep/ .el-tabs__item{
    line-height: 50px;
    height: 50px;
    vertical-align: top;
  }
  .el-tabs-border{
    /deep/ {
      .el-tabs__nav-wrap:after{
        background-color: transparent;
      }
    }
  }
  span{
    font-size:14px
  }
</style>
