<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">
          <el-button class="btn" size="mini" type="primary">选择文件</el-button>
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: "downUpData",
  props: {
    query: {
      type: Object,
      default: function () {
        return {};
      },
    },
    url: {
      type: String,
      default: "",
    },
  },
  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);
      } 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>
.btn {
  border-radius: 8px;
  font-weight: normal;
}
.upload-btn {
  .el-icon-upload {
    font-size: 48px;
    margin-bottom: 6px;
    color: #667ffd;
  }
}
</style>
