<template>
  <div class="app-container ">
    <el-tabs type="border-card" @tab-click="handleClick">
      <!-- 我的文件 -->
      <el-tab-pane label="我的数据集">
        <div v-if="activeTab === 'dataSet'">
          <dataSet v-if="activeTab === 'dataSet'" />
        </div>
      </el-tab-pane>

      <!-- 我共享的 -->
      <el-tab-pane label="共享数据集">
        <div v-if="activeTab === 'sharedDataSet'">
          <sharedDataSet v-if="activeTab === 'sharedDataSet'" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import dataSet from './components/dataSet.vue'
import sharedDataSet from './components/sharedDataSet.vue'

export default {
  components: { dataSet,sharedDataSet},
  data() {
    return {
      activeTab: 'dataSet'  // 默认选中 "我的文件" 标签
    }
  },
  methods: {
    handleClick(tab, event) {
      // 根据点击的标签页更新 activeTab
      if (tab.label === '我的数据集') {
        this.activeTab = 'dataSet';
      } else if (tab.label === '共享数据集') {
        this.activeTab = 'sharedDataSet';
      }
    }
  }
}
</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>

