<template>
  <el-tabs
    v-model="tabsName"
    @tab-click="handleClick"
    :tab-position="tabPosition"
  >
    <el-tab-pane
      v-for="(item, index) in tabsData"
      :key="index"
      :label="item.label"
      :name="item.name"
    >
      <span slot="label"><i :class="item.icon"></i>{{ item.label }}</span>
      <slot :value="item.name"></slot>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: 'currenTabs',
  watch: {
    activeName(newVal, oldVal){
      this.tabsName = newVal
    }
  },
  props: {
    activeName: {
      type: String,
      default: 'first'
    },
    tabsData: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: 'border-card' //card/border-card
    },
    tabPosition: {
      type: String,
      default: 'top'
    }
  },
  data () {
    return {
      tabsName: this.activeName
    }
  },
  methods: {
    handleClick (val) {
      this.$emit("handleClick", val)
    }
  }
}
</script>