<template>
  <Bpmn
    v-if="show && value.xml"
    ref="BpmnBlock"
    readonly
    :xml="value.xml"
    :running-task="value.runningTask"
    :high-lighted-flows="value.highLightedFlows"
    :high-lighted-nodes="value.highLightedNodes"
  />
</template>

<script>
import ApiConstant from "@/api/ApiConstant";
import Bpmn from "@/components/bpmn";

export default {
  components: { Bpmn },
  props: {
    params: {
      type: Object,
      default: () => ({}),
    },
    xmlData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      show: true,
      data: {},
    };
  },
  computed: {
    value() {
      return this.initCall ? this.data : this.xmlData;
    },
    initCall() {
      return Boolean(Object.keys(this.params).length);
    },
  },
  watch: {
    "value.highLightedNodes.length": function () {
      this.show = false;
      setTimeout(() => {
        this.show = true;
      }, 100);
    },
  },
  created() {
    this.getXml();
  },
  methods: {
    getXml() {
      this.initCall &&
        this.$axios
          .get(`${ApiConstant.PREFIX_CORE}/api/flowable/task/image-xml`, {
            params: this.params,
          })
          .then((res) => {
            this.data = res.data.data;
            this.$emit("update:xmlData", this.xmlData);
          });
    },
  },
};
</script>
