<template>
  <!-- 导入文件组件 -->
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="dialog"
    :title="title"
    custom-class="common_dialog"
  >
    <el-form ref="form" size="small" label-width="auto">
      <el-form-item :label="$t('button.importList')">
        <el-upload
          :data="dataObj"
          :multiple="true"
          class="image-uploader"
          :action="apiurl"
          :headers="headers"
          :on-success="success"
          :on-error="error"
          :before-upload="beforeUpload"
          :accept="acceptFileType"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">{{
            $t("button.import")
          }}</el-button>
          <div slot="tip" class="el-upload__tip">
            {{ $t("tag.fileTips") }}{{ $t("tag.fileAcceptXlsx") }}
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label>
        <el-button @click="downTemplate" :loading="downloading">{{
          $t("button.downloadTemplate")
        }}</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">
        {{ $t("button.cancel") }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    uploadUrl: {
      type: String,
      required: true,
    },
    downloadFunc: {
      type: Function,
      required: true,
    },
    type: {
      type: Number,
    },
  },
  computed: {
    apiurl() {
      return process.env.VUE_APP_BASE_API + this.uploadUrl;
    },
  },
  data() {
    return {
      title: "",
      loading: false,
      dialog: false,
      fileList: [],
      dataObj: { moduleId: "", moduleName: "" },
      headers: {
        Authorization: `xytoken_${getToken()}`,
      },
      acceptFileType: ".xls,.xlsx",
      downloading: false,
    };
  },
  methods: {
    cancel() {
      this.dialog = false;
      this.fileList = [];
      this.$parent.init();
    },
    downTemplate() {
      this.downloading = true;
      this.downloadFunc()
        .then((res) => {
          this.downloading = false;
        })
        .catch(() => {
          this.downloading = false;
        });
    },
    success(response, file, fileList) {
      let { code, msg } = response;
      if (code === "200") {
        this.$message.success("导入成功（Import succeeded）");
        this.cancel();
      } else {
        this.$message.error(msg || "导入失败（Import failed）");
        this.fileList = [];
      }
    },
    error(err, file, fileList) {
      this.$message.error("导入失败（Import failed）");
      this.fileList = [];
    },
    beforeUpload(file) {
      if (!this.uploadUrl) {
        this.$message.error("未开发");
        return false;
      }
      if (this.type) {
        this.dataObj.type = this.type;
      }
      let type = file.name.substring(file.name.lastIndexOf("."));

      let fileType = this.acceptFileType.split(",");
      if (!fileType.includes(type)) {
        this.$message.error("文件类型错误（File type error）");
        return false;
      }
      if (file.size > 20 * 1024 * 1024) {
        this.$message.error(
          "文件大小最大为20M（The maximum file size is 20M）"
        );
        return false;
      }
    },
  },
};
</script>

<style scoped></style>
