<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" />
      </template>
      <template #download>
        <qm-button :icon="h(VerticalAlignBottomOutlined)" @click="downloadTpl"
          >考生导入模板</qm-button
        >
      </template>
    </qm-low-form>
  </my-modal>
</template>
<script name="StuImportFileDialog" lang="ts" setup>
import { ref, reactive, h } from "vue";
import { importStu, exportStu } from "@/ap/baseDataConfig";
import { VerticalAlignBottomOutlined } from "@ant-design/icons-vue";
import { downloadByCrossUrl } from "@/utils/tool";
import { useUserStore } from "@/store";

const userStore = useUserStore();
const form = ref();
const visible = defineModel();
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;
};
const submitHandle = () => {
  form.value.formRef.validate().then(() => {
    importStu({ examId: userStore.curExam?.id as number, ...params }).then(
      (res: any) => {
        window.$message.success("考生导入成功");
        visible.value = false;
      }
    );
  });
};
const downloadTpl = () => {
  exportStu({ examId: userStore.curExam.id });
};
</script>
<style lang="less" scoped></style>
