<template>
  <div id="list-tab">
    <el-row class="title_space">
      <el-col :span="24">
        <slot name="title"> </slot>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <div class="distance30 top_down10">
        <el-row :gutter="10">
          <el-col :span="20">
            <slot name="functionBar"></slot>
          </el-col>
          <el-col :span="3">
            <slot name="addBtn"> </slot>
          </el-col>
        </el-row>
      </div>
      <el-tab-pane v-for="(item, index) in tab" :key="index" :label="item" :name="`${index}`">
        <slot :name="`main${index + 1}`"></slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'list-tab',
  props: {
    tab: { type: Array, default: () => [] },
  },
  components: {},
  data: () => ({
    activeName: '0',
  }),
  created() {},
  computed: {},
  methods: {
    handleClick(tab) {
      this.$emit('changeTab', this.activeName);
    },
  },
};
</script>

<style lang="less" scoped>
.distance30 {
  margin-top: 1.9rem;
}
.title_space {
  margin: 0.9rem 0;
  font-size: 1rem;
}
.top_down10 {
  margin: 0.62rem 0;
}
</style>
