<template>
  <div class="my-container">
    <mark-header />
    <div class="tw-flex tw-gap-1">
      <mark-history
        title="给分记录"
        :subjectCode="subjectCode"
        :markerId="markerId"
        :markerScore="markerScore"
        :getHistory="getQualityHistory"
      />
      <mark-body @error="renderError" />
    </div>
  </div>
  <AnswerModal />
  <PaperModal />
  <MinimapModal />
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { store } from "@/store/store";
import MarkHeader from "./MarkHeader.vue";
import { useRoute } from "vue-router";
import MarkBody from "./MarkBody.vue";
import MarkHistory from "@/features/mark/MarkHistory.vue";
import { getAdminPageSetting } from "@/api/inspectPage";
import MinimapModal from "@/features/mark/MinimapModal.vue";
import PaperModal from "@/features/mark/PaperModal.vue";
import AnswerModal from "@/features/mark/AnswerModal.vue";
import { getPaper } from "@/api/jsonMark";
import { getQualityHistory } from "@/api/qualityPage";

const route = useRoute();
const { subjectCode, markerId, markerScore } = route.query as {
  subjectCode: string;
  markerId: string;
  markerScore: string;
};

async function updateSetting() {
  const settingRes = await getAdminPageSetting(subjectCode);
  const { examType, fileServer, subject, userName, splitConfig, enableSplit } =
    settingRes.data;
  store.initSetting({
    examType,
    fileServer,
    subject,
    userName,
    splitConfig,
    enableSplit,
  });

  if (store.setting.subject?.paperUrl && store.isMultiMedia) {
    await getPaper(store);
  }
}

onMounted(async () => {
  await updateSetting();
  store.historyOpen = true;
});

const renderError = () => {
  store.currentTask = undefined;
  store.message = "加载失败，请重新加载。";
};
</script>

<style scoped>
.my-container {
  width: 100%;
}
</style>
