<script setup lang="ts">
import { store } from "@/store/store";
import { ExamQuestion } from "@/types/student-client";
import { toChineseNumber } from "@/utils/utils";
import { useRoute } from "vue-router";

const route = useRoute();

function getQuestionNum(section: number, index: number): ExamQuestion {
  let total = 0;
  for (var i = 0; i < section; i++) {
    // questionGroupList [
    //   {
    //     questionWrapperList [
    //       questionUnitWrapperList{questionId} [  // 套题只有一个questionId
    //         questionUnit  // 套题这里为数组大于1。
    //       ]
    //     ]
    //   }
    // ]
    total += store.exam.paperStruct.defaultPaper.questionGroupList[
      i
    ].questionWrapperList.reduce((accumulator, questionWrapper) => {
      // console.log(questionWrapper);
      return accumulator + questionWrapper.questionUnitWrapperList.length;
    }, 0);
  }
  return store.exam.examQuestionList[total + index];
}

function isSelectedQuestion(section: number, index2: number) {
  let q = getQuestionNum(section, index2);

  if (store.exam.questionFilterType === "ALL") return true;
  else if (
    store.exam.questionFilterType === "ANSWERED" &&
    q.studentAnswer !== null
  ) {
    return true;
  } else if (store.exam.questionFilterType === "SIGNED" && q.isStarred) {
    return true;
  } else if (
    store.exam.questionFilterType === "UNANSWERED" &&
    q.studentAnswer === null
  ) {
    return true;
  }
  return false;
}

function itemClass(section: number, index2: number) {
  const eq = getQuestionNum(section, index2);
  const order = +route.params.order;
  const isCurrentQuestion = order === eq.order; // 故意用的 ==
  return {
    item: true,
    "current-question": isCurrentQuestion,
    "star-question": eq.isStarred,
    "is-answered": eq.studentAnswer !== null,
  };
}

function sectionQuestions(section: number) {
  return store.exam.examQuestionList.filter(
    (q) => q.mainNumber === section + 1
  );
}
</script>

<template>
  <div style="padding-bottom: 10px; margin-left: 20px">
    <div
      v-for="(struct, section) in store.exam.paperStruct.defaultPaper
        .questionGroupList"
      :key="section"
      class="section"
    >
      <div class="title">
        {{
          `${toChineseNumber(section + 1)}、${struct.groupName}(${
            struct.groupScore
          }分)`
        }}
      </div>
      <div class="list">
        <template v-for="(_, index2) in sectionQuestions(section)">
          <template v-if="isSelectedQuestion(section, index2)">
            <router-link
              :key="index2"
              :class="itemClass(section, index2)"
              ondragstart="return false;"
              :to="{
                path: `/online-exam/exam/${
                  $route.params.examId
                }/examRecordData/${$route.params.examRecordDataId}/order/${
                  getQuestionNum(section, index2).order
                }`,
              }"
            >
              {{ index2 + 1 }}
            </router-link>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.section {
  display: grid;
  align-items: flex-start;
  justify-items: flex-start;
  margin-bottom: 20px;
}
.title {
  margin-bottom: 5px;
  text-align: left;
}
.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
}
.item {
  border-radius: 50%;
  border: 1px solid #cccccc;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.is-answered {
  background-color: #13bb8a;
}
.is-answered > a {
  color: white;
}
.current-question {
  box-shadow: 0 0 15px gold;
  background-color: #a8bcf7;
  transform: scale(1.2);
}
.current-question > a {
  color: black;
}
.star-question {
  background-color: #ffcc00;
}
.star-question > a {
  color: white;
}

@media screen and (max-height: 768px) {
  .section {
    margin-bottom: 10px;
  }
}

@media screen and (max-height: 720px) {
  .section {
    margin-bottom: 5px;
  }
}
</style>
