<template>
  <a-modal
    v-model:open="visible"
    :width="456"
    style="top: 10vh"
    title="重新生成缺考数据"
  >
    <div class="reset-tips">
      <h3>生成条件</h3>
      <p>1.客观题未作答+主观题有作答的考生；</p>
      <p>2.客观题未作答+主观题没有作答+卡1或卡2任一题卡考号</p>
      <p>
        填涂≧
        <a-input-number
          v-model:value="examNumberFillCount"
          :min="1"
          :max="999"
          :precision="0"
          :controls="false"
          style="width: 50px; margin: 0 5px; vertical-align: middle"
        ></a-input-number>
        位+有条码的考生。
      </p>
    </div>

    <template #footer>
      <div class="box-justify">
        <div></div>

        <div>
          <a-button type="text" @click="close">取消</a-button>
          <a-button type="primary" @click="confirm">确认</a-button>
        </div>
      </div>
    </template>
  </a-modal>

  <!-- TaskProgressDialog -->
  <TaskProgressDialog ref="taskProgressDialogRef" :task="curExportTask" />
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import useModal from "@/hooks/useModal";
import { absentReset } from "@/ap/absentCheck";
import { absentTemplateDownload } from "@/ap/absentCheck";
import useLoading from "@/hooks/useLoading";

import { useUserStore } from "@/store";
import { message } from "@qmth/ui";

import TaskProgressDialog from "../ResultExport/TaskProgressDialog.vue";

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

/* modal */
const { visible, open, close } = useModal();
defineExpose({ open, close });

const userStore = useUserStore();

const examNumberFillCount = ref<number>();

const { loading, setLoading } = useLoading();
const curExportTask = ref({ id: "", name: "" });
const taskProgressDialogRef = ref();
async function confirm() {
  if (!examNumberFillCount.value) {
    message.error("请输入位数");
    return;
  }

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

  const res = await absentReset({
    examId: userStore.curExam.id,
    examNumberFillCount: examNumberFillCount.value,
  }).catch(() => {});
  setLoading(false);

  if (!res) return;

  curExportTask.value = {
    id: res.taskId,
    name: "缺考校验重新生成",
  };
  taskProgressDialogRef.value?.open();
}

watch(
  () => visible.value,
  (val) => {
    if (val) {
      examNumberFillCount.value = undefined;
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.reset-tips {
  h3 {
    height: 24px;
    font-weight: 500;
    font-size: 15px;
    color: @text-color1;
    line-height: 24px;
    margin-bottom: 8px;
  }
  p {
    height: 22px;
    font-weight: 400;
    font-size: 14px;
    color: @text-color2;
    line-height: 22px;
    margin-bottom: 8px;
  }
}
</style>
