<template>
  <div class="toptabs">
    <el-tabs v-model="active" @tab-click="tabclick(active)">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="index"
        :name="item.value"
      >
        <span slot="label"
          >{{ item.label }}
          <i v-if="item.total && active == item.value" class="icon">{{
            item.total
          }}</i></span
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name:"erpTableTabs",
  props: {
    tabs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    activeName: {
      type: String,
      default: () => {
        return "0";
      },
    },
  },
  data() {
    return {
      active: this.activeName,
    };
  },
  components: {},
  methods: {
    tabclick(val) {
      this.$emit("tabclick", val);
    },
    reset() {
      this.$set(this, "activeName", "0");
    },
    changeActiveName(val){
      this.activeName = val;
    },
  },
};
</script>

<style scoped lang='scss'>
.toptabs {
  padding: 0 20px;
  background: #fff;

  ::v-deep .el-tabs__header {
    margin: 0;
  }
}
::v-deep .el-tabs__nav {
  height: 45px;
  line-height: 45px;
}
.icon {
  font-style: normal;
}
</style>