<template>
  <el-upload
    class="avatar-uploader"
    action="123"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <div v-if="imgUrl" :src="imgUrl" class="avatar" :style="'background-image:url('+imgUrl+')'"></div>
    <p v-else class="avatar-uploader-icon">
      <i class="el-icon-picture"></i><span>点击添加图片</span>
    </p>
  </el-upload>
</template>
<script>
import config from '@/config';
  export default {
    props:{
      url:{
        type:String,
        default:'/api-plug/upload-img'
      },
      imgUrl:{
        type:String,
        default:''
      },
      imgCode:{
        type:String,
        default:''
      },

    },
    data() {
      return {
        code:'',
        disabled:false,
        loading:false
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
          return;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return;
        }
        let formData = new FormData();
        formData.append('file',file);
        formData.append('requestProject', 'gic-web');
        this.axios.post(this.url, formData).then(res => {
          if (res.data.errorCode === 0) {
            this.$emit('update:imgUrl',res.data.result[0].qcloudImageUrl)
            this.$emit('update:imgCode',res.data.result[0].imageFiledCode)
            this.$tips({ type: 'success', message: '上传成功' });
          } else {
              this.$tips({ type: 'error', message: '上传失败' });
          }
          this.disabled = false;
        }).catch(error => {
          this.disabled = false;
          this.$tips({ type: 'error', message: error.msg || '上传失败' });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .avatar-uploader{
    /deep/ .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #1890ff;
      }
    }
    .avatar-uploader-icon {
      width: 397px;
      height: 222px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      i{
        font-size: 40px;
        color: #c0c4cc;
      }
      span {
        display: block;
        font-size: 16px;
        color: #909399;
      }
    }
    .avatar {
      width: 397px;
      height: 222px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  }
</style>

