<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
    <div class="control-panel">
      <el-button @click="openSelectionSelect">选区</el-button>
      <div v-for="item in dndConfig" :key="item.type" class="dnd-item">
        <img :src="item.icon" :alt="item.label" />
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import { DynamicGroup } from "@logicflow/extension";

const container = ref(null);
let lf = null;

// 拖拽面板配置
const dndConfig = [
  {
    type: 'dynamic-group',
    label: '内置动态分组',
    text: 'DynamicGroup',
    icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/group/group.png',
  },
  {
    type: 'circle',
    label: '圆形',
    text: 'Circle',
    icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/group/circle.png',
  },
  {
    type: 'rect',
    label: '矩形',
    text: 'Rect',
    icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/group/rect.png',
  },
];

// 选区功能
const openSelectionSelect = () => {
  if (lf) {
    lf.openSelectionSelect();
    lf.once('selection:selected', () => {
      lf.closeSelectionSelect();
    });
  }
};

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    multipleSelectKey: "alt",
    autoExpand: false,
    allowResize: true,
    allowRotate: true,
    nodeTextDraggable: false,
    keyboard: {
      enabled: true,
    },
    plugins: [DynamicGroup],
  });

  // 设置拖拽面板
  const dndPanelConfig = [
    {
      label: '选区',
      icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/bpmn/select.png',
      callback: openSelectionSelect,
    },
    ...dndConfig,
  ];
  lf.setPatternItems(dndPanelConfig);

  // 渲染数据
  const graphData = {
    nodes: [
      {
        id: 'circle_2',
        type: 'circle',
        x: 800,
        y: 140,
        text: {
          value: 'circle_2',
          x: 800,
          y: 140,
          editable: false,
          draggable: true,
        },
      },
      {
        id: 'dynamic-group_1',
        type: 'dynamic-group',
        x: 500,
        y: 140,
        text: 'dynamic-group_1',
        resizable: true,
        properties: {
          collapsible: true,
          width: 420,
          height: 250,
          radius: 5,
          isCollapsed: true,
        },
      },
      {
        id: 'dynamic-group_2',
        type: 'dynamic-group',
        x: 500,
        y: 220,
        text: 'dynamic-group_2',
        resizable: true,
        properties: {
          width: 420,
          height: 250,
          radius: 5,
          collapsible: false,
          isCollapsed: false,
        },
      },
    ],
    edges: [],
  };

  lf.render(graphData);
});
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dnd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.dnd-item img {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
</style>