<template>
  <CommonMarkHeader
    :isSingleStudent="isSingleStudent"
    :clearTasks="clearTasks"
    showPaperAndAnswer
    showScoreBoard
  >
    <span>
      <span class="header-small-text">待处理</span>
      <span class="highlight-text">{{ store.status.totalCount ?? "-" }}</span>
    </span>
    <span>
      <span class="header-small-text">已处理</span>
      <span class="highlight-text">{{ store.status.markedCount ?? "-" }}</span>
    </span>
    <template #modeControl>
      <div class="tw-flex">
        <a-dropdown class="header-bg-color">
          <template v-if="!store.setting.forceMode" #overlay>
            <a-menu>
              <a-menu-item key="1" @click="toggleSettingMode">
                {{ exchangeModeName }}
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            style="
              color: rgba(255, 255, 255, 0.5);
              border: none;
              display: flex;
              align-items: center;
            "
          >
            <img
              src="../../assets/trackmode.png"
              style="
                width: 11px;
                height: 12px;
                display: inline;
                margin-right: 2px;
              "
            />
            {{ modeName }}
            <!-- <div
              v-if="!store.setting.forceMode"
              class="dropdown-triangle"
            ></div> -->
            <div class="dropdown-triangle"></div>
          </a-button>
        </a-dropdown>
      </div>
    </template>
  </CommonMarkHeader>
</template>

<script setup lang="ts">
import { store } from "@/store/store";
import { useRoute } from "vue-router";
import { clearArbitrateTask } from "@/api/arbitratePage";
import CommonMarkHeader from "@/components/CommonMarkHeader.vue";
const modeName = $computed(() =>
  store.setting.mode === "TRACK" ? "轨迹模式" : "普通模式"
);

const exchangeModeName = $computed(() =>
  store.setting.mode === "TRACK" ? "普通模式" : "轨迹模式"
);
async function toggleSettingMode() {
  if (store.isTrackMode) {
    store.setting.mode = "COMMON";
  } else {
    store.setting.mode = "TRACK";
  }

  // store.currentTask.markResult.trackList = store.currentTask.questionList
  //   .map((q) => q.trackList)
  //   .flat();
  // store.currentTask.markResult.specialTagList = [
  //   ...(store.currentTask.specialTagList ?? []),
  // ];
  // store.currentTask.markResult.scoreList = store.currentTask.questionList.map(
  //   (q) => q.score
  // );
  sessionStorage.setItem("arbitrate_local_mode", store.setting.mode);

  const body = document.querySelector("body");
  if (body) body.innerHTML = "重新加载中...";
  // 等待一秒后，重新加载页面
  await new Promise((resolve) => setTimeout(resolve, 1000));
  window.location.reload();
}

const route = useRoute();
let isSingleStudent = !!route.query.historyId;
const {
  subjectCode,
  groupNumber,
  historyId: libraryId,
} = route.query as {
  subjectCode: string;
  groupNumber: string;
  historyId: string;
};

let clearTasks = clearArbitrateTask.bind(
  null,
  libraryId,
  subjectCode,
  groupNumber
);
</script>
<style>
.header-bg-color {
  background-color: var(--header-bg-color);
}
.header-bg-color.ant-btn:hover {
  background-color: var(--app-ant-select-bg-override-color) !important;
}
</style>
