<template>
  <div>
    <el-dialog
      class="upload-file-dialog"
      :visible.sync="modalIsShow"
      title="导入"
      top="10vh"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @opened="visibleChange"
    >
      <div class="file-upload-body mb-4">
        <upload-file-view
          input-width="350px"
          :format="['xls', 'xlsx']"
          :upload-url="uploadUrl"
          :upload-data="uploadData"
          @valid-error="validError"
          @upload-success="uploadSuccess"
          ref="UploadFileView"
        ></upload-file-view>
      </div>
      <div class="tips-info">
        <p>
          示例：
          <el-image
            style="width: 200px; height: 50px"
            :src="imgUrl"
            :preview-src-list="[imgUrl]"
          >
          </el-image>
        </p>
        <div class="box-justify align-top">
          <span style="width: 58px">说明：</span>
          <div>
            <p>
              1.只有从本系统下载的考务数据中课程代码与导入云阅卷考务数据课程代码不一致时，才操作此功能；
            </p>
            <p>2.文件为导入云阅卷系统的考务数据文件；</p>
            <p>3.将文件中“考生信息备注”填入原考务数据中的课程代码；</p>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import UploadFileView from "@/components/UploadFileView";

export default {
  name: "upload-file-dialog",
  components: { UploadFileView },
  props: {
    uploadData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      imgUrl: "/img/course-link-import-sample.png",
      // import
      uploadUrl: "/api/exam_course_mapping/import",
    };
  },
  methods: {
    visibleChange() {
      this.$refs.UploadFileView.setAttachmentName("");
    },
    // upload-handler
    validError(errorData) {
      this.$message.error(errorData.message);
    },
    uploadSuccess() {
      this.$message.success("上传成功！");
      this.cancel();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>
