<template>
  <img class="imgc"  ref="img" />
</template>
<style>
.imgc{
height:100%;width:100%;
object-fit: contain;
}
</style>
<script>
import { defineComponent, onMounted, ref } from 'vue-demi';
export default defineComponent({
  name: 'authImg',
  props: {
    authSrc: {
      type: String,
      required: false,
      default: '',
    },
  },
  setup(props) {
    const img = ref(null);
    onMounted(() => {
      // console.log(img);
      Object.defineProperty(Image.prototype, 'authsrc', {
        writable: true,
        enumerable: true,
        configurable: true,
      });

      let request = new XMLHttpRequest();
      request.responseType = 'blob';
      request.open('get', props.authSrc, true);
      request.setRequestHeader('AppId', '3bcb760743ea456faba29a1dfb247bf4');
      request.setRequestHeader(
        'Authorization',
        'Bearer ' + window.localStorage.getItem('Authorization') ?? '',
      );
      request.onreadystatechange = (e) => {
        if (
          request.readyState == XMLHttpRequest.DONE &&
          request.status == 200
        ) {
          img.value.src = URL.createObjectURL(request.response);
          img.value.onload = () => {
            URL.revokeObjectURL(img.src);
          };
        }
      };
      request.send(null);
    });

    return {
      img,
    };
  },
});
</script>
