<template>
  <div>
    <el-upload
      ref="upload"
      :action="versionUploadApi"
      :auto-upload="true"
      :headers="headers"
      :file-list="fileList"
      :limit="limit"
      :show-file-list="true"
      :http-request="uploadVersionFile"
      :list-type="type"
      :multiple="limit > 1"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-exceed="onExceed"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">选择文件</el-button>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :z-index="99">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import { Notification } from "element-ui";
export default {
  computed: {
    ...mapGetters(["versionUploadApi"]),
  },
  props: {
    type: {
      type: String,
      default: "text",
    },
    limit: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      // files: [],
      headers: {
        Authorization: getToken(),
      },
    };
  },
  methods: {
    beforeUpload(file) {
      const isExe = file.name.endsWith(".exe");
      if (!isExe) {
        this.$message.error("只允许上传.exe文件！");
        return false; // 阻止上传
      }
      return true; // 允许上传
    },
    uploadVersionFile(e) {
      this.fileList.push(e.file);
      this.$emit("success");
    },
    getFileList() {
      if (this.limit == 1) {
        return this.fileList[0];
      } else {
        return this.fileList;
      }
    },
    handleSuccess(response, file, fileList) {
      console.log("handleSuccess");
      setTimeout(() => {
        this.fileList.push({
          url: response.data[0],
          id: response.data.id,
        });
      }, 100);
      // this.files = response.data
      this.$emit("success", response.data);
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      // console.log(e)
      const m = JSON.parse(e.message);
      Notification.error({
        title: m.message,
        duration: 5000,
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onExceed(files ) {
      const file=files[0];
      const isExe = file.name.endsWith(".exe");
      if (!isExe) {
        this.$message.error("只允许上传.exe文件！");
        return false; // 阻止上传
      }
      console.log(files);
      if(this.limit == 1&&this.fileList.length>0){
        this.fileList.splice(0,1)
        this.fileList.push(files[0])
        //  this.$set(this.fileList,0,files[0]) 
      //  this.fileList.push({
      //     url: response.data[0],
      //     id: response.data.id,
      //   });
        return
      }
      this.$notify.error({
        title: "错误",
        message: `最多上传${this.limit}个文件`,
      });
    },
    handleRemove(file, fileList) {
      console.log(file);
      let arr = fileList.map((item) => item.url);
      // 删除数据
      let index = this.fileList.findIndex((ele) => ele.url == file.url);
      this.fileList.splice(index, 1);
      this.$emit("remove", arr);
    },
    clearFiles() {
      this.fileList=[];
      this.$refs.upload.clearFiles();
    },
  },
};
</script>
<style>
/* .el-upload-list__item {
  transition: none;
} */
</style>