<template>
  <el-upload
    ref="uploader"
    class="eagle-uploader"
    :action="url"
    :show-file-list="false"
    :headers="headers"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :disabled="disabled"
    :drag="drag"
  >
    <div v-if="value" :style="{ 'background-image': `url(${value})` }" class="avatar">
      <div class="eagle-uploader-mask" @click.stop>
        <div class="eagle-uploader-mask-btns">
          <i v-if="!disabled" class="iconfont icon-plus" @click="handleAdd"></i>
          <i class="iconfont icon-search" @click="handlePreview" style="margin: 0px 15px;"></i>
          <i v-if="!disabled" class="iconfont icon-delete" @click="handleDelete"></i>
        </div>
      </div>
    </div>
    <i v-else class="eagle-uploader-icon" :class="disabled ? 'el-icon-picture-outline' : 'el-icon-plus'"></i>
    <el-dialog class="photoPreviewer" :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-upload>
</template>

<style lang="scss">
  .eagle-uploader {
    position: relative;
    .el-upload {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px !important;
      cursor: pointer !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .el-upload:hover {
      border-color: #1890ff !important;
    }
    .eagle-uploader-icon {
      font-size: 28px !important;
      color: #8c939d !important;
      width: 178px !important;
      height: 178px !important;
      line-height: 178px !important;
      text-align: center !important;
    }
    .avatar {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 178px auto;
      width: 178px !important;
      height: 178px !important;
      display: block !important;
      &:hover {
        .eagle-uploader-mask {
          display: block;
        }
      }
      .eagle-uploader-mask {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        color: rgba(255, 255, 255, 0.9);
        background-color: rgba(0, 0, 0, 0.5);
        .eagle-uploader-mask-btns {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-size: 32px;
            &:hover {
              color: #1890ff;
            }
          }
        }
      }
    }
  }
  .photoPreviewer {
    .el-dialog__header {
      border-bottom: 0;
    }
  }
</style>

<script>
export default {
  props: {
    headers: {
      type: Object,
      default() {
        return {}
      }
    },
    url: {
      type: String,
      required: true
    },
    value: String,
    // 选择框禁用状态
    disabled: {
      type: Boolean,
      default: false
    },
    drag: {
      type: Boolean,
      default: false,
    },
    responseFormat: Function,
    maxMB: {
      type: Number,
      default: 2
    }
  },
  name: 'ImageUpload',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handleSuccess(response = {}, file, fileList) {
      if (this.responseFormat) {
        const url = this.responseFormat(response);
        this.$emit('input', url);
      } else {
        const { result = [] } = response;
        const url = result[0];
        this.$emit('input', url);
      }
    },
    beforeUpload(file) {
      const limit = file.size / 1024 / 1024 < this.maxMB;
      if (!limit) {
        this.$message.error(`上传头像图片大小不能超过 ${this.maxMB}MB!`);
      }
      return limit;
    },
    handleAdd() {
      if (this.$refs.uploader && this.$refs.uploader.$el.children && this.$refs.uploader.$el.children[0]) {
        this.$refs.uploader.$el.children[0].click();
      }
    },
    handlePreview() {
      this.dialogImageUrl = this.value;
      this.dialogVisible = true;
    },
    handleDelete() {
      this.$emit('input', undefined);
    }
  }
}
</script>
