<script setup lang="ts">
import LogicFlow from '@logicflow/core';
// edge
import MyBezierEdge from './edge/CustomBezierEdge.ts';
// nodes
import registerNode from './node/nodeRegister/registerConfig';
import { useNodeStatusInfoStore } from './stores/nodeStatusInfo.ts';

import parseBpmnXmlToGraph from './tools/adapterIn.ts';

import '@logicflow/core/lib/style/index.css';
import '@logicflow/core/es/index.css';

import '@logicflow/extension/lib/style/index.css';

defineOptions({
  name: 'FlowModelViewer',
});

const props = defineProps<{
  xmlString: string
  viewStyle?: any
}>();
const container = ref<HTMLElement | null>(null);
const lf = ref<any>();
onMounted(() => {
  const graphData = parseBpmnXmlToGraph(props.xmlString);
  console.warn('graphData-->:', graphData);
  // 初始化 LogicFlow 实例
  lf.value = new LogicFlow({
    container: container.value as HTMLElement,
    isSilentMode: true,
    allowRotation: false,
    allowRotate: false,
    allowResize: false,
    hideAnchors: true,
    outline: false,
    hoverOutline: false,
    nodeSelectedOutline: false,
    edgeSelectedOutline: false,
    nodeTextEdit: false,
    edgeTextEdit: false,
    adjustEdge: false,
    grid: {
      visible: true,
      type: 'dot',
      config: {
        color: '#dfdfdf',
        thickness: 1,
      },
    },
  });

  // 设置主题
  lf.value.setTheme({
    background: {
      background: '#f2f4f7', // 设置画布背景色
    },
    // 在连线时，从锚点拖出的直线样式
    anchorLine: {
      stroke: '#b1b1b7',
      strokeWidth: 1,
      strokeDasharray: '3,2',
    },
  });

  // 注册边
  lf.value.batchRegister([MyBezierEdge]);
  // 设置默认的边类型
  lf.value.setDefaultEdgeType('custom-bezier-edge');
  // 注册节点
  registerNode(lf.value);
  nextTick(() => {
    lf.value.render(graphData);
    lf.value.translateCenter();
    if (props.viewStyle) {
      // 设置各种颜色
      const {
        unfinishedTaskActivityIds,
        finishedTaskActivityIds,
        finishedSequenceFlowActivityIds,
        rejectedTaskActivityIds,
      } = props.viewStyle;
      // 已完成边
      if (Array.isArray(finishedSequenceFlowActivityIds)) {
        finishedSequenceFlowActivityIds.forEach((edgeId: string) => {
          const edgeModel = lf.value.getEdgeModelById(edgeId);
          edgeModel.setProperties({ strokeColor: '#4eb819' });
        });
      }
      const nodeStatusInfoStore = useNodeStatusInfoStore();
      // 已完成节点
      if (Array.isArray(finishedTaskActivityIds)) {
        nodeStatusInfoStore.setFinishedNodeIds(finishedTaskActivityIds);
        // finishedTaskActivityIds.forEach((nodeId: string) => {
        //   const nodeModel = lf.value.getNodeModelById(nodeId);
        //   nodeModel.setProperties({ wrapperColor: '#4eb819' });
        // });
      }
      // 被拒绝节点
      if (Array.isArray(rejectedTaskActivityIds)) {
        nodeStatusInfoStore.setRejectedNodeIds(rejectedTaskActivityIds);
        // rejectedTaskActivityIds.forEach((nodeId: string) => {
        //   const nodeModel = lf.value.getNodeModelById(nodeId);
        //   nodeModel.setProperties({ color: 'red' });
        // });
      }
    }
  });
});

onBeforeUnmount(() => {
  if (lf.value) {
    lf.value.destroy();
  }
});
</script>

<template>
  <div class="page-main logic-panel">
    <div ref="container" class="flow-container" />
  </div>
</template>

<style scoped>
.page-main {

  width: 100%;
  height: 100%;
  padding: 4px;
  overflow: hidden;
  background-color: #fff;
}

.flow-container {
  width: 100%;
  height: 100%;
}
</style>

<style>
.opt-hide {
  display: none;
}
.opt-show {
  display: block;
}
</style>
