<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <sideTree />
      </el-col>
      <el-col :lg="20" :xs="24">
        <el-card shadow="never" class="table-container">
          <template #header>
            <div class="flex-x-between">
              <div>
                <el-button type="primary">
                  <i-ep-upload />
                  导入数据
                </el-button>
                <el-button type="danger">
                  <i-ep-delete />
                  删除数据
                </el-button>
              </div>
            </div>
          </template>

          <el-table stripe v-loading="loading" :data="pageData">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="文件名" align="center" prop="fileName" />
            <el-table-column label="型号" align="center" prop="model" />
            <el-table-column label="时间" align="center" prop="time" />
            <el-table-column label="来源" align="center" prop="source" />
            <el-table-column
              label="采样率"
              align="center"
              prop="samplingRate"
            />
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table>
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ExperimentalDataManage",
  inherititems: false,
});
import experimentalDataAPI, {
  experimentalDataPageQuery,
  experimentalDataPageVO,
} from "@/api/sLongDemo/experimentalData";
const pageData = ref<experimentalDataPageVO[]>();
const total = ref(0);
const loading = ref(false);
const queryParams = reactive<experimentalDataPageQuery>({
  pageNum: 1,
  pageSize: 20,
});

function handleQuery() {
  loading.value = true;
  experimentalDataAPI
    .getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped></style>
