<template>
  <div class="report-page report-compare">
    <div class="report-body">
      <div class="report-body-head">
        <h2>一、关联分析</h2>
        <p class="report-name"></p>
      </div>

      <div class="compare-summary report-part">
        <div class="summary-tabs">
          <div
            v-for="item in props.comparePapers"
            :key="item.id"
            class="summary-tabs-item"
          >
            {{ item.projectName }}
          </div>
        </div>
        <table class="table summary-table">
          <colgroup>
            <col style="width: 113px" />
            <col style="width: 47px" />
            <col style="width: 47px" />
            <col style="width: 64px" />
            <col style="width: 64px" />
            <col style="width: 64px" />
            <col style="width: 64px" />
            <col style="width: 64px" />
            <col style="width: 47px" />
            <col style="width: 47px" />
            <col style="width: 47px" />
          </colgroup>
          <tr>
            <th>科目名称</th>
            <th>科目<br />代码</th>
            <th>满分</th>
            <th>最高分</th>
            <th>起始<br />计算分</th>
            <th>有效<br />样本数</th>
            <th>平均分</th>
            <th>标准差</th>
            <th>差异<br />系数</th>
            <th>信度</th>
            <th>难度<br />系数</th>
          </tr>
          <tr v-for="item in props.comparePapers" :key="item.id">
            <td>{{ item.courseName }}</td>
            <td>{{ item.courseCode }}</td>
            <td>{{ item.totalScore }}</td>
            <td>{{ item.maxScore }}</td>
            <td>{{ item.startScore }}</td>
            <td>{{ item.totalCount }}</td>
            <td>{{ item.avgScore }}</td>
            <td>{{ item.stdev }}</td>
            <td>{{ item.coefficient }}</td>
            <td>{{ item.reliability1 }}</td>
            <td>{{ item.difficulty }}</td>
          </tr>
        </table>
      </div>

      <div class="compare-count report-part chart-part">
        <h3 class="report-part-title">
          {{ props.comparePapers[0].courseName }}试卷特征数量对比分析
        </h3>
        <v-chart
          :initOptions="{ renderer: 'svg' }"
          :option="countChartOption()"
          :autoresize="true"
        />
      </div>
      <div class="compare-rate report-part chart-part">
        <h3 class="report-part-title">
          {{ props.comparePapers[0].courseName }}科目成绩(总分)等距({{
            scoreGap
          }}分)分组频数分布对比分析
        </h3>
        <v-chart
          :initOptions="{ renderer: 'svg' }"
          :option="scoreChartOption()"
          :autoresize="true"
        />
      </div>
      <div class="count-intro report-part result-part">
        <p>
          本科目较上个分析项目相比，最高分{{ evaluates.maxScore }}，有效样本数{{
            evaluates.totalCount
          }}，平均分{{ evaluates.avgScore }}，标准差值{{
            evaluates.stdev
          }}，差异系数{{ evaluates.coefficient }}，信度值{{
            evaluates.reliability1
          }}，试卷整体难度{{ evaluates.difficulty }}。
        </p>
      </div>
    </div>
    <div class="report-pfoot"></div>
  </div>
</template>

<script setup lang="ts">
import type { SASPaper, SasCourse } from "@/types";
import { onMounted, reactive } from "vue";
import { EChartsOption } from "echarts";

const props = defineProps<{
  comparePapers: SASPaper[];
  compareCourses: SasCourse[];
  scoreGap: number;
}>();

// 本科目较上个分析项目相比，最高分变高，有效样本数增多，平均分变高，标准差值增大，差异系数变大，信度值增加，试卷整体难度变小。
const compareEvaluateModel = {
  maxScore: ["变低", "持平", "变高"],
  totalCount: ["降低", "没变", "增多"],
  avgScore: ["变低", "持平", "变高"],
  stdev: ["减小", "不变", "增大"],
  coefficient: ["变小", "持平", "变大"],
  reliability1: ["减小", "不变", "增大"],
  difficulty: ["变小", "持平", "变大"],
};

let evaluates = reactive({
  maxScore: "",
  totalCount: "",
  avgScore: "",
  stdev: "",
  coefficient: "",
  reliability1: "",
  difficulty: "",
});
// type EvaluateType = keyof typeof evaluates;

onMounted(() => {
  updateEvaluate();
});

function updateEvaluate() {
  // Object.keys(evaluates).forEach((k) => {
  //   evaluates[k] = getEvaluate(
  //     compareEvaluateModel[k],
  //     props.comparePapers[0][k],
  //     props.comparePapers[1][k]
  //   );
  // });
  evaluates.maxScore = getEvaluate(
    compareEvaluateModel.maxScore,
    props.comparePapers[0].maxScore,
    props.comparePapers[1].maxScore
  );
  evaluates.totalCount = getEvaluate(
    compareEvaluateModel.totalCount,
    props.comparePapers[0].totalCount,
    props.comparePapers[1].totalCount
  );
  evaluates.avgScore = getEvaluate(
    compareEvaluateModel.avgScore,
    props.comparePapers[0].avgScore,
    props.comparePapers[1].avgScore
  );
  evaluates.stdev = getEvaluate(
    compareEvaluateModel.stdev,
    props.comparePapers[0].stdev,
    props.comparePapers[1].stdev
  );
  evaluates.coefficient = getEvaluate(
    compareEvaluateModel.coefficient,
    props.comparePapers[0].coefficient,
    props.comparePapers[1].coefficient
  );
  evaluates.reliability1 = getEvaluate(
    compareEvaluateModel.reliability1,
    props.comparePapers[0].reliability1,
    props.comparePapers[1].reliability1
  );
  evaluates.difficulty = getEvaluate(
    compareEvaluateModel.difficulty,
    props.comparePapers[0].difficulty,
    props.comparePapers[1].difficulty
  );
}

function getEvaluate(model: string[], val1: number, val2: number) {
  const ind = val1 === val2 ? 0 : val1 > val2 ? 1 : -1;
  return model[ind + 1];
}

function countChartOption() {
  const countFields = [
    {
      name: "满分",
      field: "totalScore",
    },
    {
      name: "最高分",
      field: "maxScore",
    },
    {
      name: "最低分",
      field: "minScore",
    },
    {
      name: "全距",
      field: "allRange",
    },
    {
      name: "平均分",
      field: "avgScore",
    },
    {
      name: "标准差",
      field: "stdev",
    },
    {
      name: "差异系数",
      field: "coefficient",
    },
    {
      name: "信度",
      field: "reliability1",
    },
    {
      name: "难度",
      field: "difficulty",
    },
  ];
  return {
    legend: {
      show: true,
      right: 0,
      top: 25,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#8F9DB3",
        fontSize: 14,
      },
    },
    grid: {
      show: true,
      left: 35,
      bottom: 25,
      right: 5,
      top: 60,
      borderColor: "#A3B4CC",
    },
    xAxis: {
      type: "category",
      data: countFields.map((v) => v.name),
      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: [
      {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
        data: countFields.map((v) => props.comparePapers[0][v.field]),
        type: "bar",
        itemStyle: {
          color: "#0091FF",
        },
        barWidth: 20,
        name: props.comparePapers[0].projectName,
      },
      {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
        data: countFields.map((v) => props.comparePapers[1][v.field]),
        type: "bar",
        itemStyle: {
          color: "#44D7B6",
        },
        barWidth: 20,
        name: props.comparePapers[1].projectName,
      },
    ],
  } as EChartsOption;
}

function scoreChartOption() {
  return {
    legend: {
      show: true,
      right: 0,
      top: 25,
      itemWidth: 12,
      itemHeight: 8,
      textStyle: {
        color: "#8F9DB3",
        fontSize: 14,
      },
    },
    grid: {
      show: true,
      left: 35,
      bottom: 20,
      right: 5,
      top: 60,
      borderColor: "#A3B4CC",
    },
    xAxis: {
      type: "category",
      data: props.compareCourses[0].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.compareCourses[0].segements.map((v) => v[1]),
        type: "line",
        symbolSize: 6,
        lineStyle: {
          color: "rgba(0, 145, 255, 1)",
          width: 3,
        },
        areaStyle: {
          color: "rgba(0, 145, 255, 0.1)",
        },
        name: props.compareCourses[0].projectName,
      },
      {
        data: props.compareCourses[1].segements.map((v) => v[1]),
        type: "line",
        symbolSize: 6,
        lineStyle: {
          color: "rgba(68, 215, 182, 1)",
          width: 3,
        },
        areaStyle: {
          color: "rgba(68, 215, 182, 0.1)",
        },
        name: props.compareCourses[1].projectName,
      },
    ],
  } as EChartsOption;
}
</script>
