<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 #subjectCode>
        <SelectSubject
          v-model="params.subjectCode"
          :exam-id="userStore.curExam?.id"
        ></SelectSubject>
      </template>
    </qm-low-form>
  </my-modal>
</template>
<script name="ImportCardDialog" lang="ts" setup>
import { ref, reactive } from "vue";
import { importCard } from "@/ap/baseDataConfig";
import { useUserStore } from "@/store";
import SelectSubject from "@/components/SelectSubject/index.vue";
const userStore = useUserStore();
const form = ref();
const visible = defineModel();
const emit = defineEmits(["success"]);

const params = reactive({
  subjectCode: "",
  remark: "",
  file: null,
});
const fields = ref([
  { prop: "subjectCode", cell: "subjectCode", label: "科目题卡", colSpan: 24 },
  { prop: "remark", type: "textarea", label: "备注", colSpan: 24 },
  { prop: "file", cell: "file", label: "选择卡格式", colSpan: 24 },
]);

const rules = {
  subjectCode: [{ required: true, message: "请选择科目" }],
  file: [{ required: true, message: "请上传文件" }],
};
const getFile = (file: any) => {
  params.file = file;
};
const submitHandle = () => {
  form.value.formRef.validate().then(() => {
    importCard({ examId: userStore.curExam?.id, ...params }).then(() => {
      window.$message.success("导入成功");
      visible.value = false;
    });
  });
};
</script>
<style lang="less" scoped></style>
