<template>
  <div class="app-container ">
    <el-tabs type="border-card" @tab-click="handleClick">
      <!-- 我的文件 -->
      <el-tab-pane label="全部任务">
        <div v-if="activeTab === 'allTasks'">
          <all-tasks v-if="activeTab === 'allTasks'"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我发起的">
        <div v-if="activeTab === 'initiatedTasks'">
          <initiatedTasks v-if="activeTab === 'initiatedTasks'" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="我参与的">
        <div v-if="activeTab === 'participatedTasks'">
          <participatedTasks v-if="activeTab === 'participatedTasks'" />
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import allTasks from './child/allTasks.vue'
import initiatedTasks from './child/initiatedTasks.vue'
import participatedTasks from './child/participatedTasks.vue'
export default {
  components: {allTasks,initiatedTasks,participatedTasks},
  data() {
    return {
      activeTab: 'allTasks'  // 默认选中 "我的文件" 标签
    }
  },
  methods: {
    handleClick(tab, event) {
      // 根据点击的标签页更新 activeTab
      if (tab.label === '全部任务') {
        this.activeTab = 'allTasks';
      } else if (tab.label === '我发起的') {
        this.activeTab = 'initiatedTasks';
      }else if (tab.label === '我参与的') {
        this.activeTab = 'participatedTasks';
      }
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  .el-tabs {
    margin-bottom: 10px;
    height: calc(100vh - 140px);
  }

  .el-tab-pane {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
  }
}
</style>

