<template>
  <div
    v-for="(questionList, qindex) in questionGroup"
    :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">
          <colgroup>
            <col style="width: 45px" />
            <col style="width: 45px" />
            <col style="width: 59px" />
            <col style="width: 45px" />
            <col style="width: 45px" />
            <col style="width: 45px" />
            <col style="width: 45px" />
            <col style="width: 45px" />
            <col style="width: 59px" />
            <col style="width: 59px" />
            <col style="width: 45px" />
            <col style="width: 59px" />
            <col style="width: 59px" />
          </colgroup>
          <tr>
            <th>大题号</th>
            <th>小题号</th>
            <th>难度<br />系数</th>
            <th>满分</th>
            <th>最高分</th>
            <th>最低分</th>
            <th>平均分</th>
            <th>标准差</th>
            <th>有效<br />卷数</th>
            <th>差异<br />系数</th>
            <th>区分度</th>
            <th>零分<br />人数</th>
            <th>满分<br />人数</th>
          </tr>
          <tr v-for="item in questionList" :key="item.id">
            <td>{{ item.mainNumber }}</td>
            <td>{{ item.subNumber }}</td>
            <td>{{ item.difficulty }}</td>
            <td>{{ item.totalScore }}</td>
            <td>{{ item.maxScore }}</td>
            <td>{{ item.minScore }}</td>
            <td>{{ item.avgScore }}</td>
            <td>{{ item.stdev }}</td>
            <td>{{ item.effectiveCount }}</td>
            <td>{{ item.coefficient }}</td>
            <td>{{ item.discrimination }}</td>
            <td>{{ item.zeroCount }}</td>
            <td>{{ item.fullCount }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="report-pfoot"></div>
  </div>
</template>

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

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

let questionGroup = $shallowRef<SASQuestion[][]>([]);

onMounted(() => {
  const maxRowCount = 37;
  const groupCount = Math.ceil(props.questions.length / maxRowCount);
  questionGroup = [];

  for (let i = 0; i < groupCount; i++) {
    questionGroup.push(
      props.questions.slice(i * maxRowCount, (i + 1) * maxRowCount)
    );
  }
});
</script>
