<template>
  <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :http-request="selectPicUpload"
      :auto-upload="true"
      :before-upload="beforeAvatarUpload"
      name="multipartFile"

  >
    <img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
<script>
import axios from "axios";
import Vue from "vue";

export default {
  name: "UploadComponent",
  components: {},
  props:{
    configName:String,
  },
  data() {
    return {
      imageUrl: '',
    }
  },
  mounted() {
    this.getImage(this.configName);
  },
  created() {

  },
  computed: {},
  methods: {

    //上传图标事件
    selectPicUpload(obj) {

      let fd = new FormData(); //参数的格式是formData格式的
      fd.append("multipartFile", obj.file); //参数
      if (localStorage.getItem('userRole') === '0'&&localStorage.getItem('Authorization')) {
        if(this.configName){
          let _this = this;
          axios({
            method: 'post',
            url: '/upload/uploadfile',
            params:{
              cate:'img',
              name: this.configName,
            },
            data:fd,
          }).then(function (res) {
            if(res.data.code!==200){
              Vue.prototype.$notify.error({
                title: '错误',
                message: "上传失败！",
                offset: 0
              });

            }else {
              Vue.prototype.$notify({
                title: '成功',
                message: ('i', {style: 'color: teal'}, "上传成功！"),
                type: 'success',
                offset: 0
              });
              _this.getImage(_this.configName);
            }
          }).catch((error) => {
            // console.log(error)
            // Vue.prototype.$notify.error({
            //   title: '错误',
            //   message: error,
            //   offset: 0
            // });
          })
        }else{
          return false;
        }


      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: '登录状态失效，请重新登录！',
          offset: 0
        });
      }
    },
    getImage(name){
      let _this=this;
      if (localStorage.getItem('userRole') ==='0' && localStorage.getItem('Authorization')) {
        if(name){
          axios({
            method: 'get',
            url: '/api/getAttachment',
            responseType: 'arraybuffer',
            params: {
              name:name
            },
          }).then(function (res) {
            if(res!==undefined){
              _this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
            }else{
              return false;
            }
          }).catch((error) => {
            // Vue.prototype.$notify.error({
            //   title: '错误',
            //   message: error,
            //   offset: 0
            // });
          })
        }else{
          return false;
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: "不存在！",
          //   offset: 0
          // });
        }


      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: '登录状态失效，请重新登录！',
          offset: 0
        });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isJPG2 = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      // const isGif = file.type === "image/gif";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG && !isJPG2 && !isPNG) {
        this.$message.warning("只支持jpg,png,jpeg,gif格式图片");
      }
      if (!isLt5M) {
        this.$message.warning("请上传5MB以内的图片!");
      }
      return (isJPG || isJPG2 || isPNG) && isLt5M;
    },


  }


}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--theme-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--border-color);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: var(--theme-color);
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>