<template>
  <div style="padding-bottom: 10px;">
    <template v-if="paperStruct && examQuestionList">
      <div
        v-for="(struct, section) in 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>
    </template>
  </div>
</template>

<script>
import { toChineseNumber } from "@/utils/util";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("examingHomeModule");

export default {
  name: "QuestionNavView",
  props: {
    paperStruct: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["questionFilterType", "examQuestionList"]),
  },
  methods: {
    toChineseNumber(num) {
      return toChineseNumber(num);
    },
    getQuestionNum: function(section, index) {
      if (
        !this.paperStruct ||
        !this.examQuestionList ||
        this.examQuestionList.length === 0
      ) {
        return 0;
      }
      let total = 0;
      for (var i = 0; i < section; i++) {
        // questionGroupList [
        //   {
        //     questionWrapperList [
        //       questionUnitWrapperList{questionId} [  // 套题只有一个questionId
        //         questionUnit  // 套题这里为数组大于1。
        //       ]
        //     ]
        //   }
        // ]
        total += this.paperStruct.defaultPaper.questionGroupList[
          i
        ].questionWrapperList.reduce((accumulator, questionWrapper) => {
          // console.log(questionWrapper);
          return accumulator + questionWrapper.questionUnitWrapperList.length;
        }, 0);
      }
      // console.log(section, index, total + index);
      return this.examQuestionList[total + index];
    },
    isSelectedQuestion(section, index2) {
      let q = this.getQuestionNum(section, index2);

      if (this.questionFilterType === "ALL") return true;
      else if (
        this.questionFilterType === "ANSWERED" &&
        q.studentAnswer !== null
      ) {
        return true;
      } else if (this.questionFilterType === "SIGNED" && q.isSign) {
        return true;
      } else if (
        this.questionFilterType === "UNANSWERED" &&
        q.studentAnswer === null
      ) {
        return true;
      }
      return false;
    },
    itemClass(section, index2) {
      const isCurrentQuestion =
        this.$route.params.order == this.getQuestionNum(section, index2).order; // 故意用的 ==
      return {
        item: true,
        "current-question": isCurrentQuestion,
        "star-question": this.getQuestionNum(section, index2).isSign,
        "is-answered":
          this.getQuestionNum(section, index2).studentAnswer !== null,
      };
    },
    sectionQuestions(section) {
      return this.examQuestionList.filter(q => q.mainNumber === section + 1);
    },
  },
};
</script>

<style scoped>
.section {
  display: grid;
  align-items: flex-start;
  justify-items: flex-start;
  margin: 0 20px;
  margin-bottom: 20px;
}
.title {
  margin-bottom: 5px;
  text-align: left;
}
.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.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>
