<template>
  <div v-if="startInfo && paperStruct" id="exam-overview" class="container">
    <div class="instructions">
      <h1 class="">考试说明</h1>
      <div style="text-align: left;  padding-bottom: 20px">
        <p v-html="beforeExamRemark"></p>
        <!-- <p>{{"测试".repeat(500)}}</p> -->
      </div>
      <i-button
        class="qm-primary-button"
        :disabled="isForceRead"
        style="display: inline-block; width: 100%;"
        @click="goToPaper"
      >
        接受以上条款，开始考试（倒计时：
        <span class="animated infinite pulse"> {{ remainTimeFormatted }} </span
        >）
      </i-button>
    </div>

    <div class="exam-detail">
      <h3 class="">科目：{{ startInfo.courseName }}</h3>
      <br />
      <h4 class="">试卷概览（总分：{{ paperTotalScore }}）</h4>
      <br />
      <ul class="list-group">
        <li
          v-for="(questionsGroup, index) in paperStruct.defaultPaper
            .questionGroupList"
          :key="questionsGroup.gruopName"
          class="list-group-item"
        >
          {{ index + 1 }}、{{ questionsGroup.groupName }}
          <small class="pull-right">
            （共{{ questionsGroup.questionWrapperList.length }}题，共{{
              questionsGroup.groupScore
            }}分）
          </small>
        </li>
      </ul>
      <div>
        <img style="width:100%; padding-top: 40px;" src="./good-wish.png" />
      </div>
    </div>
  </div>

  <div v-else>正在等待数据返回...</div>
</template>

<script>
import moment from "moment";

const TOTAL_READ_TIME = 120;
const FORCE_READ_TIME = process.env.NODE_ENV === "production" ? 10 : 1;

export default {
  name: "OnlineExamOverview",
  data() {
    return {
      beforeExamRemark: null,
      startInfo: null,
      paperStruct: null,
      remainTime: TOTAL_READ_TIME,
      isForceRead: true,
    };
  },
  computed: {
    remainTimeFormatted: function() {
      return moment.utc(this.remainTime * 1000).format("HH:mm:ss");
    },
  },
  async mounted() {
    window._hmt.push(["_trackEvent", "在线考试概览页面", "进入页面"]);
    this.intervalId = setInterval(() => {
      this.remainTime -= 1;
      this.isForceRead = TOTAL_READ_TIME - this.remainTime < FORCE_READ_TIME;
      if (this.remainTime === 0) {
        this.goToPaper();
      }
    }, 1000);

    try {
      const exam = await this.$http.get(
        "/api/ecs_exam_work/exam/getExamPropertyFromCacheByStudentSession/" +
          this.$route.params.examId +
          `/BEFORE_EXAM_REMARK`
      );
      this.beforeExamRemark = exam.data.BEFORE_EXAM_REMARK || "";
      const res = await this.$http.get(
        "/api/ecs_oe_student/examControl/startExam?examStudentId=" +
          this.$route.query.examStudentId
      );

      this.startInfo = res.data;
      this.examRecordDataId = res.data.examRecordDataId;

      const paperStruct = await this.$http.get(
        "/api/ecs_oe_student/examRecordPaperStruct/getExamRecordPaperStruct?examRecordDataId=" +
          this.examRecordDataId
      );
      this.paperStruct = paperStruct.data;

      this.paperTotalScore =
        this.paperStruct.defaultPaper.questionGroupList
          .map(q => q.groupScore)
          .reduce((p, c) => p + c * 1000, 0) / 1000;
    } catch (e) {
      window._hmt.push([
        "_trackEvent",
        "在线考试概览页面",
        "获取考试概览信息异常",
        e.response ? e.response.data.desc : e,
      ]);
      this.$router.back();
      return;
    }

    document.body.style = "";
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  methods: {
    goToPaper: function() {
      this.$router.replace(
        `/online-exam/exam/${this.$route.params.examId}/examRecordData/${this.examRecordDataId}/order/1`
      );
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.instructions {
  display: grid;
  grid-template-rows: 40px minmax(200px, auto) 1fr;
  padding: 40px 20px;
}

.exam-detail {
  padding: 40px 20px;
  background-color: #f5f5f5;

  text-align: left;
}

.list-group {
  list-style: none;
}

.list-group li {
  border-bottom: 1px solid #eeeeee;
  padding-top: 10px;
}
.pull-right {
  text-align: right;
  float: right;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  display: inline-block;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  color: rgb(5, 88, 88);
  animation-name: pulse;
}
</style>

<style>
#exam-overview img {
  max-width: 100%;
  height: auto !important;
}
</style>
