<template>
  <div
    class="el-upload-single"
    :class="{'el-upload--disabled': disabled}"
  >
    <!-- 图片展示 -->
    <div
      v-if="imgUrl && !uploadBtn"
      class="el-upload-item"
      :style="{ width: `${width}px`, height: `${height}px`}"
    >
      <img
        class="el-upload-item__img"
        :src="imgUrl">
      <div class="el-upload-item__hover">
        <div
            v-if="showDelete && !disabled"
            class="el-upload-item__del"
            :class="`el-upload-item__del--${delPosition}`"
            @click="delImg"
        >
          <i class="el-icon-close"></i>
        </div>
        <div class="el-upload-item__btn">
          <div
            v-if="showEdit && !disabled"
            class="el-upload-item__btn-text el-upload-item__btn-text--edit"
            @click="editImg"
          >
            {{ editText }}
          </div>
          <div
            v-if="showCropper && !disabled"
            class="el-upload-item__btn-text el-upload-item__btn-text--cropper"
            @click="openCropperImg()"
          >
            {{ cropperText }}
          </div>
        </div>
      </div>
    </div>
    <!-- 图片上传按钮 -->
    <el-button v-if="uploadBtn" type="text" @click="uploadTrigger">{{btnText}}
      <input
        type="file"
        :accept="accept"
        @change="changeUpload($event)"
        @click.stop
        ref="fileInput"
        class="el-upload-btn__input"
      >
    </el-button>
    <div
      v-else
      class="el-upload-btn"
      :class="{'el-upload-btn--none': imgUrl}"
      :style="{ width: `${width}px`, height: `${height}px`, 'background-image':  `url(${baseImg})`}"
      @click="uploadTrigger"
    >
      <slot></slot>
      <i class="el-icon-plus text-20 text-primary"></i>
      <span class="el-upload-btn__text">{{ btnText }}</span>
      <input
        type="file"
        :accept="accept"
        @change="changeUpload($event)"
        @click.stop
        ref="fileInput"
        class="el-upload-btn__input"
      >
    </div>
    <!-- 图片剪切 -->
    <Cropper
      :visible.sync="isShowCropper"
      :file="file"
      :size="size"
      @cropUploadSuccess="uploadSuccess"
    />
  </div>
</template>
<script>
import uploadMixin from './mixin/uploadMixin';
import Cropper from './cropper';
export default {
  mixins: [uploadMixin],
  data() {
    return {
      imgUrl: this.defaultImg, // 图片地址
      isChangeOriginUrl: false, // 原图片是否更换
      originUrl: '' // 源图片地址
    };
  },
  watch: {
    defaultImg(newVal) {
      this.imgUrl = newVal;
    }
  },
  components: {
    Cropper
  },
  methods: {
    // 图片更改
    changeUpload(e) {
      const file = e.target.files[0];
      if (!this.isCheckout(file)) {
        return;
      }
      if (this.showCropper) {
        this.openCropperImg(file);
      } else {
        this.fileToFormData(file);
      }
    },
    // 触发图片上传
    uploadTrigger() {
      if (this.disabled) {
        return;
      }
      this.$refs.fileInput.value = '';
      this.$refs.fileInput.click();
    },
    // 删除图片
    delImg() {
      this.imgUrl = '';
      this.emitImgUrl();
    },
    // 替换图片
    editImg() {
      this.changeOriginUrl(true);
      this.uploadTrigger();
    },
    // 显示图片剪裁功能
    openCropperImg(file) {
      this.changeOriginUrl(file);
      this.isShowCropper = true;
      this.file = file || this.originUrl;
    },
    // file转成formData格式
    fileToFormData(file) {
      let formData = new FormData();
      formData.append('file', file);
      this.uploadSuccess(formData);
    },
    // 图片上传api
    uploadSuccess(file) {
      this.http(this.action, file).then(res => {
        this.imgUrl = res.url;
        this.emitImgUrl();
        this.originUrl = this.isChangeOriginUrl ? res.url : this.originUrl;
      });
    },
    // 图片更改传出
    emitImgUrl() {
      this.$emit('changeImgUrl', this.imgUrl);
    },
    // 是否更改原图片
    changeOriginUrl(val) {
      this.isChangeOriginUrl = val;
    }
  }
};
</script>
