<template>
  <div class="my-process-designer">
    <div class="my-process-designer__header">
      <slot name="control-header"></slot>
      <template v-if="!$slots['control-header']">
        <div slot="content">
          <a-space>
            <a-tooltip placement="bottom" class="ml-2" title="缩小视图">
              <a-button :disabled="data.defaultZoom <= 0.3" :icon="h(ZoomOutOutlined)" @click="processZoomOut()"></a-button>
            </a-tooltip>
            <a-button>{{ Math.floor(data.defaultZoom * 10 * 10) + "%" }}</a-button>
            <a-tooltip placement="bottom" title="放大视图">
              <a-button :disabled="data.defaultZoom >= 3.9" :icon="h(ZoomInOutlined)" @click="processZoomIn()"></a-button>
            </a-tooltip>
          </a-space>
        </div>

      </template>
      <div>
      </div>
    </div>
    <div class="my-process-designer__container">
      <div class="my-process-designer__canvas" ref="bpmn-canvas" id="view"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import '@/components/ProcessDesigner/package/theme/index.scss';
  import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits, onBeforeMount, watch } from 'vue';
  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  import BpmnViewer from 'bpmn-js/lib/Viewer'
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
  const data = reactive({
    bpmnModeler: null,
    defaultZoom: 1,
  })

  const props = defineProps({
    xml: String
  })
  watch(
    () => props.xml,
    (newVal, oldVal) => {
      createDiagram(newVal)
    }
  )
  onMounted(() => {
    initBpmnModeler()
    createDiagram(props.xml)
  })
  function initBpmnModeler() {
    if (data.bpmnModerler) return
    const containerEl = document.getElementById('view')
    data.bpmnModerler && data.bpmnModerler.destroy() // 避免缓存
    data.bpmnModerler = new BpmnViewer({
      container: containerEl,
      additionalModules: [
              // 移动整个画布
              MoveCanvasModule
            ],
    })
  }
  async function createDiagram(xml) {
    const viewer = data.bpmnModerler
    try {
      const result = await data.bpmnModerler.importXML(xml)
      const { warnings } = result
      if (warnings && warnings.length) {
        warnings.forEach(warn => console.warn(warn))
      }
      const canvas = viewer.get('canvas')
      canvas.zoom('fit-viewport')
    } catch (err) {
      console.log(err.message, err.warnings)
    }
  }
  function processZoomIn(zoomStep = 0.1) {
    let newZoom = Math.floor(data.defaultZoom * 100 + zoomStep * 100) / 100;
    if (newZoom > 4) {
      throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
    }
    data.defaultZoom = newZoom;
    data.bpmnModerler.get("canvas").zoom(data.defaultZoom);
  }
  function processZoomOut(zoomStep = 0.1) {
    let newZoom = Math.floor(data.defaultZoom * 100 - zoomStep * 100) / 100;
    if (newZoom < 0.2) {
      throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
    }
    data.defaultZoom = newZoom;
    data.bpmnModerler.get("canvas").zoom(data.defaultZoom);
  }
</script>
<style scoped>
  .my-process-designer{
    width: 100%;
  }
  ::v-deep .bjs-container a {
    visibility: hidden;
  }
</style>