<template>
  <div class="my-container">
    <mark-header />
    <!-- <div class="tw-flex tw-gap-1">
      <mark-history />
      <mark-body />
      <mark-board-track v-if="showMarkBoardTrack" @submit="saveTaskToServer" />
      <mark-board-key-board
        v-if="showMarkBoardKeyBoard"
        @submit="saveTaskToServer"
      />
      <mark-board-mouse v-if="showMarkBoardMouse" @submit="saveTaskToServer" />
    </div> -->
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, watch } from "vue";
import { getSingleStudentTask } from "@/api/inspectPage";
import { store } from "./store";
import MarkHeader from "./MarkHeader.vue";
// import MarkBody from "./MarkBody.vue";
import { useTimers } from "@/setups/useTimers";
// import MarkHistory from "./MarkHistory.vue";

export default defineComponent({
  name: "Inspect",
  components: {
    MarkHeader,
    // MarkBody,
    // MarkHistory,
  },
  setup: () => {
    // const { addInterval } = useTimers();

    // async function updateMarkTask() {
    //   const settingRes = await clearMarkTask();
    // }

    // async function updateSetting() {
    //   const settingRes = await getSetting();
    //   // settingRes.data.uiSetting["answer.paper.scale"] ||= 1;
    //   if (isEmpty(settingRes.data.uiSetting)) {
    //     settingRes.data.uiSetting = {
    //       "answer.paper.scale": 1,
    //       "score.board.collapse": false,
    //       "normal.mode": "keyboard",
    //     } as Setting["uiSetting"];
    //   }
    //   store.setting = settingRes.data;
    // }
    // async function updateStatus() {
    //   const res = await getStatus();
    //   store.status = res.data;
    // }
    // async function updateGroups() {
    //   const res = await getGroup();
    //   store.groups = res.data;
    // }
    // async function updateTask() {
    //   const res = await getTask();
    //   if (res.data.libraryId) {
    //     store.tasks.push(res.data);
    //     store.currentTask = store.tasks[0];
    //   }
    // }

    // // 5秒更新一次tasks
    // addInterval(() => {
    //   // console.log("get task", store.tasks);
    //   if (store.tasks.length < 3) {
    //     updateTask();
    //   }
    // }, 5 * 1000);

    // // TODO: 后续改掉，不需要
    // addInterval(() => {
    //   updateStatus();
    // }, 30 * 1000);

    // onMounted(async () => {
    //   await updateMarkTask();
    //   updateSetting();
    //   updateStatus();
    //   updateGroups();
    //   updateTask();
    // });

    // watch(
    //   () => [store.setting.uiSetting, store.setting.mode],
    //   () => {
    //     updateUISetting(store.setting.mode, store.setting.uiSetting);
    //   },
    //   { deep: true }
    // );

    // const showMarkBoardTrack = computed(() => {
    //   return store.setting.mode === ModeEnum.TRACK;
    // });

    // const showMarkBoardKeyBoard = computed(() => {
    //   return (
    //     store.setting.mode === ModeEnum.COMMON &&
    //     store.setting.uiSetting["normal.mode"] === "keyboard"
    //   );
    // });

    // const showMarkBoardMouse = computed(() => {
    //   return (
    //     store.setting.mode === ModeEnum.COMMON &&
    //     store.setting.uiSetting["normal.mode"] === "mouse"
    //   );
    // });

    // const saveTaskToServer = async () => {
    //   console.log("save task to server");
    //   const res = (await saveTask()) as any;
    //   updateStatus();
    //   if (res.data.success && store.currentTask) {
    //     let { libraryId, studentId } = store.currentTask;
    //     const i = store.markResults.findIndex(
    //       (s) => s.libraryId === libraryId && s.studentId === studentId
    //     );
    //     store.markResults.splice(i, 1);
    //     store.currentTask = undefined;
    //     store.tasks.shift();
    //   } else {
    //     console.log(res.data.message);
    //   }
    // };

    async function getSingleStuTask() {
      return getSingleStudentTask("1581");
    }
    console.log(getSingleStuTask());
    return {
      store,
      // saveTaskToServer,
      // showMarkBoardTrack,
      // showMarkBoardKeyBoard,
      // showMarkBoardMouse,
    };
  },
});
</script>

<style scoped>
.my-container {
  width: 100%;
}
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
