<script setup lang="ts">
import { httpApp } from "@/plugins/axiosApp";
import { onMounted } from "vue";

const props = defineProps<{
  examStudentId: number;
}>();

let loading = $ref(true);
let results: Array<{
  examOrder: number;
  startTime: string;
  endTime: string;
  isExamEnded: boolean;
  isAuditing: boolean;
  isIllegality: boolean;
  objectiveScore: number;
}> = $ref([]);

onMounted(async () => {
  try {
    const res = (
      await httpApp.get(
        "/api/branch_ecs_oe_admin/exam/score/queryObjectiveScoreList?examStudentId=" +
          props.examStudentId
      )
    ).data;
    logger({ cnl: ["server"], act: "查看客观分" });
    results = res || [];
    results = results.sort((a, b) => b.examOrder - a.examOrder).slice(0, 10);
    loading = false;
  } catch (error) {
    logger({ cnl: ["server", "console"], possibleError: error });
    $message.error("查询客观分列表出错！");
  }
});
</script>

<template>
  <div class="list">
    <table>
      <tbody class="list-row">
        <tr class="list-header qm-primary-strong-text">
          <td>次数</td>
          <td>开始时间</td>
          <td>交卷时间</td>
          <td>客观分</td>
        </tr>

        <tr v-for="(result, index) in results" :key="index">
          <td>{{ result.examOrder }}</td>
          <td>{{ result.startTime }}</td>
          <td>{{ result.endTime }}</td>
          <td v-if="!result.isExamEnded">分数计算中</td>
          <td v-else-if="result.isAuditing">审核中</td>
          <td v-else-if="result.isIllegality">违纪</td>
          <td v-else>{{ result.objectiveScore }}</td>
        </tr>

        <tr v-if="loading">
          加载中
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.list {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  max-height: 400px;
  overflow: auto;
}

.list table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
}
.list td {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  border-collapse: separate !important;
  padding: 10px;
}
</style>
