<template>
  <el-dialog
    class="upload-paper-dialog"
    :visible.sync="modalIsShow"
    :title="`上传${curConfig.title}`"
    top="10vh"
    width="620px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
    @opened="visibleChange"
  >
    <div class="file-upload-body">
      <p class="mb-2">
        上传的{{ curConfig.title }}仅限{{ curConfig.format.join(",") }}文件
      </p>
      <upload-file-view
        input-width="360px"
        :format="curConfig.format"
        :upload-url="curConfig.uploadUrl"
        :upload-data="curConfig.uploadData"
        @uploading="uplaoding"
        @valid-error="validError"
        @upload-error="uplaodError"
        @upload-success="uploadSuccess"
        ref="UploadFileView"
      ></upload-file-view>
      <el-button type="info" @click="toPreview" style="margin-left: 10px;"
        >预览</el-button
      >
    </div>
    <div slot="footer">
      <el-button type="primary" @click="confirm" :disabled="loading"
        >确认</el-button
      >
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UploadFileView from "@/components/UploadFileView";
import { attachmentPreview } from "../../login/api";

export default {
  name: "upload-paper-dialog",
  components: { UploadFileView },
  props: {
    paperAttachment: {
      type: Object,
      default() {
        return {};
      }
    },
    uploadType: {
      type: String,
      default: "paper",
      validator(val) {
        return ["paper", "paperConfirm"].includes(val);
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      loading: false,
      hasViewed: false,
      attachment: {},
      config: {
        paper: {
          title: "试卷文件",
          format: ["pdf"],
          uploadData: { type: "PAPER" },
          uploadUrl: "/api/admin/common/file/exam_paper_upload"
        },
        paperConfirm: {
          title: "附件",
          format: ["jpg", "png"],
          uploadData: { type: "FILE" },
          uploadUrl: "/api/admin/common/file/upload"
        }
      },
      curConfig: { format: [], uploadUrl: "" }
    };
  },
  computed: {
    IS_UPLOAD_PAPER() {
      return this.uploadType === "paper";
    }
  },
  methods: {
    visibleChange() {
      this.$refs.UploadFileView.setAttachmentName(
        `${this.paperAttachment.filename || ""}`
      );
      this.attachment = { ...this.paperAttachment };
      this.curConfig = this.config[this.uploadType];
      this.hasViewed = false;
    },
    // upload-handler
    validError(errorData) {
      this.$message.error(errorData.message);
    },
    uplaodError() {
      this.loading = false;
    },
    uploadSuccess(data) {
      this.loading = false;
      this.$message.success("上传成功！");
      let infos = {};
      if (this.IS_UPLOAD_PAPER) {
        infos = {
          attachmentId: data.translate.id,
          filename: data.filename,
          url: data.translate.url,
          pages: data.translate.pages,
          original: data.original
        };
      } else {
        infos = {
          attachmentId: data.id,
          filename: data.filename,
          url: data.url,
          pages: data.pages
        };
      }
      this.attachment = Object.assign(this.attachment, infos);
    },
    uplaoding() {
      this.loading = true;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    confirm() {
      if (!this.attachment.attachmentId) {
        this.$message.error(`请先上传${this.curConfig.title}!`);
        return;
      }
      if (
        !this.hasViewed &&
        this.IS_UPLOAD_PAPER &&
        this.attachment.attachmentId !== this.paperAttachment.attachmentId
      ) {
        this.$message.error(`请先预览上传的试卷!`);
        return;
      }
      this.$emit("confirm", this.attachment, this.uploadType);
      this.cancel();
    },
    async toPreview() {
      if (!this.attachment.attachmentId) {
        this.$message.error(`请先上传${this.curConfig.title}!`);
        return;
      }

      let attachmentId = this.attachment.attachmentId;
      if (this.IS_UPLOAD_PAPER) this.hasViewed = true;

      const data = await attachmentPreview(attachmentId);
      window.open(data.url);
    }
  }
};
</script>

<style lang="css" scoped>
.file-upload-body {
  min-height: 150px;
}
</style>
