<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>
