<template>
  <el-tabs :value="activeName" v-bind="$attrs" v-on="listeners" @tab-click="handleClick">
    <el-tab-pane
      v-bind="tabPanelAttr"
      v-for="(item, key) in tabList"
      :key="key"
      :label="item.label"
      :name="item.name"
    >
      <span slot="label">
        <slot name="label">{{ item.label }}</slot>
      </span>
      <slot :name="item.name"></slot>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
// @vue/component
export default {
  name: "Cmstabs",

  components: {},

  mixins: [],

  props: {
    tabList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    activeName: {
      type: String,
      default: () => {
        return "";
      },
    },
    tabPanelAttr: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },

  computed: {},

  watch: {},

  created() {},

  methods: {
    handleClick(tab, event) {
      this.$emit("tab-click", tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-tabs__content {
  padding: 0 !important;
}
</style>
