<template>
  <div>
    <slot name="down"></slot>
    <div class="d1">
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="url"
        :multiple="false"
        :data="{ ...query }"
        :with-credentials="true"
        :limit="1"
        :on-change="change"
        :on-success="upSuccess"
        :on-error="upError"
      >
        <!-- accept="application/vnd.ms-excel" -->
        <div class="upload-btn">
          <i class="el-icon-upload"></i>
          <el-button class="btn" size="mini" type="primary"
            >选择文件并上传</el-button
          >
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: "downUpData",
  props: {
    id: "",
    examId: "",
    url: {
      type: String,
      default: "",
    },

    fileName: {
      type: String,
      default: "模板",
    },
  },
  computed: {
    query: function () {
      if (this.id) {
        return {
          id: this.id,
        };
      } else if (this.examId) {
        return {
          examId: this.examId,
        };
      }
    },
  },
  data() {
    return {
      file: null,
    };
  },
  methods: {
    async submitUpload() {
      this.$refs.upload.submit();

      // const formData = new FormData()
      // formData.append('id',this.componentId)
      // formData.append('file',new File(this.file.raw))
      // let {status,info} = await uploadExcel(formData);
      // if(status===0){
      //   this.$message.success(info);
      //   this.$emit("upSuccess")
      // } else {
      //   this.$message.error(info);
      // }
    },
    upSuccess(res) {
      if (res && res.status == 0 ) {
        this.$message.success("上传成功");
        this.$emit("upSuccess",res);
        this.$refs.upload.clearFiles()
      } else {
        this.$message.error(res.info);
      }
    },
    upError(res) {
      if (res && res.status == 0) {
        this.$message.error("上传失败");
      } else {
        this.$message.error(res.message);
      }
    },
    change(file) {
      this.file = file;
    },
  },
};
</script>

<style lang="scss" scoped>
.d1 {
  padding: 10px;
}
.btn {
  border-radius: 8px;
  font-weight: normal;
}
.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-icon-upload {
    font-size: 48px;
    margin-bottom: 6px;
    color: #667ffd;
  }
}
</style>
