<template>
  <!-- 详情弹窗tab栏 -->
  <div class="winTabs">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane
        :label="item.label"
        :name="item.id"
        v-for="(item, index) of tabList"
        :key="item.id"
      >
        <slot :name="item.name" v-if="item.type == 'detail'">
          <haveDone :key="item.name" />
        </slot>
        <slot :name="item.name" v-if="item.type == 'commission'">
          <commission :key="item.name" />
        </slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import haveDone from './components/haveDone.vue'
import commission from './components/commission '
export default {
  components:{
    haveDone,commission,
  },
  props: {
    tabList: {
      //tab栏列表
      type: Array,
      default: () => [
        {
          label: "待办任务",
          id: "1",
          name: "detail",
          type: "detail",
        },
        {
          label: "已办任务",
          id: "2",
          name: "commission",
          type: "commission",
          ref: "commission",
          data: null,
        },
      ],
    },
  },
  data() {
    return {
      activeName: this.tabList[0].id, //tab栏选中项
    };
  },
  mounted() {

  },
  methods: {
    initData() {
      this.activeName = this.tabList[0].id;
    },
    handleTabClick() {
      const item = this.tabList.find((item) => item.id == this.activeName);
    },
  },
};
</script>

<style lang="scss" scoped>
.winTabs {
  width: 100%;
  padding: 10px 10px;
}
</style>
