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

      <!-- 我共享的 -->
      <el-tab-pane label="我共享的">
        <div v-if="activeTab === 'shared'">
            <shareFile v-if="activeTab === 'shared'" />
        </div>
      </el-tab-pane>

      <!-- 共享空间 -->
      <el-tab-pane label="共享空间">
        <div v-if="activeTab === 'space'">
          <sharedSpaceFile v-if="activeTab === 'space'" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="回收站">
        <div v-if="activeTab === 'recycle'">
          <recycleBinFile v-if="activeTab === 'recycle'" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import file from './components/file.vue'
import shareFile from './components/shareFile.vue'
import sharedSpaceFile from './components/sharedSpaceFile.vue'
import recycleBinFile from './components/recycleBinFile.vue'
export default {
  components: { file,shareFile,sharedSpaceFile,recycleBinFile},
  data() {
    return {
      activeTab: 'files'  // 默认选中 "我的文件" 标签
    }
  },
  methods: {
    handleClick(tab, event) {
      // 根据点击的标签页更新 activeTab
      if (tab.label === '我的文件') {
        this.activeTab = 'files';
      } else if (tab.label === '我共享的') {
        this.activeTab = 'shared';
      } else if (tab.label === '共享空间') {
        this.activeTab = 'space';
      }else if (tab.label === '回收站') {
        this.activeTab = 'recycle';
      }
    }
  }
}
</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>

