import { en as useVueFlow, r as ref, au as markRaw, eo as MarkerType, S as openBlock, _ as createElementBlock, a1 as createBaseVNode, $ as createVNode, a0 as withCtx, a9 as createTextVNode, o as unref, H as Fragment, ay as renderList, aa as toDisplayString, ep as _sfc_main$1, eq as _sfc_main$2, er as _sfc_main$3, es as _sfc_main$1$1, a8 as createCommentVNode } from "./.pnpm.BW3P1y8f.js";
import CustomNode from "./CustomNode.DH3hMbi5.js";
import { h as ElButton, y as ElInput, ar as ElOption, aq as ElSelect, v as ElDialog, E as ElMessage } from "./element-plus.CkEW9frc.js";
import "./_plugin-vue_export-helper.1tPrXgE0.js";
const _hoisted_1 = { class: "app-container" };
const _hoisted_2 = { class: "top-toolbar" };
const _hoisted_3 = {
  class: "toolbar-right",
  style: { "margin-left": "auto" }
};
const _hoisted_4 = { class: "main-layout" };
const _hoisted_5 = { class: "left-panel" };
const _hoisted_6 = { class: "flex-center" };
const _hoisted_7 = {
  class: "scroll-container",
  style: { "height": "calc(100% - 50px)" }
};
const _hoisted_8 = ["onDragstart"];
const _hoisted_9 = { class: "canvas-container" };
const _hoisted_10 = {
  key: 0,
  class: "right-panel"
};
const _hoisted_11 = { class: "panel-header" };
const _hoisted_12 = {
  key: 0,
  class: "gap-y-2"
};
const _hoisted_13 = {
  key: 1,
  class: "gap-y-2"
};
const _hoisted_14 = { class: "dialog-footer" };
const _hoisted_15 = { class: "dialog-footer" };
const _sfc_main = /* @__PURE__ */ Object.assign({
  name: "Workflow",
  inheritAttrs: false
}, {
  __name: "index",
  setup(__props) {
    const {
      onInit,
      onNodeDragStop,
      onConnect,
      addEdges,
      getNodes,
      getEdges,
      setEdges,
      setNodes,
      screenToFlowCoordinate,
      onNodesInitialized,
      updateNode,
      addNodes
    } = useVueFlow();
    const defaultEdgeOptions = {
      type: "smoothstep",
      // 默认边类型
      animated: true,
      // 是否启用动画
      markerEnd: {
        type: "arrowclosed",
        // 默认箭头样式
        color: "black"
      }
    };
    const nodes = ref([
      {
        id: "5",
        type: "input",
        data: { label: "开始" },
        position: { x: 235, y: 100 },
        class: "round-start"
      },
      {
        id: "6",
        type: "custom",
        // 使用自定义类型
        data: { label: "工位：流程1" },
        position: { x: 200, y: 200 },
        class: "light"
      },
      {
        id: "7",
        type: "output",
        data: { label: "结束" },
        position: { x: 235, y: 300 },
        class: "round-stop"
      }
    ]);
    const nodeTypes = ref({
      custom: markRaw(CustomNode)
      // 注册自定义节点类型
    });
    const edges = ref([
      {
        id: "e4-5",
        type: "straight",
        source: "5",
        target: "6",
        sourceHandle: "top-6",
        label: "测试1",
        markerEnd: {
          type: MarkerType.ArrowClosed,
          // 使用闭合箭头
          color: "black"
        }
      },
      {
        id: "e4-6",
        type: "straight",
        source: "6",
        target: "7",
        sourceHandle: "bottom-6",
        label: "测试2",
        markerEnd: {
          type: MarkerType.ArrowClosed,
          // 使用闭合箭头
          color: "black"
        }
      }
    ]);
    onInit((vueFlowInstance) => {
      vueFlowInstance.fitView();
    });
    onNodeDragStop(({ event, nodes: nodes2, node }) => {
      console.log("Node Drag Stop", { event, nodes: nodes2, node });
    });
    onConnect((connection) => {
      addEdges(connection);
    });
    const pointsList = ref([{ name: "测试1" }, { name: "测试2" }]);
    const updateState = ref("");
    const selectedEdge = ref({});
    const removeEdgeDialogVisible = ref(false);
    const removeNodeDialogVisible = ref(false);
    const onEdgeClick = ({ edge }) => {
      selectedEdge.value = edge;
      updateState.value = "edge";
      console.log(selectedEdge.value);
    };
    function updateEdge() {
      const allEdges = getEdges.value;
      const newType = selectedEdge.value.type === "smoothstep" ? null : "smoothstep";
      setEdges([
        ...allEdges.filter((e) => e.id !== selectedEdge.value.id),
        // 移除旧的边
        { ...selectedEdge.value, type: newType, label: "Node 3" }
        // 更新边的类型
      ]);
    }
    function removeEdge() {
      removeEdgeDialogVisible.value = true;
    }
    function confirmRemoveEdge() {
      const allEdges = getEdges.value;
      setEdges([
        ...allEdges.filter((e) => e.id !== selectedEdge.value.id)
        // 移除边
      ]);
      ElMessage.success("连线删除成功");
      updateState.value = null;
      selectedEdge.value = {};
      removeEdgeDialogVisible.value = false;
    }
    const selectedNode = ref({});
    const onNodeClick = ({ node }) => {
      selectedNode.value = node;
      updateState.value = "node";
      console.log("选中的节点：", node);
    };
    function removeNode() {
      removeNodeDialogVisible.value = true;
    }
    function confirmRemoveNode() {
      const allNodes = getNodes.value;
      setNodes([
        ...allNodes.filter((e) => e.id !== selectedNode.value.id)
        // 移除边
      ]);
      const allEdges = getEdges.value;
      setEdges([
        ...allEdges.filter(
          (e) => e.source !== selectedNode.value.id && e.target !== selectedNode.value.id
        )
        // 移除边
      ]);
      ElMessage.success("点位删除成功");
      updateState.value = null;
      selectedNode.value = {};
      console.log(getEdges.value);
      removeNodeDialogVisible.value = false;
    }
    const dragItem = ref(null);
    function onDragStart(event, state) {
      dragItem.value = {
        id: `node-${Date.now()}`,
        // 动态生成唯一 id
        data: { label: state === "开始" ? "开始" : state === "结束" ? "结束" : "工位：" + state },
        type: state === "开始" ? "input" : state === "结束" ? "output" : "custom",
        position: { x: event.clientX, y: event.clientY },
        animated: false,
        class: state === "开始" ? "round-start" : state === "结束" ? "round-stop" : "light"
      };
    }
    function onDragEnd() {
      dragItem.value = null;
    }
    function onDragOver(event) {
      event.preventDefault();
    }
    function onDrop(event) {
      const position = screenToFlowCoordinate({
        x: event.clientX,
        y: event.clientY
      });
      const newNode = {
        ...dragItem.value,
        position
      };
      const { off } = onNodesInitialized(() => {
        var _a;
        updateNode((_a = dragItem.value) == null ? void 0 : _a.id, (node) => ({
          position: {
            x: node.position.x - node.dimensions.width / 2,
            y: node.position.y - node.dimensions.height / 2
          }
        }));
        off();
      });
      dragItem.value = null;
      addNodes(newNode);
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createBaseVNode("div", _hoisted_2, [
          createBaseVNode("div", _hoisted_3, [
            createVNode(unref(ElButton), {
              type: "primary",
              class: "m-2"
            }, {
              default: withCtx(() => [..._cache[11] || (_cache[11] = [
                createTextVNode("保存", -1)
              ])]),
              _: 1
            })
          ])
        ]),
        createBaseVNode("div", _hoisted_4, [
          createBaseVNode("div", _hoisted_5, [
            createBaseVNode("div", _hoisted_6, [
              createBaseVNode("div", {
                class: "drag-item text-center start-item",
                draggable: "true",
                onDragstart: _cache[0] || (_cache[0] = ($event) => onDragStart($event, "开始")),
                onDragend: onDragEnd
              }, [..._cache[12] || (_cache[12] = [
                createBaseVNode("span", null, "开始", -1)
              ])], 32),
              createBaseVNode("div", {
                class: "drag-item text-center end-item ml-2",
                draggable: "true",
                onDragstart: _cache[1] || (_cache[1] = ($event) => onDragStart($event, "结束")),
                onDragend: onDragEnd
              }, [..._cache[13] || (_cache[13] = [
                createBaseVNode("span", null, "结束", -1)
              ])], 32)
            ]),
            createBaseVNode("div", _hoisted_7, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(pointsList.value, (item, index) => {
                return openBlock(), createElementBlock("div", {
                  key: index,
                  class: "drag-item text-center w-full mt-2",
                  draggable: "true",
                  onDragstart: ($event) => onDragStart($event, item.name),
                  onDragend: onDragEnd
                }, [
                  createBaseVNode("span", null, toDisplayString(item.name), 1)
                ], 40, _hoisted_8);
              }), 128))
            ])
          ]),
          createBaseVNode("div", _hoisted_9, [
            createVNode(unref(_sfc_main$1$1), {
              nodes: nodes.value,
              edges: edges.value,
              class: "basic-flow",
              "default-viewport": { zoom: 1 },
              "min-zoom": 0.2,
              "max-zoom": 4,
              "node-types": nodeTypes.value,
              "default-edge-options": defaultEdgeOptions,
              "connect-on-click": true,
              onNodeClick,
              onEdgeClick,
              onDrop,
              onDragover: onDragOver
            }, {
              default: withCtx(() => [
                createVNode(unref(_sfc_main$1)),
                createVNode(unref(_sfc_main$2), {
                  "pattern-color": "#aaa",
                  gap: 16
                }),
                createVNode(unref(_sfc_main$3))
              ]),
              _: 1
            }, 8, ["nodes", "edges", "node-types"])
          ]),
          updateState.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
            createBaseVNode("div", _hoisted_11, [
              createBaseVNode("span", null, toDisplayString(updateState.value === "edge" ? "连接线规则配置" : "点位规则配置"), 1),
              createVNode(unref(ElButton), {
                type: "text",
                class: "float-right",
                icon: "close",
                onClick: _cache[2] || (_cache[2] = ($event) => updateState.value = "")
              })
            ]),
            updateState.value === "edge" ? (openBlock(), createElementBlock("div", _hoisted_12, [
              createVNode(unref(ElInput), {
                modelValue: selectedEdge.value.label,
                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedEdge.value.label = $event),
                placeholder: "线名称",
                clearable: "",
                class: "mb-2"
              }, null, 8, ["modelValue"]),
              createVNode(unref(ElSelect), {
                modelValue: selectedEdge.value.type,
                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => selectedEdge.value.type = $event),
                placeholder: "线类型",
                class: "mb-2"
              }, {
                default: withCtx(() => [
                  createVNode(unref(ElOption), {
                    label: "折线",
                    value: "smoothstep"
                  }),
                  createVNode(unref(ElOption), {
                    label: "曲线",
                    value: "default"
                  }),
                  createVNode(unref(ElOption), {
                    label: "直线",
                    value: "straight"
                  })
                ]),
                _: 1
              }, 8, ["modelValue"]),
              createVNode(unref(ElSelect), {
                modelValue: selectedEdge.value.animated,
                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => selectedEdge.value.animated = $event),
                placeholder: "线动画",
                class: "mb-2"
              }, {
                default: withCtx(() => [
                  createVNode(unref(ElOption), {
                    label: "开启",
                    value: true
                  }),
                  createVNode(unref(ElOption), {
                    label: "关闭",
                    value: null
                  })
                ]),
                _: 1
              }, 8, ["modelValue"]),
              createVNode(unref(ElButton), {
                type: "primary",
                size: "small",
                onClick: updateEdge
              }, {
                default: withCtx(() => [..._cache[14] || (_cache[14] = [
                  createTextVNode("修改", -1)
                ])]),
                _: 1
              }),
              createVNode(unref(ElButton), {
                type: "danger",
                size: "small",
                onClick: removeEdge
              }, {
                default: withCtx(() => [..._cache[15] || (_cache[15] = [
                  createTextVNode("删除", -1)
                ])]),
                _: 1
              })
            ])) : (openBlock(), createElementBlock("div", _hoisted_13, [
              createVNode(unref(ElInput), {
                modelValue: selectedNode.value.data.label,
                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectedNode.value.data.label = $event),
                placeholder: "点位名称",
                clearable: "",
                class: "mb-2"
              }, null, 8, ["modelValue"]),
              createVNode(unref(ElButton), {
                type: "danger",
                size: "small",
                onClick: removeNode
              }, {
                default: withCtx(() => [..._cache[16] || (_cache[16] = [
                  createTextVNode("删除", -1)
                ])]),
                _: 1
              })
            ]))
          ])) : createCommentVNode("", true)
        ]),
        createVNode(unref(ElDialog), {
          modelValue: removeEdgeDialogVisible.value,
          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => removeEdgeDialogVisible.value = $event),
          title: "删除连线",
          width: "30%"
        }, {
          footer: withCtx(() => [
            createBaseVNode("div", _hoisted_14, [
              createVNode(unref(ElButton), {
                onClick: _cache[7] || (_cache[7] = ($event) => removeEdgeDialogVisible.value = false)
              }, {
                default: withCtx(() => [..._cache[17] || (_cache[17] = [
                  createTextVNode("取消", -1)
                ])]),
                _: 1
              }),
              createVNode(unref(ElButton), {
                type: "danger",
                onClick: confirmRemoveEdge
              }, {
                default: withCtx(() => [..._cache[18] || (_cache[18] = [
                  createTextVNode("确定", -1)
                ])]),
                _: 1
              })
            ])
          ]),
          default: withCtx(() => [
            _cache[19] || (_cache[19] = createBaseVNode("span", null, "是否要删除该连线？", -1))
          ]),
          _: 1
        }, 8, ["modelValue"]),
        createVNode(unref(ElDialog), {
          modelValue: removeNodeDialogVisible.value,
          "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => removeNodeDialogVisible.value = $event),
          title: "删除点位",
          width: "30%"
        }, {
          footer: withCtx(() => [
            createBaseVNode("div", _hoisted_15, [
              createVNode(unref(ElButton), {
                onClick: _cache[9] || (_cache[9] = ($event) => removeNodeDialogVisible.value = false)
              }, {
                default: withCtx(() => [..._cache[20] || (_cache[20] = [
                  createTextVNode("取消", -1)
                ])]),
                _: 1
              }),
              createVNode(unref(ElButton), {
                type: "danger",
                onClick: confirmRemoveNode
              }, {
                default: withCtx(() => [..._cache[21] || (_cache[21] = [
                  createTextVNode("确定", -1)
                ])]),
                _: 1
              })
            ])
          ]),
          default: withCtx(() => [
            _cache[22] || (_cache[22] = createBaseVNode("span", null, "是否要删除该点位？", -1))
          ]),
          _: 1
        }, 8, ["modelValue"])
      ]);
    };
  }
});
export {
  _sfc_main as default
};