<template>
  <div>
    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
      <ProjectsSelect
        v-if="rootOrgId"
        v-model:value="contrastProjectId"
        disabled
        :rootOrgId="rootOrgId"
        placeholder="请选择参照项目"
      />
      <span class="tw-mr-4"></span>
      <ProjectsSelect
        v-if="rootOrgId"
        v-model:value="projectIds"
        disabled
        :rootOrgId="rootOrgId"
        placeholder="请选择分析项目"
        style="width: 400px !important"
      />
      <span class="tw-mr-4"></span>
      <div class="tw-float-right tw-flex tw-gap-2">
        <a-button @click="goBack">返回</a-button>
      </div>
    </div>

    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
      <div class="tw-flex tw-flex-1 tw-gap-4 tw-pt-4">
        <div style="flex-grow: 1; height: 300px">
          <v-chart class="chart" :option="segementsLine" :autoresize="true" />
        </div>

        <!-- <a-button style="margin-left: -100px; margin-right: 20px"
          >说明</a-button
        > -->
      </div>
      <div class="tw-flex tw-flex-1 tw-gap-4 tw-pt-4">
        <ScoreRateCompare
          v-if="typeof contrastProjectId === 'number'"
          :projectIds="projectIds"
          :contrastProjectId="contrastProjectId"
          :courseCode="courseCode"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMainStore } from "@/store";
import type { SASPaper } from "@/types";
import { message } from "ant-design-vue";
import { onMounted, computed } from "vue";
import { goBack } from "@/utils/utils";
import { getPaperCompareList } from "@/api/projectCompareDetailPage";
import type { EChartsOption } from "echarts";
import ScoreRateCompare from "./ScoreRateCompare.vue";

const store = useMainStore();
store.currentLocation = "项目管理 / 关联分析";

let rootOrgId = $ref(undefined as unknown as number);

let projectIds: number[] = $ref([]);
let contrastProjectId: number = $ref();

let attrCompareData = $ref<SASPaper[]>([]);

async function fetchData() {
  if (projectIds.length === 0) {
    void message.warn("请选择对比项目");
    return;
  }
  if (typeof contrastProjectId !== "number") {
    void message.warn("请选择参照项目");
    return;
  }
  const res = await getPaperCompareList({
    projectIds,
    contrastProjectId,
    courseCode,
  });
  // console.log(res);
  attrCompareData = res.data.map((v) => {
    v.avgScore = Math.round(v.avgScore * 100) / 100;
    v.stdev = Math.round(v.stdev * 100) / 100;
    v.coefficient = Math.round(v.coefficient * 100) / 100;
    v.reliability1 = Math.round(v.reliability1 * 100) / 100;
    v.reliability2 = Math.round(v.reliability2 * 100) / 100;
    v.difficulty = Math.round(v.difficulty * 100) / 100;
    return v;
  });
}

const segementsLine = computed(() => {
  // console.log(data, data.length);
  if (attrCompareData.length === 0) return;
  return {
    // color: ["#003366", "#006699"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: 10,
      top: 20,
      bottom: 20,
      data: attrCompareData.map((c) => c.projectName || ""),
      textStyle: {
        width: 200,
        overflow: "truncate",
      },
    },
    title: {
      text: attrCompareData[0].courseName + "试卷特征量数对比分析",
      left: "50%",
      // right: "center",
      // right: "50%",
      // textStyle: {
      //   width: "100%",
      // },
      textAlign: "center",
      bottom: "0px",
    },
    // xAxis: {
    //   type: "category",
    //   axisTick: {
    //     show: false,
    //   },
    // },
    // yAxis: {},
    //     dataset: {
    //   source: [
    //     ["type", ...columns.map((v) => v.title)],
    //     [data[0].projectName, ...columns.map((v) => data[0][v.dataIndex])],
    //     [data[1].projectName, ...columns.map((v) => data[1][v.dataIndex])],
    //   ],
    // },
    // series: [
    //   {
    //     type: "bar",
    //     seriesLayoutBy: "row",
    //   },
    //   {
    //     type: "bar",
    //     seriesLayoutBy: "row",
    //   },
    // ],
    xAxis: {
      type: "category",
      data: columns.map((v) => v.title),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        type: "bar",
        name: attrCompareData[0].projectName,
        stack: "a",
        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
        data: columns.map((v) => attrCompareData[0][v.dataIndex]),
      },
      {
        type: "bar",
        name: attrCompareData[1].projectName,
        stack: "b",
        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
        data: columns.map((v) => attrCompareData[1][v.dataIndex]),
      },
      ...(attrCompareData.length >= 3
        ? [
            {
              type: "bar",
              name: attrCompareData[2].projectName,
              stack: "c",
              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
              data: columns.map((v) => attrCompareData[2][v.dataIndex]),
            },
          ]
        : []),
      ...(attrCompareData.length >= 4
        ? [
            {
              type: "bar",
              name: attrCompareData[3].projectName,
              stack: "c",
              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
              data: columns.map((v) => attrCompareData[3][v.dataIndex]),
            },
          ]
        : []),
      // { type: "bar", stack: "y", data: [6, 7, 8, 9, 10] },
    ],
  } as EChartsOption;
});

const columns = [
  {
    title: "满分",
    dataIndex: "totalScore",
  },
  {
    title: "最高分",
    dataIndex: "maxScore",
  },
  {
    title: "最低分",
    dataIndex: "minScore",
  },
  {
    title: "全距",
    dataIndex: "allRange",
  },
  {
    title: "平均分",
    dataIndex: "avgScore",
  },
  {
    title: "标准差",
    dataIndex: "stdev",
  },
  {
    title: "差异系数",
    dataIndex: "coefficient",
  },
  {
    title: "信度",
    dataIndex: "reliability1",
  },
  // {
  //   title: "信度2",
  //   dataIndex: "reliability2",
  // },
  {
    title: "难度",
    dataIndex: "difficulty",
  },
];

let courseCode = $ref("");
onMounted(() => {
  rootOrgId = store.userInfo.rootOrgId;
  setTimeout(() => {
    projectIds = history.state.projectIds;
    contrastProjectId = history.state.contrastProjectId;
    courseCode = history.state.courseCode;

    void fetchData();
  }, 16);
});
</script>

<style></style>
