<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/api/placeholder"
    accept=".jpg,.png"
    list-type="picture"
    :file-list="fileList"
    :http-request="uploadHttpRequest"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
      只能上传jpg/png文件，且不超过500kb
    </div>
  </el-upload>
</template>

<script>
import { uploadFile } from "@/api/system-info";

/**
 * uploadHttpRequest(options)      
 * const options = {
        headers: this.headers,
        withCredentials: this.withCredentials,
        file: rawFile,
        data: this.data,
        filename: this.name,
        action: this.action,
        onProgress: e => {
          this.onProgress(e, rawFile);
        },
        onSuccess: res => {
          this.onSuccess(res, rawFile);
          delete this.reqs[uid];
        },
        onError: err => {
          this.onError(err, rawFile);
          delete this.reqs[uid];
        }
      };
 */

export default {
  props: { value: String },
  data() {
    return {
      fileList: [
        {
          name: "",
          url: this.value || "",
        },
      ],
      uploadHttpRequest: uploadFile,
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        if (v)
          this.fileList = [
            {
              name: "",
              url: v,
            },
          ];
      },
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      const url = null;
      this.fileList = [];
      this.$emit("input", url);
      this.$emit("change", url);
    },
    handleError() {
      const url = null;
      this.fileList = [];
      this.$emit("input", url);
      this.$emit("change", url);
    },
    handleSuccess(res) {
      this.$emit("input", res.data.data.url);
      this.$emit("change", res.data.data.url);
    },
  },
};
</script>

<style scoped>
.upload-demo >>> .el-upload-list__item {
  transition: 0s !important;
}
</style>
