<script setup lang="ts">
import { onlinePracticeRecordDetailApi } from "@/api/onlinePractice";
import { OnlinePracticeRecordResult } from "@/types/student-client";
import { onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import ExamPaperPreview from "./ExamPaperPreview.vue";

const route = useRoute();
const router = useRouter();
const examId = route.params.examId as string;
const examRecordDataId = route.params.examRecordDataId as string;
const fromCache = !!route.query.fromCache;
let showPaper = $ref(false);
let loading = $ref(false);

const defaultExamRecordResult: OnlinePracticeRecordResult = {
  courseCode: "",
  courseName: "",
  objectiveAccuracy: "",
  paperStructInfos: [],
};
let examRecordResult: OnlinePracticeRecordResult = $ref(
  defaultExamRecordResult
);
async function getExamRecordResult() {
  if (!route.params.examRecordDataId) return;
  const res = await onlinePracticeRecordDetailApi(
    route.params.examRecordDataId as string
  );
  examRecordResult = res.data || defaultExamRecordResult;
}

function paperOpened() {
  loading = false;
}
async function toOpenPaper() {
  if (loading) return;
  showPaper = false;
  void (await nextTick());
  showPaper = true;
  loading = true;
}
function goBack() {
  router.back();
}

onMounted(() => {
  void getExamRecordResult();
});
</script>

<template>
  <h2 class="record-detail-title">
    练习情况概率(科目：{{ examRecordResult.courseName }})
  </h2>
  <p class="record-detail-info">
    答题正确率: <span>{{ examRecordResult.objectiveAccuracy }}%</span>
  </p>

  <n-table class="n-table-text-center" :singleLine="false">
    <colgroup>
      <col />
      <col />
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th>题目分类</th>
        <th>题量</th>
        <th>正确</th>
        <th>错误</th>
        <th>未答</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="record in examRecordResult.paperStructInfos"
        :key="record.index"
      >
        <td>{{ record.title }}</td>
        <td>{{ record.questionCount }}</td>
        <td>{{ record.succQuestionNum }}</td>
        <td>{{ record.failQuestionNum }}</td>
        <td>{{ record.notAnsweredCount }}</td>
      </tr>
      <tr>
        <td colspan="5">
          <div class="record-detail-desc">
            <h6>报告提示：</h6>
            <p>
              1、若本练习卷中包含部分主观题型，则报告统计数据仅供参考，因为部分题型需考生根据参考答案判断正确和错误，报告仅对可统计的题型进行统计。
            </p>
            <p>2、若单题存在多处作答，只要有一处出错，该题就判为错题。</p>
          </div>
        </td>
      </tr>
    </tbody>
  </n-table>
  <div class="record-detail-action">
    <div class="tw-flex">
      <n-button
        type="success"
        class="tw-flex-1"
        :loading="loading"
        @click="toOpenPaper"
      >
        展开试卷
      </n-button>
      <div class="tw-mx-4"></div>
      <n-button type="success" class="tw-flex-1" @click="goBack">返回</n-button>
    </div>
  </div>

  <ExamPaperPreview
    v-if="showPaper"
    class="exam-paper-preview"
    :examId="examId"
    :examRecordDataId="examRecordDataId"
    :courseCode="examRecordResult.courseCode"
    :fromCache="fromCache"
    @ready="paperOpened"
  />
</template>

<style scoped>
.record-detail-title {
  font-size: 18px;
  line-height: 2;
  text-align: center;
  font-weight: bold;
}
.record-detail-info {
  color: var(--app-color-info);
  margin-bottom: 20px;
}
.record-detail-desc {
  text-align: left;
  padding: 5px;
  min-height: 80px;
  color: var(--app-color-info);
}
.record-detail-desc h6 {
  font-weight: bold;
  margin-bottom: 5px;
}
.record-detail-action {
  margin-top: 20px;
}
.exam-paper-preview {
  margin-top: 50px;
}
</style>
