<template>
  <div class="p-6 bg-gray-50 condition">
    <el-tabs v-model="activeName" type="border-card" :tab-position="tabPosition" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="item.catalogueName" :name="item.id" v-for="(item, i) of FolderList" :key="i">
        <div style="height: 80vh; background: #f0f8ff9e">
          <filePage :catalogueId="item.id"></filePage>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import type { TabsPaneContext, TabsInstance } from 'element-plus';
import { collectCatalogueList } from '@/api/design/condition';
import filePage from './comm/filePage.vue';
const tabPosition = ref<TabsInstance['tabPosition']>('left');
const activeName = ref('');
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const FolderList = ref([]);
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 查询收资清单目录列表
const getList = async () => {
  let res = await collectCatalogueList({ projectId: currentProject.value?.id });
  if (res.code == 200) {
    FolderList.value = res.rows;
    activeName.value = res.rows[0].id; //默认第一个
  }
};

// 页面挂载时初始化数据
onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.condition {
  .el-tabs__header {
    height: 84vh !important;
  }
}
</style>
