<template>
  <el-dialog
    class="add-document-dialog"
    :visible.sync="modalIsShow"
    title="上传文档"
    top="10vh"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
    @opened="visibleChange"
  >
    <el-form
      ref="modalFormComp"
      label-width="100px"
      :model="modalForm"
      :rules="rules"
    >
      <el-form-item prop="documentName" label="材料名称：">
        <el-input
          v-model.trim="modalForm.documentName"
          placeholder="材料名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="file" label="选择文件：">
        <upload-fetch-file
          ref="UploadFetchFile"
          input-width="320px"
          :format="format"
          @valid-change="validChange"
          @file-change="fileChange"
        ></upload-fetch-file>
        <div>
          <p class="tips-info">说明：</p>
          <p class="tips-info">1.支持word、Excel、PDF、png/jpg、zip包；</p>
          <p class="tips-info">2.仅能上传一个文件；</p>
          <p class="tips-info">3.文件大小不超过20M。</p>
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="primary" :disabled="isSubmit" @click="submit"
        >确认</el-button
      >
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { documentSave } from "../api";
import UploadFetchFile from "@/components/UploadFetchFile.vue";

const initModalForm = {
  examId: "",
  paperNumber: "",
  documentName: "",
  file: null,
  md5: "",
};

export default {
  name: "add-document-dialog",
  components: { UploadFetchFile },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      modalForm: {
        ...initModalForm,
      },
      rules: {
        documentName: [
          {
            required: true,
            message: "请输入材料名称",
            trigger: "change",
          },
          {
            message: "材料名称不能超过50个字符",
            max: 50,
            trigger: "change",
          },
        ],
        file: [
          {
            required: true,
            message: "请选择文件",
            trigger: "change",
          },
        ],
      },
      format: ["docx", "doc", "xlsx", "xls", "pdf", "jpg", "png", "zip"],
    };
  },
  methods: {
    visibleChange() {
      this.modalForm = this.$objAssign(initModalForm, this.course);
    },
    validChange(result) {
      if (!result.success) {
        this.modalForm.file = null;
        this.modalForm.md5 = "";
        this.$notify.error({ title: "错误提示", message: result.message });
        this.$refs.modalFormComp.validateField("file");
      }
    },
    fileChange({ file, md5 }) {
      this.modalForm.file = file;
      this.modalForm.md5 = md5;
      this.$refs.modalFormComp.validateField("file");
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;

      let formData = new FormData();
      Object.entries(this.modalForm).forEach(([k, v]) => {
        formData.append(k, v);
      });

      const data = await documentSave(formData).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      this.$message.success("添加成功！");
      this.cancel();
      this.$emit("modified");
    },
  },
};
</script>
