<template>
  <common-x6-flow
    :nodes="nodeList"
    :tool-list="tools"
    :flow-data="flowData"
    @tool-handel-click="toolHandelClick"
    @select-node="selectNode"
    @change:node="changeNode"
    @open:right-panel="openRightPanel"
  ></common-x6-flow>
</template>

<script setup>
import {  ref, getCurrentInstance } from 'vue';


import nodes from './flow-config/nodes.js'
import tools from './flow-config/tools.js'
const nodeList = ref(nodes.nodes);

const { proxy } = getCurrentInstance();
const flowData = ref(null);


// toolbar 点击回调
function toolHandelClick({ name, graph }) {
  const cells = graph.getSelectedCells();
  console.log(cells);
  switch (name) {
    case 'tool-undo':
      graph.undo();
      break;
    case 'tool-redo':
      graph.redo();
      break;
    case 'tool-copy':
      proxy.$message.success('已复制至剪切板！');
      if (cells.length) {
        graph.copy(cells);
      }
      break;
    case 'tool-cut':
      if (cells.length) {
        proxy.$message.success('已剪切至剪切板！');
        graph.cut(cells);
      }
      break;
    case 'tool-paste':
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 100 });
        graph.cleanClipboard();
        graph.select(cells);
        proxy.$message.success('已粘贴至画板！');
      }
      break;
    case 'tool-delete':
      if (cells.length) {
        graph.cut(cells);
        graph.cleanClipboard();
      }
      break;
    case 'tool-save':
      // updateFlowDat+a(graph, '1');
      break;
    case 'tool-send':
      // updateFlowData(graph, '2');
      break;
    case 'tool-var':
      proxy.$eBus.emit('open:right-panel');
      break;
    default:
      break;
  }
}


function selectNode(data) {
  console.log(data);
}

function changeNode(data) {
  console.log(data);
}

function openRightPanel(data) {
  console.log(data);
}

</script>

<style scoped lang="scss"></style>