<template>
    <div ref="bpmnContainer" class="bpmn-container"></div>
  </template>

  <script lang="ts" setup name="processInfo">
        import { definitionXml
} from '@/api/flowableWorkflow/processDefinition';
import { getHistoryList } from '@/api/flowableWorkflow/processInstance';
import { ref, onMounted, watch } from 'vue';
import BpmnViewer from 'bpmn-js/lib/Viewer'; // 引入 BpmnViewer
import BpmnModeler from 'bpmn-js/lib/Modeler';
    let diagramXML = null;
    let bpmnViewer = null;
    const bpmnContainer = ref(null);
    // 定义 props
const props = ref([]);
const initializeBpmnViewer = async () => {
  const resp = await definitionXml('ceshi:1:1888121144965664769');
  diagramXML = resp.data.xmlStr;
  bpmnViewer = new BpmnModeler({
        container: bpmnContainer.value,
        // 禁用编辑功能
        additionalModules: [
    // {
    //   // 禁用工具栏
    //   paletteProvider: ['value', null], // 将 paletteProvider 设置为 null
    // },
    // {
    //   // 禁用右键菜单
    //   contextPadProvider: ['value', null], // 将 contextPadProvider 设置为 null
    // },
    // {
    //   // 禁用拖拽和连线
    //   modeling: ['value', {}], // 禁用 modeling 模块的部分功能
    // },
  ],
      });
      const resp1 = await getHistoryList('1889223417401753602');
    console.log(resp1.data)
    props.value = resp1.data.historyList;
       await bpmnViewer.importXML(diagramXML,null, (err) => {
        if (err) {

          console.error('Failed to render BPMN diagram', err);
        } else {
          console.log('BPMN diagram rendered successfully');
          highlightApprovalNodes();
        }
      })
    //   highlightApprovalNodes();
    applyNodeStyles();
  };
//   获取流程各节点状态
  const getNodeStatus = async () => {

    // console.log(props.value)
  };

    // 高亮审批节点
const highlightApprovalNodes = () => {
  const elementRegistry = bpmnViewer.get('elementRegistry');
  const modeling = bpmnViewer.get('modeling');
  // 假设审批节点的类型是 'bpmn:UserTask'
  const approvalNodes = elementRegistry.filter((element) => element.type === 'bpmn:UserTask');
  approvalNodes.forEach((node) => {
    modeling.setColor(node, {
      fill: '#f8f8f8', // 设置填充颜色
      stroke: '#ff0000', // 设置边框颜色
    });
  });
};

// 根据节点状态设置样式
const applyNodeStyles = () => {
  const elementRegistry = bpmnViewer.get('elementRegistry');
  const modeling = bpmnViewer.get('modeling');

  // 遍历节点状态
  console.log(modeling)
  props.value.forEach((e) => {
    console.log(e.taskDefinitionKey)
    console.log(e.status)
    const element = elementRegistry.get(e.taskDefinitionKey);
    console.log(element)
    if (element) {
      let fill, stroke, color;
      switch (e.status) {
        case '已处理':
          fill = '#d4f7d4'; // 完成状态：绿色背景
          stroke = '#28a745'; // 绿色边框
          break;
        case 'in-progress':
          fill = '#fff3cd'; // 进行中状态：黄色背景
          stroke = '#ffc107'; // 黄色边框
          break;
        case '已驳回':
          fill = '#f8d7da'; // 错误状态：红色背景
          stroke = '#dc3545'; // 红色边框
          break;
        default:
          fill = '#f8f9fa'; // 默认状态：灰色背景
          stroke = '#6c757d'; // 灰色边框
      }

      // modeler模式设置节点样式
      modeling.setColor(element, {
        fill,
        stroke,
      });
    }
  });
};
// 监听 diagramXML 的变化，动态更新流程图
watch(
  () => diagramXML,
  (newXML) => {
    if (bpmnViewer) {
      bpmnViewer.importXML(newXML, (err) => {
        if (err) {
          console.error('Failed to update BPMN diagram', err);
        } else {
          console.log('BPMN diagram updated successfully');
          highlightApprovalNodes(); // 高亮审批节点
        }
      });
    }
  },
);

// 组件挂载时初始化 BpmnViewer
onMounted(() => {
  initializeBpmnViewer();
  getNodeStatus();
});

// 组件卸载时销毁 BpmnViewer
onUnmounted(() => {
  if (bpmnViewer) {
    bpmnViewer.destroy();
  }
});
  </script>

  <style scoped>
  .bpmn-container {
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
    pointer-events: none;
  }
  </style>
