<template>
  <el-upload
              v-model="user.logoUrl"
              class="avatar-uploader"
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="user.logoUrl" :src="user.logoUrl" class="avatar" width="150px">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>

</template>

<script>
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/store/store";
import { listStore, getStore, delStore, addStore, updateStore, exportStore ,editLogo} from "@/api/store/store";
import { getToken } from "@/utils/auth";
export default {
  components: { VueCropper },
  props: {
    user: {

    }
  },
  data() {

    return {
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      // 上传鉴权头，上传前会刷新 Token
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      // 是否显示弹出层
      open: false,
      // 是否显示cropper
      visible: false,
      // 弹出层标题
      title: "修改头像",
      options: {
        img: store.getters.avatar, //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true // 固定截图框大小 不允许改变
      },
      previews: {}
    };
  },
  methods: {

        handleAvatarSuccess(res, file) {
            if (!res || res.code === 401 || !res.url) {
              this.msgError((res && res.msg) || "上传失败，请重新登录后重试");
              return;
            }
            if(res.code==200){
              this.user.logoUrl=res.url;
              var form={logoUrl:res.url};
              editLogo(form).then(response => {
                this.msgSuccess("修改成功");
              });
            }
            else{
              this.msgError(res.msg);
            }
        },



          beforeAvatarUpload(file) {
              this.headers.Authorization = "Bearer " + getToken();
              const isLt1M = file.size / 1024 / 1024 < 1;
              if (!isLt1M) {
                this.$message.error('上传图片大小不能超过 1MB!');
              }
          return isLt1M;
            },

  }
};
</script>
<style scoped lang="scss">

  .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }

   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 150px;
     height: 150px;
     line-height: 150px;
     text-align: center;
   }
</style>
