<template>
  <div class="review-action">
    <div class="review-tabs">
      <div
        :class="[
          'review-tab',
          { 'is-active': reviewStore.tabKey === 'review' },
        ]"
        @click="switchTab('review')"
      >
        复核校验
      </div>
      <div
        :class="[
          'review-tab',
          { 'is-active': reviewStore.tabKey === 'history' },
        ]"
        @click="switchTab('history')"
      >
        历史记录
      </div>
    </div>

    <div v-show="reviewStore.tabKey === 'review'" class="review-tbody">
      <a-collapse v-model:activeKey="reviewKey" :bordered="false">
        <a-collapse-panel key="1">
          <template #header><FilterFilled />搜索条件 </template>
          <span>科目：</span>
          <a-select
            v-model:value="searchCourseCode"
            placeholder="请选择科目"
            :options="courses"
            :field-names="fieldNames"
            filter-option
            style="width: 140px"
          ></a-select>
          <a-button
            class="m-l-8px"
            type="primary"
            :disabled="!searchCourseCode"
            @click="onSearch"
            >搜索</a-button
          >
        </a-collapse-panel>
        <a-collapse-panel key="2">
          <template #header><PushpinFilled />复核标记 </template>

          <a-radio-group
            v-if="reviewStore.curTask"
            v-model:value="result"
            @change="onMark"
          >
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="0">异常</a-radio>
          </a-radio-group>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div
      v-show="reviewStore.tabKey === 'history'"
      class="review-tbody tbody-history"
    >
      <a-collapse :activeKey="['1']" :bordered="false">
        <a-collapse-panel key="1">
          <template #header><PushpinFilled />复核标记 </template>

          <a-radio-group
            v-if="reviewStore.curTask"
            v-model:value="historyResult"
            @change="onMark"
          >
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="0">异常</a-radio>
          </a-radio-group>
        </a-collapse-panel>
      </a-collapse>
      <div class="history-list">
        <div class="task-list">
          <ul class="list-head">
            <li class="li-grow">准考证号</li>
            <li style="width: 80px">状态</li>
          </ul>
          <div class="list-body">
            <ul
              v-for="(item, index) in dataList"
              :key="item.examNumber"
              :class="[
                'list-row',
                { 'is-active': reviewStore.curTask?.id === item.id },
              ]"
              @click="setCurTask(index)"
            >
              <li class="li-grow">{{ item.examNumber }}</li>
              <li style="width: 80px">
                <span
                  :class="
                    item.assignedSuspect ? 'color-success' : 'color-error'
                  "
                >
                  {{ item.assignedSuspect ? "正常" : "异常" }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { FilterFilled, PushpinFilled } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

import { getSubjectList } from "@/ap/base";
import { reviewAuditTaskHistory } from "@/ap/review";
import { ReviewTaskListItem } from "@/ap/types/review";
import { SubjectItem } from "@/ap/types/base";

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

defineOptions({
  name: "ReviewAction",
});
const emit = defineEmits(["search", "mark"]);
defineExpose({ switchTab });

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

const fieldNames = { label: "name", value: "code" };

// tab
const reviewKey = ref(["1", "2"]);

async function switchTab(key: "review" | "history") {
  reviewStore.setInfo({ tabKey: key });

  if (key === "history") {
    reviewStore.setInfo({ waitTask: reviewStore.curTask });
    await getHistory();
    setCurTask(0);
  } else {
    reviewStore.setInfo({ curTask: reviewStore.waitTask, waitTask: null });
  }
}

// course data
const courses = ref<SubjectItem[]>([]);
async function getCourses() {
  const res = await getSubjectList({ examId: userStore.curExam.id });
  courses.value = res || [];
}
getCourses();

const searchCourseCode = ref("");
const result = ref();
const historyResult = ref();

// history
const curHistoryTaskIndex = ref(0);
const dataList = ref<ReviewTaskListItem[]>([]);
async function getHistory() {
  if (!reviewStore.waitTask?.id) return;
  const res = await reviewAuditTaskHistory({
    id: reviewStore.waitTask?.id,
    subjectCode: searchCourseCode.value,
    pageSize: 30,
  });
  dataList.value = res || [];
}

function setCurTask(index: number) {
  curHistoryTaskIndex.value = index;
  reviewStore.setInfo({ curTask: dataList.value[index] });
}

// actions
function onSearch() {
  emit("search", searchCourseCode.value);
}

function onMark() {
  emit(
    "mark",
    reviewStore.tabKey === "review" ? result.value : historyResult.value
  );
}

// watch
watch(
  () => reviewStore.curTask,
  (val) => {
    result.value = undefined;
    if (reviewStore.tabKey === "history") {
      historyResult.value = reviewStore.curTask?.assignedSuspect;
    }
  }
);
</script>
