<template>
  <div 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="(item, index) in props.paper.totalScore / scoreGap"
              :key="index"
            />
          </colgroup>
          <tr>
            <th>大题号</th>
            <th>小题号</th>
            <template
              v-for="(item, index) in props.paper.totalScore / scoreGap"
              :key="index"
            >
              <th v-if="index >= limitScoreIndex">{{ index * scoreGap }}-</th>
            </template>
          </tr>
          <tr v-for="(item, index) in props.questions" :key="index">
            <td>{{ item.mainNumber }}</td>
            <td>{{ item.subNumber }}</td>
            <template
              v-for="(item2, index2) in item.difficulityLevel"
              :key="index2"
            >
              <td v-if="index2 >= limitScoreIndex" 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 { computed } from "vue";

const props = defineProps<{
  questions: SASQuestion[];
  paper: SASPaper;
  partNo: string;
}>();
let limitScoreIndex = computed(() => {
  return Math.floor(props.paper.startScore / scoreGap);
});
let scoreGap = $ref(10);
</script>
