<template>
  <div class="report-page report-score">
    <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 score-table">
          <colgroup>
            <col style="width: 160px" />
            <col style="width: 120px" />
            <col style="width: 140px" />
            <col style="width: 160px" />
            <col style="width: 95px" />
          </colgroup>
          <tr>
            <th>分数段</th>
            <th>频数</th>
            <th>频率(%)</th>
            <th>累计频数</th>
            <th>累计频率(%)</th>
          </tr>
          <tr
            v-for="(seg, index2) in props.course.segements"
            :key="index2 + scoreGap * 100000"
          >
            <td>
              <span v-if="index2 < course.segements.length - 1"
                >{{ scoreGap * index2 }}-{{ scoreGap * (index2 + 1) }}</span
              >
              <span v-else>{{ seg[0] }}</span>
            </td>
            <td>{{ seg[1] }}</td>
            <td>{{ seg[2] }}%</td>
            <td>{{ seg[3] }}</td>
            <td>{{ seg[4] }}%</td>
          </tr>
        </table>
      </div>

      <div class="report-part score-chart chart-part">
        <h4 class="report-part-title">频率分布表（{{ scoreGap }}分）</h4>
        <v-chart
          :initOptions="{ renderer: 'svg' }"
          :option="chartOption()"
          :autoresize="true"
        />
      </div>

      <div class="report-part part-intro">
        <p>
          <span>说明：</span
          >根据本表数据可绘制频率分布图，以显示成绩分布是否符合正态分布。据此表绘出的折线图宜呈正偏态，显示出高分段考生人数较多，有利于“优中选优”；若呈正偏态，则高分段考生人数偏少，试卷总体上较难或评分过“紧”；若出现“双峰”或“多峰”，可能存在评分标准控制不一致（不同阅卷老师之间，或不同阅卷时段之间）、试题内容或评分标准较特殊（如教材上的内容已陈旧过时而评分采用的是最新或更为权威的标准），或考生异质性较强且较为集中（如较高水平考生和较低水平考生都较多）的情况。
        </p>
      </div>
    </div>
    <div class="report-pfoot"></div>
  </div>
</template>

<script setup lang="ts">
import { SasCourse } from "@/types";
import { EChartsOption } from "echarts";

const props = defineProps<{
  course: SasCourse;
  scoreGap: number;
  partNo: string;
}>();

function chartOption() {
  return {
    grid: {
      show: true,
      left: 35,
      bottom: 25,
      right: 5,
      top: 45,
      borderColor: "#A3B4CC",
    },
    xAxis: {
      type: "category",
      data: props.course.segements.map((v) => v[0]),
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        fontWeight: 400,
        color: "#172C4D",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E1E5EB",
        },
      },
      axisLabel: {
        fontSize: 12,
        color: "#6B7D99",
      },
    },
    series: [
      {
        data: props.course.segements.map((v) => v[1]),
        type: "line",
        symbolSize: 6,
        lineStyle: {
          color: "#0091FF",
          width: 3,
        },
        areaStyle: {
          color: "rgba(0, 145, 255, 0.1)",
        },
      },
    ],
  } as EChartsOption;
}
</script>
