<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
          >区分度是指一道题能多大程度上把不同水平的人区分开来，一个具有良好区分度的题目，在区分被测者时应当是有效的；对于区分度值在0.2以下，甚至为负数的试题，要重点检查试题、标准答案（评分标准）设计及评分标准实际掌握等是否存在谬误，分析计算基于有效样本。
        </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.discrimination),
        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.2,
            },
            {
              yAxis: 0.3,
            },
            {
              yAxis: 0.4,
            },
          ],
        },
      },
    ],
  } as EChartsOption;
}
</script>
