<template>
  <el-upload
    ref="uploader"
    class="avatar-uploader"
    :action="uploadURL"
    :show-file-list="false"
    :headers="headers"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :disabled="disabled"
  >
    <div v-if="value" :style="{ 'background-image': `url(${value})` }" class="avatar">
      <div class="avatar-uploader-mask" @click.stop>
        <div class="avatar-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="avatar-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">
  .avatar-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;
    }
    .avatar-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 {
        .avatar-uploader-mask {
          display: block;
        }
      }
      .avatar-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);
        .avatar-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>
import { getToken } from '@/utils/auth';

const uploadURL = process.env.VUE_APP_API_IMG_UP;

export default {
  props: {
    value: String,
    // 选择框禁用状态
    disabled: {
      type: Boolean,
      default: false
    },
  },
  name: 'ImageUpload',
  data() {
    return {
      headers: { 'authorization': `Bearer ${getToken()}` },
      uploadURL: uploadURL,
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handleSuccess(response = {}, file, fileList) {
      const { result = [] } = response;
      const url = result[0];
      this.$emit('input', url);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    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>