<template>
  <div>
    <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
      <h3 class="section-title">按本科目试卷成绩分组</h3>
      <div class="tw-flex tw-gap-2">
        <a-button @click="visible = true">图形化展示</a-button>
        <!-- <a-button @click="openModal1">说明</a-button> -->
      </div>
    </div>

    <div class="tw-overflow-y-scroll">
      <table class="custom-table">
        <tr>
          <td>大题号</td>
          <td>小题号</td>
          <template v-for="(item, index) in props.totalScore / 10" :key="index">
            <td v-if="index >= limitScoreIndex">{{ index * 10 }}-</td>
          </template>
        </tr>
        <tr v-for="(item, index) in props.questions" :key="index">
          <td>{{ item.mainNumber }}</td>
          <td>{{ item.subNumber }}</td>
          <template
            v-for="(item2, index2) in item.difficulityLevel"
            :key="index2"
          >
            <td v-if="index2 >= limitScoreIndex" v-round-number>{{ item2 }}</td>
          </template>
        </tr>
      </table>
    </div>

    <!-- <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
      <h3 class="section-title">按初试总分分组</h3>
      <div class="tw-flex tw-gap-2">
        <a-button @click="openRangeConfigModal">分段设置</a-button>
        <a-button @click="openModal2">说明</a-button>
      </div>
    </div> -->

    <div class="tw-overflow-y-scroll">
      <table v-if="props.rangeConfig" class="custom-table">
        <tr>
          <td>大题号</td>
          <td>小题号</td>
          <td
            v-for="(item2, index) in JSON.parse(props.rangeConfig)"
            :key="index"
          >
            {{ scoreTitle(item2) }}
          </td>
        </tr>
        <tr v-for="(item, index) in props.questions" :key="index">
          <td>{{ item.mainNumber }}</td>
          <td>{{ item.subNumber }}</td>
          <td
            v-for="(item2, index2) in item.difficulityGroupLevel"
            :key="index2"
            v-round-number
          >
            {{ item2 }}
          </td>
        </tr>
      </table>
      <div v-else>请先进行分段设置。</div>
    </div>

    <CommonRangeConfig
      ref="rangeConfigRef"
      :projectId="projectId"
      :courseId="selectedCourseId"
      :rangeConfig="selectedRangeConfig"
      @updated="handleRangeConfigUpdate"
    />

    <a-modal
      v-model:visible="visible"
      title="按本科目试卷成绩分组"
      okText="确定"
      cancelText="取消"
      width="600px"
      :bodyStyle="{ height: '600px' }"
      @ok="visible = false"
    >
      <div style="width: 100%; height: 600px; overflow: scroll">
        <v-chart
          v-for="(question, index) in props.questions"
          :key="index"
          class="chart"
          style="height: 300px"
          :option="questionOptions(question)"
          :autoresize="true"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { setPaperRangeConfig } from "@/api/paperAnalysisPage";
import { RANGE_POINT_TYPE } from "@/constants/constants";
// import EventBus from "@/plugins/eventBus";
import { RangeConfig, SASQuestion } from "@/types";
import { message } from "ant-design-vue";
import { EChartsOption } from "echarts";
import { computed } from "vue";

const props = defineProps<{
  questions: SASQuestion[];
  totalScore: number;
  rangeConfig?: string;
  projectId: number;
  courseId: number;
  paperId: number;
  startScore: number;
}>();

let visible = $ref(false);

// function openModal1() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE250");
// }

// function openModal2() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE260");
// }

let rangeConfigRef = $ref(null);

let selectedRangeConfig = $ref([]);
let selectedCourseId = $ref(0);
console.log(props.rangeConfig);

let limitScoreIndex = computed(() => {
  return Math.floor(props.startScore / 10);
});

// const openRangeConfigModal = () => {
//   selectedCourseId = props.courseId;
//   selectedRangeConfig = JSON.parse(props.rangeConfig || "0") || [
//     {
//       type: "ZERO",
//       baseScore: 0,
//       adjustScore: 0,
//     },
//   ];
//   // @ts-ignore https://github.com/vuejs/vue-next/issues/4397
//   // eslint-disable-next-line @typescript-eslint/no-unsafe-call
//   rangeConfigRef.showModal();
// };

async function handleRangeConfigUpdate(rangeConfig: RangeConfig) {
  await setPaperRangeConfig({
    projectId: props.projectId,
    courseId: selectedCourseId,
    paperId: props.paperId,
    rangeConfig: JSON.stringify(rangeConfig),
  });
  void message.success({ content: "操作成功" });
}

function scoreTitle(rangeConfig: RangeConfig) {
  if (!rangeConfig) return false;
  if (rangeConfig.type === "ZERO") return "0-";

  return `${rangeConfig.baseScore + rangeConfig.adjustScore}(${
    RANGE_POINT_TYPE[rangeConfig.type]
  }${rangeConfig.adjustScore > 0 ? "+" : ""}${rangeConfig.adjustScore})-`;
}

function questionOptions(question: SASQuestion) {
  const xAxis = [];
  for (let i = 0; i * 10 < props.totalScore; i++) {
    xAxis.push(i * 10 + "-");
  }
  return {
    title: {
      text: question.mainNumber + "-" + question.subNumber,
      left: "left",
    },
    xAxis: {
      type: "category",
      data: xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: question.difficulityLevel,
        type: "line",
        smooth: true,
      },
    ],
  } as EChartsOption;
}
</script>

<style scoped></style>
