<template>
  <div>
    <el-dialog title="导出记录" v-model="dialogVisible" width="65%">
      <div class="table-content">
        <el-table
          v-loading="tableLoading"
          element-loading-background="rgba(48, 65, 86, 0.7)"
          :row-style="{ height: '45px' }"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          :data="exportRecordList"
          border
        >
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="begin_export_time" label="导出开始时间"></el-table-column>
          <el-table-column prop="end_export_time" label="导出结束时间"></el-table-column>
          <el-table-column prop="origin_web" label="数据源网" min-width="120">
            <template #default="{ row }">
              <div class="flex gap-2 justify-center">
                <el-tag v-for="code in JSON.parse(row.origin_web)">{{ getDataSourceName(code) }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="user_name" label="导出用户"></el-table-column>
          <el-table-column prop="create_time" label="记录时间"></el-table-column>
        </el-table>
        <div class="flex justify-end mt-2">
          <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="total, prev, pager, next"
            :total="pagination.total"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getExportRecord } from "@/api/spiderData";
import { reactive, ref } from "vue";

const dialogVisible = ref(false);

const openDialog = () => {
  dialogVisible.value = true;
  getData();
};

defineExpose({
  openDialog,
});

//处理当前页变化
const handleCurrentChange = (value: number) => {
  pagination.page = value;
  getData();
};

//分页参数
const pagination = reactive({
  total: 0,
  page: 1,
  size: 10,
});

//根据数据源code返回数据源name
const getDataSourceName = (code: number) => {
  switch (code) {
    case 0:
      return "DSN-NOW";
    case 1:
      return "ITU";
    case 2:
      return "SpaceTrack";
    case 3:
      return "ESA";
  }
};

//记录数据
const exportRecordList = ref<any[]>([]);

const tableLoading = ref(false);

//获取数据
const getData = async () => {
  tableLoading.value = true;
  const res = await getExportRecord(pagination);
  tableLoading.value = false;
  pagination.total = res.data.total;
  exportRecordList.value = res.data.list;
};
</script>

<style scoped>
.table-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(78, 237, 255, 0.2);
  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
  border-radius: 8px;
  padding: 10px !important;
  margin: 10px;
}
</style>
