<template>
  <ele-modal
    width="800px"
    :maxable="true"
    :visible="dialogProcessImageVisibleInChild"
    :close-on-click-modal="true"
    title="流程图"
    @update:visible="updateVisible"
  >
    <img ref="img" alt="流程图" />
  </ele-modal>
</template>

<script>
  import { getToken } from '@/utils/token-util';

  export default {
    name: 'ProcessImage',
    props: {
      visible: {
        type: Boolean,
        default: function () {
          return false;
        }
      },
      processDefinitionId: {
        type: String,
        default: function () {
          return '';
        }
      },
      processInstanceId: {
        type: String,
        default: function () {
          return '';
        }
      }
    },
    computed: {
      dialogProcessImageVisibleInChild: {
        get() {
          return this.visible;
        },
        set(val) {
          this.$emit('update:visible', val);
        }
      }
    },
    data() {
      return {
        imagePath: ''
      };
    },
    created() {
      this.init();
    },
    methods: {
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      getImage(url) {
        let that = this;
        that.$nextTick(() => {
          let request = new XMLHttpRequest();
          request.responseType = 'blob';
          request.open('get', url, true);
          // 添加自定义请求头
          request.setRequestHeader(
            'Authorization',
            localStorage.getItem('access_token')
          );
          request.onreadystatechange = (e) => {
            if (
              request.readyState == XMLHttpRequest.DONE &&
              request.status == 200
            ) {
              console.log(request);
              that.$refs.img.src = URL.createObjectURL(request.response);
              URL.createObjectURL(request.response);

              that.$refs.img.onload = () => {
                that.$refs.img && URL.revokeObjectURL(that.$refs.img.src);
              };
            }
          };
          request.send(null);
        });
      },

      init() {
        if (
          this.processInstanceId &&
          this.processInstanceId != null &&
          this.processInstanceId !== ''
        ) {
          this.imagePath =
            `${process.env.VUE_APP_API_BASE_URL}` +
            '/flowable/processInstanceImage?processInstanceId=' +
            this.processInstanceId +
            '&access_token=' +
            getToken() +
            '&time=' +
            new Date();
          this.getImage(this.imagePath);
        } else if (
          this.processDefinitionId &&
          this.processDefinitionId != null &&
          this.processDefinitionId !== ''
        ) {
          this.imagePath =
            `${process.env.VUE_APP_API_BASE_URL}` +
            '/flowable/processDefinition/image?processDefinitionId=' +
            this.processDefinitionId +
            '&access_token=' +
            getToken() +
            '&time=' +
            new Date();
          this.getImage(this.imagePath);
        }
      }
    }
  };
</script>
