<template>
  <div class="report-page report-diff">
    <div class="report-body">
      <div class="report-body-head">
        <h2>{{ props.partNo }}、试卷题目难度编排</h2>
        <p class="report-name"></p>
      </div>

      <div class="report-part diff-part 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 { SASQuestion } from "@/types";
import { EChartsOption } from "echarts";

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

function chartOption() {
  return {
    grid: {
      show: true,
      left: 35,
      bottom: 25,
      right: 5,
      top: 45,
      borderColor: "#A3B4CC",
    },
    xAxis: {
      type: "category",
      data: props.questions.map((v) => v.mainNumber + "-" + v.subNumber),
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        fontWeight: 400,
        color: "#172C4D",
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 1,
      splitNumber: 10,
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E1E5EB",
        },
      },
      axisLabel: {
        fontSize: 12,
        color: "#6B7D99",
        formatter: function (val: number) {
          if (val === 1) return "1.0";
          return val;
        },
      },
    },
    series: [
      {
        data: props.questions.map((v) => v.difficulty),
        type: "line",
        symbolSize: 6,
        lineStyle: {
          color: "#0091FF",
          width: 3,
        },
        areaStyle: {
          color: "rgba(0, 145, 255, 0.1)",
        },
        markLine: {
          silent: true,
          symbol: "none",
          lineStyle: {
            color: "#333",
          },
          data: [
            {
              yAxis: 0.5,
            },
            {
              yAxis: 0.6,
            },
          ],
        },
      },
    ],
  } as EChartsOption;
}
</script>
