<template>
  <main-layout>
    <Breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px;
                       background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem :to="{ name: 'OnlinePracticeHome' }">
        {{ locationTitle }}
      </BreadcrumbItem>
      <!-- 不是很容易返回练习详情，需要examStudentId, courseName等等 -->
      <BreadcrumbItem>练习详情</BreadcrumbItem>
      <BreadcrumbItem>成绩报告</BreadcrumbItem>
    </Breadcrumb>

    <div class="home">
      <div class="qm-title-text">
        练习情况概率(科目：{{ examRecordResult.courseName }})
      </div>

      <div
        style="display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; text-align: left"
      >
        <div>
          答题正确率: <span>{{ examRecordResult.objectiveAccuracy }}%</span>
        </div>
      </div>

      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td>题目分类</td>
              <td>题量</td>
              <td>正确</td>
              <td>错误</td>
              <td>未答</td>
            </tr>

            <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>
          </tbody>
        </table>

        <div class="info-text">
          <h4 class="font-thin text-primary-lt m-t">报告提示:</h4>
          <div class="scroll-y wrapper-sm" style="min-height: 80px;">
            <p class="m-b-sm">
              1、若本练习卷中包含部分主观题型，则报告统计数据仅供参考，因为部分题型需考生根据参考答案判断正确和错误，报告仅对可统计的题型进行统计。
            </p>
            <p class="m-b-sm">
              2、若单题存在多处作答，只要有一处出错，该题就判为错题。
            </p>
          </div>
        </div>
      </div>
    </div>

    <div
      style="margin: 20px; display: grid; grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) ); 
                grid-gap: 20px"
    >
      <i-button
        class="qm-primary-button"
        @click="shouldShowPaper = !shouldShowPaper"
      >
        展开试卷
      </i-button>
      <i-button v-if="!disableGoBack" class="qm-primary-button" @click="goBack">
        返回
      </i-button>
    </div>

    <ExamPaper
      v-if="shouldShowPaper"
      :exam-id="examId"
      :exam-record-data-id="examRecordDataId"
      :from-cache="disableGoBack"
    />
  </main-layout>
</template>

<script>
// import { createNamespacedHelpers } from "vuex";
import moment from "moment";
import { mapState as globalMapState } from "vuex";
// const { mapMutations } = createNamespacedHelpers("examHomeModule");
import ExamPaper from "../OnlineExam/Examing/ExamPaper.vue";

export default {
  name: "OnlinePracticeRecordDetail",
  components: {
    ExamPaper,
  },
  data() {
    return {
      examRecordResult: [],
      shouldShowPaper: false,
      disableGoBack: !!this.$route.query.disableGoBack, // 任意字符串都代表true
    };
  },
  computed: {
    ...globalMapState(["user", "menus"]),
    locationTitle() {
      return (
        this.menus.find(
          v =>
            v.link.toUpperCase() ===
            this.$route.path.match(/\/[^/]*/)[0].toUpperCase()
        ) || {}
      ).name;
    },
    examRecordDataId() {
      return this.$route.query.examRecordDataId - 0;
    },
    examId() {
      return this.$route.params.examId - 0;
    },
  },
  async created() {
    try {
      const res = await this.$http.get(
        "/api/ecs_oe_admin/practice/getPracticeDetailInfo?examRecordDataId=" +
          this.$route.query.examRecordDataId +
          (this.disableGoBack ? "&fromCache=1" : "")
      );
      this.examRecordResult = res.data || [];
    } catch (error) {
      this.$Message.error({
        content: "查询练习试卷详情出错！",
        duration: 15,
        closable: true,
      });
    }
  },
  methods: {
    async enterPracticeRecord(course) {
      this.$router.push(
        `/online-practice/exam/${course.examId}/detail?examStudentId=${course.examStudentId}`
      );
    },
    formatTime(ms) {
      return moment.utc(ms).format("HH:mm:ss") || "";
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.home {
  margin: 20px;
}

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

.list .info-text {
  text-align: left;
  padding: 5px;
}
</style>
