<template>
  <el-dialog
    custom-class="import-file-dialog"
    :visible.sync="modalIsShow"
    :title="dialogTitle"
    width="480px"
    :modal="true"
    append-to-body
    @open="visibleChange"
    @close="dialogClose"
  >
    <div class="tpl-download">
      <span>模板下载：</span>
      <svg-btn
        name="daoru"
        color="#6D5FF6"
        hoverBgColor="#fff"
        @click="exportFile"
        >下载</svg-btn
      >
    </div>
    <el-upload
      ref="UploadComp"
      drag
      :action="uploadUrl"
      :headers="headers"
      :max-size="maxSize"
      :accept="accept"
      :format="format"
      :data="uploadDataDict"
      :on-error="handleError"
      :on-success="handleSuccess"
      :on-change="fileChange"
      :http-request="upload"
      :disabled="loading"
      :auto-upload="false"
      :multiple="false"
      :before-remove="beforeRemove"
      style="text-align: center"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        {{ `点击或将文件拖拽到这里上传(只能上传${format.join("、")}文件)` }}
      </div>
      <!-- <el-button
        slot="trigger"
        size="small"
        type="primary"
        icon="icon icon-search-white"
        :disabled="loading"
      >
        选择文件
      </el-button>
      <el-button
        size="small"
        type="primary"
        icon="icon icon-save-white"
        :loading="loading"
        :disabled="!fileValid"
        @click="submitUpload"
      >
        确认上传
      </el-button>
      <el-button
        size="small"
        type="primary"
        icon="icon icon-delete-white"
        :disabled="loading"
        @click="removeFile"
      >
        清空文件
      </el-button>
      <el-button
        v-if="templateUrl || templateDownloadHandle"
        size="small"
        type="primary"
        icon="icon icon-export-white"
        :loading="downloading"
        @click="exportFile"
      >
        下载模板
      </el-button> -->
    </el-upload>
    <!-- <p v-if="filename" class="tips-info">{{ filename }}</p> -->
    <p v-if="!res.success" class="tips-info tips-error">{{ res.message }}</p>
    <div slot="footer">
      <el-button type="primary" @click="submitUpload" :disabled="!filename"
        >确认</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fileMD5 } from "@/plugins/md5";
import { $httpWithMsg } from "@/plugins/axios";
import { downloadByApi } from "@/plugins/download";

export default {
  name: "ImportFileDialog",
  props: {
    dialogTitle: {
      type: String,
      default: "导入文件",
    },
    format: {
      type: Array,
      default() {
        return ["xlsx", "xls"];
      },
    },
    accept: {
      type: String,
      default: null,
    },
    uploadUrl: {
      type: String,
      required: true,
    },
    uploadData: {
      type: Object,
      default() {
        return {};
      },
    },
    maxSize: {
      type: Number,
      default: 20 * 1024 * 1024,
    },
    addFilenameParam: {
      type: String,
      default: "filename",
    },
    addFileParam: {
      type: String,
      default: "file",
    },
    templateUrl: {
      type: String,
      default: "",
    },
    templateDownloadHandle: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
      headers: {
        md5: "",
      },
      res: {},
      loading: false,
      uploadDataDict: {},
      filename: "",
      fileValid: false,
      downloading: false,
    };
  },
  methods: {
    dialogClose() {
      this.res = {};
      this.loading = false;
      this.uploadDataDict = {};
      this.filename = "";
      this.fileValid = false;
      this.$refs.UploadComp.clearFiles();
    },
    visibleChange() {},
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    checkFileFormat(fileType) {
      const _file_format = fileType.split(".").pop().toLowerCase();
      return this.format.length
        ? this.format.some((item) => item.toLowerCase() === _file_format)
        : true;
    },
    beforeRemove() {
      this.dialogClose();
      return true;
    },
    fileChange(fileObj, fileList) {
      if (fileObj.status === "ready") {
        this.handleBeforeUpload(fileObj.raw).catch(() => {});
        if (fileList.length > 1) {
          fileList[0] = fileList[1];
          fileList.splice(1, 1);
        }
      }
    },
    async handleBeforeUpload(file) {
      this.res = {};
      console.log("handleBeforeUpload");
      this.filename = file.name;
      this.uploadDataDict = {
        ...this.uploadData,
      };
      this.uploadDataDict[this.addFilenameParam] = file.name;

      if (!this.checkFileFormat(file.name)) {
        this.handleFormatError();
        this.fileValid = false;
        return Promise.reject();
      }

      if (file.size > this.maxSize) {
        this.handleExceededSize();
        this.fileValid = false;
        return Promise.reject();
      }

      const md5 = await fileMD5(file);
      this.headers["md5"] = md5;
      this.fileValid = true;

      return true;
    },
    upload(options) {
      if (!options.file) return Promise.reject("文件丢失");

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

      return $httpWithMsg.post(options.action, formData, {
        headers: options.headers,
      });
    },
    handleError(error) {
      this.loading = false;
      this.res = {
        success: false,
        message: error.response.data.message,
      };
      console.log("err", error.response);
      this.uploadDataDict = {};
      this.filename = "";
      this.fileValid = false;
      this.$refs.UploadComp.clearFiles();
    },
    handleSuccess(res) {
      this.loading = false;
      this.res = {
        success: true,
        message: "导入成功！",
      };
      this.cancel();
      this.$emit("uploaded", res);
    },
    handleFormatError() {
      const content = "只支持文件格式为" + this.format.join("/");
      this.res = {
        success: false,
        message: content,
      };
    },
    handleExceededSize() {
      const content =
        "文件大小不能超过" + Math.floor(this.maxSize / (1024 * 1024)) + "M";
      this.res = {
        success: false,
        message: content,
      };
    },
    // action
    submitUpload() {
      if (this.loading) return;
      this.$refs.UploadComp.submit();
      this.loading = true;
    },
    // removeFile() {
    //   if (this.loading) return;
    //   this.uploadDataDict = {};
    //   this.filename = "";
    //   this.fileValid = false;
    //   this.res = {};
    //   this.$refs.UploadComp.clearFiles();
    // },
    exportFile() {
      if (this.templateUrl) {
        this.toDownload();
        return;
      }

      if (this.templateDownloadHandle) {
        this.toHandleDownload();
      }
    },
    async toDownload() {
      if (this.downloading) return;
      this.downloading = true;

      const res = await downloadByApi(() => {
        return $httpWithMsg.get(this.templateUrl, {
          responseType: "blob",
        });
      }).catch((e) => {
        this.$message.error(e || "下载失败，请重新尝试！");
      });
      this.downloading = false;

      if (!res) return;
      this.$message.success("下载成功！");
    },
    async toHandleDownload() {
      if (this.downloading) return;
      this.downloading = true;
      await this.templateDownloadHandle().catch(() => {});
      this.downloading = false;
    },
  },
};
</script>
<style lang="scss">
.import-file-dialog {
  .el-dialog__body {
    background-color: #f0f0f0;
    padding-top: 15px;
    padding-bottom: 10px;
    .tpl-download {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .el-upload.el-upload--text {
      width: 100%;
      .el-upload-dragger {
        width: 100%;
      }
    }
  }
}
</style>
