<template>
  <div
    v-for="(quesGroup, qindex) in questionGroupData"
    :key="qindex"
    class="report-page report-question"
  >
    <div class="report-body">
      <div class="report-body-head">
        <h2>{{ props.partNo }}、试题难度分组分布</h2>
        <p class="report-name"></p>
      </div>

      <div class="report-part">
        <table class="table question-table question-group-table">
          <colgroup>
            <col style="width: 30px" />
            <col style="width: 30px" />
            <col v-for="columnIndex in quesGroup.column" :key="columnIndex" />
          </colgroup>
          <tr>
            <th>大题号</th>
            <th>小题号</th>

            <th v-for="columnIndex in quesGroup.column" :key="columnIndex">
              {{ columnIndex * scoreGap }}-
            </th>
          </tr>
          <tr v-for="(item, index) in quesGroup.datas" :key="index">
            <td>{{ item.mainNumber }}</td>
            <td>{{ item.subNumber }}</td>
            <template
              v-for="(item2, index2) in item.difficulityLevel"
              :key="index2"
            >
              <td v-round-number>{{ item2 }}</td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <div class="report-pfoot"></div>
  </div>
</template>

<script setup lang="ts">
import { SASQuestion, SASPaper } from "@/types";
import { onMounted } from "vue";

const props = defineProps<{
  questions: SASQuestion[];
  paper: SASPaper;
  partNo: string;
}>();

const scoreGap = 10;

interface QuestionGroupType {
  column: number[];
  datas: SASQuestion[];
}
let questionGroupData = $shallowRef<QuestionGroupType[]>([]);

let scoreColumnGroup = $shallowRef<number[][]>([]);

onMounted(() => {
  initData();
});

function initData() {
  const totalScoreIndex = Math.floor(props.paper.totalScore / scoreGap) - 1;
  const limitScoreIndex = Math.floor(props.paper.startScore / scoreGap);
  const columnCount = totalScoreIndex - limitScoreIndex + 1;
  const countsPerGroup = [8, 9, 10, 11, 12];
  const remainCountsPerGroup = countsPerGroup.map((item) => columnCount % item);
  const validRemainCountPerGroup = Math.max.apply(null, remainCountsPerGroup);
  const validIndex = remainCountsPerGroup.indexOf(validRemainCountPerGroup);
  const validCountPerGroup = countsPerGroup[validIndex];

  let scoreColumn: number[] = [];
  for (let index = limitScoreIndex; index <= totalScoreIndex; index++) {
    if (scoreColumn.length >= validCountPerGroup) {
      scoreColumnGroup.push(scoreColumn);
      scoreColumn = [];
    }
    scoreColumn.push(index);
  }
  if (scoreColumn.length) {
    scoreColumnGroup.push(scoreColumn);
    scoreColumn = [];
  }

  const maxRowCount = 37;
  const groupCount = Math.ceil(props.questions.length / maxRowCount);

  let questionGroup: QuestionGroupType[] = [];
  scoreColumnGroup.forEach((column) => {
    const nQuestions = props.questions.map((item) => {
      let nitem = { ...item };
      nitem.difficulityLevel = column.map((ind) => item.difficulityLevel[ind]);
      return nitem;
    });

    for (let i = 0; i < groupCount; i++) {
      let datas = nQuestions.slice(i * maxRowCount, (i + 1) * maxRowCount);
      questionGroup.push({
        column,
        datas,
      });
    }
  });

  questionGroupData = questionGroup;
}
</script>
