<template>
  <div class="review">
    <div class="review-head">
      <h2 v-if="reviewStore.curTask" class="review-title">
        {{ reviewStore.curTask.examNumber }} - {{ reviewStore.curTask.name }} -
        {{ userStore.curExam?.name }}
      </h2>

      <div class="review-stat">
        <p class="color-success">
          <CheckCircleFilled />已处理：{{ progress.finishCount }}
        </p>
        <p class="color-error">
          <CloseCircleFilled />未处理：{{ progress.todoCount }}
        </p>
      </div>

      <div class="review-prev">
        <a-button
          v-if="reviewStore.tabKey === 'review'"
          :disabled="loading"
          @click="onPrevTask"
        >
          <template #icon><ArrowLeftOutlined /></template> 上一个
        </a-button>
      </div>
    </div>

    <!-- body -->
    <div class="review-body">
      <ReviewImage />

      <!-- ReviewMarkPan -->
      <ReviewMarkPan
        v-if="reviewStore.curTask"
        :task-info="{
          examNumber: reviewStore.curTask.examNumber,
          name: reviewStore.curTask.name,
        }"
        @mark="onMark"
      />
    </div>

    <!-- action -->
    <ReviewAction ref="reviewActionRef" @mark="onMark" @search="onSearch" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, onMounted } from "vue";
import {
  CheckCircleFilled,
  CloseCircleFilled,
  ArrowLeftOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

import {
  reviewAuditTask,
  reviewAuditTaskSave,
  reviewAuditProgress,
  reviewAuditTaskRelease,
} from "@/ap/review";
import { ReviewTaskListItem } from "@/ap/types/review";
import { SubjectItem } from "@/ap/types/base";

import { useUserStore, useReviewStore } from "@/store";
import useLoading from "@/hooks/useLoading";

import ReviewAction from "./ReviewAction.vue";
import ReviewImage from "../../Review/ReviewImage.vue";
import ReviewMarkPan from "../../Review/ReviewMarkPan.vue";

const userStore = useUserStore();
const reviewStore = useReviewStore();

defineOptions({
  name: "ReviewAudit",
});

// 任务相关
const searchModel = reactive({
  examId: userStore.curExam.id,
  subjectCode: "",
});

const { loading, setLoading } = useLoading();

async function getNextTask() {
  const res = await reviewAuditTask(searchModel);
  reviewStore.setInfo({ curTask: res || null });

  if (!reviewStore.curTask) {
    message.error("没有下一个了！");
    return;
  }
}

const reviewActionRef = ref();
async function onPrevTask() {
  reviewActionRef.value?.switchTab("history");
}

// 任务进度
const progress = ref({
  finishCount: 0,
  todoCount: 0,
});
async function updateProgress() {
  const res = await reviewAuditProgress(searchModel);
  progress.value = res || {};
}

// actions
async function onMark(assignedSuspect: boolean) {
  if (!reviewStore.curTask) return;

  if (loading.value) return;
  loading.value = true;

  try {
    await reviewAuditTaskSave({ id: reviewStore.curTask.id, assignedSuspect });
    if (reviewStore.tabKey === "history") return;

    await getNextTask();
  } catch (error) {
    loading.value = false;
  }
}

async function onSearch(subjectCode: string) {
  searchModel.subjectCode = subjectCode;
  await getNextTask();
  await updateProgress();
}

async function releaseTask() {
  await reviewAuditTaskRelease({ examId: userStore.curExam.id });
}

onMounted(async () => {
  reviewStore.resetInfo();
  await releaseTask();
});
onBeforeUnmount(async () => {
  await releaseTask();
});
</script>
