<template>
  <div v-if="show">
    <image-purview
      v-if="uploadList[0]"
      :status="uploadList[0].status"
      :url="uploadList[0].url"
      :progress="uploadList[0].showProgress"
      :percentage="uploadList[0].percentage"
      :remove="true"
      :disabled="disabled"
      @remove-image="handleRemove"
    ></image-purview>

    <div class="upload-box" v-show="!uploadList[0]">
      <Upload
        ref="upload"
        :show-upload-list="false"
        :data="{bucket: bucket}"
        :on-success="handleSuccess"
        :on-error="handleError"
        :default-file-list="defaultList"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :disabled="disabled"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        action="/ufoPlatform/fileupload/uploadEx?debug=XYZ"
      >
        <Icon type="ios-cloud-upload-outline" title="上传图片"></Icon>
      </Upload>
    </div>
  </div>
</template>
<script>
import imagePurview from "./image-purview";

export default {
  name: "drag-file-upload",
  props: {
    id: {
      type: Number
    },
    defaultFile: {
      type: String
    },
    disabled:{
      type:Boolean,
      default:false
    },
    bucket: {
      type: String,
      default() {
        return "yhb-img01";
      }
    }
  },
  data() {
    let _this = this;

    return {
      imgUrl: "",
      show: true,
      visible: false,
      uploadList: [],
      defaultList: _this.defaultFile ? [{ url: _this.defaultFile }] : []
    };
  },
  methods: {
    handleView(url) {
      this.imgUrl = url;
      this.visible = true;
    },
    handleRemove() {
      let file = this.uploadList[0];
      let files = this.$refs.upload.fileList;

      this.$refs.upload.fileList.splice(files.indexOf(file), 1);
      this.uploadList = this.$refs.upload.fileList;
      this.$emit("remove", this.id);
    },
    handleSuccess(response, file, files) {
      if (response.data) {
        let data = response.data;
        let w = response.data.width || 0;
        let h = response.data.height || 0;
        let url = response.data.imgUrl + "?imageView2/{2}/w/" + w + "/h/" + h;
        response.data.url = url;
        file.url = response.data.imgUrl;
        file.width = w;
        file.height = h;
        // file.url = response.data
      }
      this.uploadList = files;
      this.$emit("success", this.id, file);
    },
    handleError() {
      this.$Notice.error("上传失败");
      this.$emit("error", this.id);
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: "文件 " + file.name + " 太大，不能超过 2M。"
      });
    }
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  },
  watch: {
    defaultFile: function(newValue) {
      if (newValue) {
        this.defaultList = [{ url: newValue }];
      } else {
        this.handleRemove();
      }
    }
  },
  components: {
    imagePurview
  }
};
</script>
<style lang="scss">
.upload-box {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px dashed #dddee1;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    border-color: #2d8cf0;
  }

  .ivu-upload {
    height: 30px;
  }

  .ivu-icon {
    font-size: 30px;
    margin: 0 2px;
    color: #000;
    transition: color 0.2s ease;

    &:hover {
      color: #2d8cf0;
    }
  }
}
</style>