<template>
  <my-modal
    v-model:open="visible"
    title="考生导入"
    :width="600"
    @ok="submitHandle"
  >
    <qm-low-form
      :params="params"
      :fields="fields"
      :label-width="110"
      :rules="rules"
      ref="form"
    >
      <template #file>
        <ImportButton
          @fileChange="getFile"
          :maxSize="200 * 1024 * 1024"
          accept=".txt"
        />
      </template>
      <template #download>
        <qm-button :icon="h(VerticalAlignBottomOutlined)" @click="downloadTpl"
          >考生导入模板</qm-button
        >
      </template>
    </qm-low-form>
    <my-modal
      v-model:open="showProgressDialog"
      title="考生导入进度"
      @cancel="progressClose"
      @ok="closeSubModal"
    >
      <p>{{ curFileName }}</p>
      <a-progress :percent="progress" :status="progressStatus" />
      <p class="color-warning">{{ errMsg }}</p>
    </my-modal>
  </my-modal>
</template>
<script name="StuImportFileDialog" lang="ts" setup>
import { ref, reactive, h } from "vue";
import { importStu, exportStu, importStuProgress } from "@/ap/baseDataConfig";
import { VerticalAlignBottomOutlined } from "@ant-design/icons-vue";
import { useUserStore } from "@/store";

const props = defineProps<{ curRow: any }>();
const userStore = useUserStore();
const form = ref();
const visible = defineModel();
const showProgressDialog = ref(false);
const progressStatus = ref<
  "active" | "success" | "normal" | "exception" | undefined
>("active"); // 'exception' 'normal' 'success'
const progress = ref(0);
const errMsg = ref("");
const curFileName = ref("");
const emit = defineEmits(["success"]);

const params = reactive({
  file: null,
});
const fields = ref([
  { prop: "file", cell: "file", label: "选择文件", colSpan: 24 },
  { cell: "download", label: "下载模板", colSpan: 24 },
]);

const rules = {
  file: [{ required: true, message: "请上传文件" }],
};
const getFile = (file: any) => {
  params.file = file;
  curFileName.value = file?.name || "";
};
function openProcessDialog() {
  progress.value = 0;
  progressStatus.value = "active";
  errMsg.value = "";
  showProgressDialog.value = true;
}
const submitHandle = () => {
  form.value.formRef.validate().then(() => {
    importStu({
      examId: userStore.curExam?.id as number,
      ...params,
      subjectCode: props.curRow?.subjectCode as string,
    }).then((res: any) => {
      let taskId = res.taskId;
      openProcessDialog();

      watchProgress({ taskId });
    });
  });
};
const watchProgress = (obj: { taskId: string }) => {
  if (!showProgressDialog.value) return;
  importStuProgress(obj).then((res: any) => {
    progress.value = res.progress || 0;
    if (res?.progress == 100 && res?.status === "SUCCESS") {
      progressStatus.value = "success";
      errMsg.value = "";
      window.$message.success("导入成功");
      emit("success");
    } else if (res?.status === "FAILED") {
      progressStatus.value = "exception";
      errMsg.value = res?.errMsg || "";
    } else {
      progressStatus.value = "active";
      setTimeout(() => {
        watchProgress(obj);
      }, 3000);
    }
  });
};
const progressClose = () => {
  if (progressStatus.value === "success") {
    visible.value = false;
  }
};
const downloadTpl = () => {
  exportStu({ examId: userStore.curExam?.id });
};
const closeSubModal = () => {
  if (progressStatus.value === "success") {
    visible.value = false;
  }
};
</script>
<style lang="less" scoped></style>
