<template>
  <div class="mark">
    <div class="mark-header">
      <div v-if="store.currentTask" class="mark-header-part">
        <div class="header-noun">
          <span>课程名称：</span>
          <span>
            {{ store.currentTask.subject.name }}（{{
              store.currentTask.subject.code
            }}）</span
          >
        </div>
        <div class="header-noun">
          <span>试卷编号：</span>
          <span>{{ store.currentTask.paperNumber }}</span>
        </div>
        <div class="header-noun">
          <span>姓名：</span>
          <span>{{ store.currentTask.studentName }}</span>
        </div>
        <div class="header-noun">
          <span>学号：</span>
          <span>{{ store.currentTask.studentCode }}</span>
        </div>
      </div>
      <div class="mark-header-part">
        <div class="header-text-btn header-logout" @click="logout">
          <img class="header-icon" src="@/assets/icons/icon-return.svg" />返回
        </div>
      </div>
    </div>
    <mark-tool :actions="['minimap', 'sizeScale', 'imgScale']" />

    <div class="mark-main">
      <mark-body @error="renderError" />
    </div>
  </div>
  <MinimapModal />
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { store } from "@/store/store";
import MinimapModal from "@/features/mark/MinimapModal.vue";
import MarkTool from "@/features/mark/MarkTool.vue";
import MarkBody from "../studentInspect/MarkBody.vue";
import { message } from "ant-design-vue";
import { getSingleStudentTaskOfStudentTrack } from "@/api/studentTrackPage";
import vls from "@/utils/storage";
import { doLogout } from "@/api/markPage";

const studentId = $ref(vls.get("check-students", ""));

function logout() {
  doLogout();
}

async function updateTask() {
  const mkey = "fetch_task_key";
  void message.info({ content: "获取任务中...", duration: 1.5, key: mkey });
  let res = await getSingleStudentTaskOfStudentTrack(studentId);
  void message.success({
    content: res.data.studentId ? "获取成功" : "无任务",
    key: mkey,
  });

  if (res.data.studentId) {
    let rawTask = res.data;
    rawTask.sheetUrls = rawTask.sheetUrls || [];
    // rawTask.sheetUrls = ["/1-1.jpg", "/1-2.jpg"];
    rawTask.sliceUrls = [...rawTask.sheetUrls];
    rawTask.subject = {
      code: rawTask.courseCode,
      name: rawTask.courseName,
    };
    store.currentTask = rawTask;
  } else {
    store.message = res.data.message;
  }
}

async function fetchTask() {
  await updateTask();
}

onMounted(async () => {
  await fetchTask();
});

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