<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, index3) in props.course.rangeSegements"
            :key="index3"
          >
            <td>{{ seg[0] }}</td>
            <td>{{ seg[1] }}</td>
            <td>{{ seg[2] }}%</td>
            <td>{{ seg[3] }}</td>
            <td>{{ seg[4] }}%</td>
          </tr>
        </table>
      </div>

      <div class="report-part freq-chart chart-part">
        <h4 class="report-part-title">频率分布表</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.rangeSegements.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.rangeSegements.map((v) => v[1]),
        type: "line",
        symbolSize: 6,
        lineStyle: {
          color: "#0091FF",
          width: 3,
        },
        areaStyle: {
          color: "rgba(0, 145, 255, 0.1)",
        },
      },
    ],
  } as EChartsOption;
}
</script>
