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

<script>
export default {
  name: "EcsOnlineExamResultList",
  props: {
    examStudentId: { type: Number, default: 0 },
    popperShow: { type: Boolean, default: false },
  },
  data() {
    return {
      loading: true,
      results: [],
    };
  },
  watch: {
    async popperShow() {
      if (this.popperShow) {
        try {
          const results = (await this.$http.get(
            "/api/ecs_oe_admin/exam/score/queryObjectiveScoreList?examStudentId=" +
              this.examStudentId
          )).data;
          this.results = (results || [])
            .sort((a, b) => b.examOrder - a.examOrder)
            .slice(0, 10);
          this.loading = false;
        } catch (error) {
          this.$Message.error({
            content: "查询客观分列表出错！",
            duration: 15,
            closable: true,
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.list {
  border: 1px solid #eeeeee;
  border-radius: 6px;
}

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