<template>
  <div class="workflow-graph-panel" id="workflow-graph">
    <div ref="container" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, getCurrentInstance, onUnmounted } from 'vue';
import { WorkflowGraph } from '../../model/workflow-graph';

export default defineComponent({
  name: 'WorkflowGraphPanel',
  props: {
    // 返回路径
    backUrl: {
      type: String,
      default: ''
    }
  },
  emits: ['graph-created', 'node-selected', 'node-added'],
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();

    // 画布dom
    const container = ref(null);
    // 画布
    let workflowGraph;

    onMounted(() => {
      // 初始化画布
      workflowGraph = new WorkflowGraph(
        proxy,
        container.value,
        nodeId => emit('node-selected', nodeId),
        false,
        node => emit('node-added', node),
        props.backUrl
      );

      emit('graph-created', workflowGraph.graph);

      // 渲染画布，回显
      workflowGraph.render();
    });

    onUnmounted(() => {
      // 销毁画布
      workflowGraph?.destroy?.();
      // 清除事件
      workflowGraph?.clearEventListenter?.();
    });

    return {
      container
    };
  }
});
</script>

<style scoped lang="less">
.workflow-graph-panel {
  width: 100%;
  height: 100%;
}
:deep(.x6-widget-selection-inner) {
  padding: 0;
  margin: 0;
  border-radius: 8px;
  border: 1px solid #0f56d7;
}
:deep(.x6-widget-selection-box) {
  padding: 0;
  margin: 0;
  border: 1px solid #0f56d7;
  border-radius: 8px;
}
</style>
