<template>
  <Modal
    v-model="modalIsShow"
    :title="title"
    :footer-hide="true"
    :mask-closable="false"
    @on-visible-change="visibleChange"
  >
    <div :class="prefixCls">
      <div :class="[`${prefixCls}-body`]">
        <Upload
          type="drag"
          :action="uploadUrl"
          :headers="headers"
          :max-size="maxSize"
          :format="format"
          :accept="accept"
          :data="uploadData"
          :before-upload="handleBeforeUpload"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleExceededSize"
          :on-error="handleError"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          ref="UploadComp"
        >
          <div style="padding: 40px 0">
            <Icon class="upload-icon" type="md-cloud-upload" size="40"></Icon>
            <p>将文件拖到此处，或<em>点击上传</em></p>
          </div>
        </Upload>
        <p
          :class="[
            `${prefixCls}-tips`,
            {
              'cc-tips-success': res.success,
              'cc-tips-error': !res.success,
            },
          ]"
          v-if="res.msg"
        >
          {{ res.msg }}
        </p>
      </div>
      <div :class="[`${prefixCls}-footer`]" v-if="downloadUrl">
        文件下载：
        <a :href="downloadUrl" :download="dfilename">{{ dfilename }}</a>
      </div>
    </div>
  </Modal>
</template>

<script>
const prefixCls = "cc-import-file";

export default {
  name: "upload-file-dialog",
  props: {
    title: {
      type: String,
      default: "文件上传",
    },
    downloadUrl: {
      type: String,
      default: "",
    },
    downloadFilename: String,
    format: {
      type: Array,
      default() {
        return ["jpg", "png"];
      },
    },
    uploadUrl: {
      type: String,
      required: true,
    },
    uploadData: {
      type: Object,
      default() {
        return {};
      },
    },
    headers: {
      type: Object,
      default() {
        return {};
      },
    },
    maxSize: {
      type: Number,
      default: 10 * 1024,
    },
    addFilenameParam: {
      type: String,
      default: "fileName",
    },
  },
  data() {
    return {
      prefixCls,
      modalIsShow: false,
      res: {
        success: true,
        msg: "",
      },
    };
  },
  computed: {
    dfilename() {
      return this.downloadFilename || this.downloadUrl.split("/").pop();
    },
    accept() {
      return this.format.map((el) => `.${el}`).join();
    },
  },
  methods: {
    visibleChange(visible) {
      if (!visible) {
        this.res = {
          success: true,
          msg: "",
        };
        this.$refs.UploadComp.clearFiles();
      }
    },
    handleBeforeUpload(file) {
      if (this.addFilenameParam)
        this.uploadData[this.addFilenameParam] = file.name;
      this.$refs.UploadComp.clearFiles();
    },
    handleError(error) {
      this.res = {
        success: false,
        msg: error.message,
      };
    },
    handleSuccess(response) {
      if (response.code === 0) {
        this.res = {
          success: true,
          msg: "导入成功！",
        };
        this.$emit("upload-success");
      } else {
        this.res = {
          success: false,
          msg: response.message,
        };
      }
    },
    handleFormatError() {
      this.res = {
        success: false,
        msg: "只支持文件格式为" + this.format.join("/"),
      };
    },
    handleExceededSize() {
      this.res = {
        success: false,
        msg: "文件大小不能超过" + Math.floor(this.maxSize / 1024) + "M",
      };
    },
    handleRemove() {
      this.resData = "";
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>
