<template>
  <div class="rich-text-question-container">
    <div v-for="(question, index) in questions" :key="index">
      <div class="question">
        <div class="tw-text-xl">
          <span :id="'q-' + question.unionOrder">题号：</span>
          <span>{{ question.unionOrder }}</span>
        </div>
        <div>
          <div class="tw-text-xl">题干：</div>
          <div v-html="getDomByRichTextJSON(question.parentBody)?.innerHTML" />
          <div v-html="getDomByRichTextJSON(question.body)?.innerHTML" />
          <template v-if="question.objective">
            <div v-if="question.options">
              <div
                v-for="(option, index2) in question.options"
                :key="index2"
                class="tw-flex tw-gap-1"
              >
                {{ indexToABCD(option.number) }}.
                <div v-html="getDomByRichTextJSON(option.body)?.innerHTML" />
              </div>
            </div>
          </template>
        </div>
        <template v-if="!question.hideAnswer">
          <div>
            <template v-if="question.objective">
              <span class="tw-text-blue-600">考生答案：</span
              >{{ renderObjective(question.studentAnswer) }}
            </template>
            <template v-else>
              <div class="tw-text-blue-600">
                考生答案：（字数统计：{{
                  getDomByRichTextJSON(question.studentAnswer)?.innerText
                    .length ?? 0
                }}）
              </div>
              <div
                v-html="getDomByRichTextJSON(question.studentAnswer)?.innerHTML"
              />
            </template>
          </div>
          <div>
            <template v-if="question.objective">
              <span class="tw-text-blue-600">标准答案：</span
              >{{ renderObjective(question.standardAnswer) }}
            </template>
            <template v-else>
              <div class="tw-text-blue-600">标准答案：</div>
              <div
                v-html="
                  getDomByRichTextJSON(question.standardAnswer)?.innerHTML
                "
              />
            </template>
          </div>
          <div v-if="showScore(question)" style="color: blue">
            得分 / 总分 ：{{
              (question.score ?? "-") + " / " + question.totalScore
            }}
          </div>
        </template>
      </div>
      <div style="margin-bottom: 20px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getStudentAnswerJSON } from "@/api/jsonMark";
import { store } from "@/store/store";
import { onUpdated, watch } from "vue";
import { renderRichText } from "@/utils/renderJSON";
import type { RichTextJSON, QuestionForRender } from "@/types";
import "viewerjs/dist/viewer.css";
import Viewer from "viewerjs";
import { useRoute } from "vue-router";

const route = useRoute();
const isSeePaper = route.name === "StudentTrack";
const showScore = (question: QuestionForRender) =>
  route.name !== "Mark" && question.totalScore;

let questions: QuestionForRender[] = $ref([]);
async function updateStudentAnswerJSON() {
  return getStudentAnswerJSON(store.currentTask?.jsonUrl as string);
}

function getDomByRichTextJSON(rt: Array<RichTextJSON> | RichTextJSON | null) {
  const node = document.createElement("div");
  if (!rt) return node;
  if (Array.isArray(rt)) {
    for (const r of rt) {
      node.appendChild(renderRichText(r));
    }
  } else {
    node.appendChild(renderRichText(rt));
  }
  return node;
}

watch(
  () => store.currentTask,
  async () => {
    questions.splice(0);
    if (!store.currentTask?.jsonUrl) return;
    const res = await updateStudentAnswerJSON();

    const stuAnswers = res.data;
    for (const ans of stuAnswers) {
      if (ans.answer && !Array.isArray(ans.answer)) {
        ans.answer = [ans.answer];
      }
    }
    // 查看原卷显示全部题目
    if (isSeePaper) {
      for (const questionBody of store.setting.subject.questions || []) {
        const [mainNumber, subNumber] = questionBody.unionOrder.split("-");
        const stuAns = stuAnswers.find(
          (v) =>
            questionBody.unionOrder ===
            [v.mainNumber, v.subNumber, v.subIndex]
              .filter((v) => typeof v !== "undefined")
              .filter((v) => v !== null)
              .join("-")
        ) || {
          mainNumber: +mainNumber,
          subNumber: subNumber,
          subIndex: "",
          answer: [],
        };
        const taskQuestion = (store.currentTask?.questionList || []).find(
          (v) =>
            [v.mainNumber, v.subNumber].join("-") === questionBody.unionOrder
        );
        questions.push({
          unionOrder: questionBody.unionOrder,
          parentBody: questionBody.parentBody,
          body: questionBody.body,
          options: questionBody.options,
          objective: questionBody.objective,
          hideAnswer: questionBody.hideAnswer,
          standardAnswer: questionBody.answer,
          studentAnswer: stuAns.answer,
          score: taskQuestion?.score ?? null,
          totalScore: taskQuestion?.maxScore || 0,
        });
      }
    } else {
      for (const taskQuestion of store.currentTask?.questionList || []) {
        const { mainNumber, subNumber } = taskQuestion;
        const questionBody = store.setting.subject.questions.find(
          (ques) => ques.unionOrder === `${mainNumber}-${subNumber}`
        );
        if (!questionBody) continue;

        const stuAns = stuAnswers.find(
          (v) =>
            questionBody.unionOrder ===
            [v.mainNumber, v.subNumber, v.subIndex]
              .filter((v) => typeof v !== "undefined")
              .filter((v) => v !== null)
              .join("-")
        ) || {
          mainNumber: +mainNumber,
          subNumber: subNumber,
          subIndex: "",
          answer: [],
        };

        questions.push({
          unionOrder: questionBody.unionOrder,
          parentBody: questionBody.parentBody,
          body: questionBody.body,
          options: questionBody.options,
          objective: questionBody.objective,
          standardAnswer: questionBody.answer,
          hideAnswer: questionBody.hideAnswer,
          studentAnswer: stuAns.answer,
          score: taskQuestion.score,
          totalScore: taskQuestion.maxScore,
        });
      }
    }
  },
  { immediate: true }
);

const indexToABCD = (index: number) => "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[index - 1];
const renderObjective = (ans: QuestionForRender["studentAnswer"]) => {
  if (typeof ans === "boolean") {
    return ans ? "A" : "B";
  } else if (Array.isArray(ans) && typeof ans[0] === "boolean") {
    return ans[0] ? "A" : "B";
  } else if (Array.isArray(ans) && typeof ans[0] === "number") {
    return (ans as unknown as number[]).map((v) => indexToABCD(v)).join("");
  } else if (Array.isArray(ans) && ans.length === 0) {
    return "";
  } else {
    console.log("错误的答案类型", JSON.stringify(ans));
  }
};

let viewer: Viewer = null as unknown as Viewer;
onUpdated(() => {
  viewer && viewer.destroy();
  viewer = new Viewer(
    document.querySelector<HTMLElement>(".rich-text-question-container")!,
    // document.querySelector("#app") as HTMLElement,
    {
      // inline: true,
      viewed() {
        // viewer.zoomTo(1);
      },
      zIndex: 10000,
    }
  );
});
</script>

<style scoped>
.question {
  background-color: var(--app-container-bg-color);
  padding: 5px;
  border-radius: 5px;
}
.rich-text-question-container {
  background-color: transparent;
  font-size: 16px;
}
</style>

<style>
.rich-text-question-container img.inline {
  display: inline;
}
.rich-text-question-container img {
  cursor: pointer;
}
</style>
