<template>
  <div class="flow-logic">
    <sub-flow
      :nodes="nodeList"
      :tool-list="toolList"
      :flow-data="subFlowDetail"
      @tool-handel-click="toolHandelClick"
    ></sub-flow>
  </div>

  <!-- 弹窗区域 -->
  <right-panel></right-panel>
</template>

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

/** x6相关end */
import { useRoute } from 'vue-router';
import SubFlow from '../_components/_flow/Index.vue';
import nodes from '../_components/_flow/nodes.js';

import * as api from '../../api/flow';
import NodeDataFormate from '../_components/_flow/nodeDataFormate.js';

const nodeList = ref(nodes.nodes);

const { proxy } = getCurrentInstance();
const route = useRoute();
const subFlowDetail = ref(null);
const subFlowId = ref(route.query.id);

// 获取流程数据
async function getLogicDetailById() {
  await api.getLogicDetailById(subFlowId.value).then((res) => {
    if (res.resultCode === '0') {
      subFlowDetail.value = res.result;
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 获取所有节点信息
function getNodesData(graph) {
  return NodeDataFormate.nodeDataFormate(graph);
}

// 接口调用
async function updateFlowData(graph, type) {
  const databusData = JSON.parse(localStorage.getItem('panelGlobal')) || {};
  const params = {
    jsonData: JSON.stringify(graph),
    databusData: JSON.stringify(databusData[subFlowId.value]),
    stateValue: type,
    nodesData: getNodesData(graph)
  };
  await api
    .updateFlowDataById(params, subFlowId.value)
    .then((res) => {
      if (res.resultCode === '0') {
        proxy.$message.success('流程保存成功！');
      } else {
        proxy.$message.error(res.resultMsg);
      }
    })
    .catch((err) => {
      proxy.$message.error(err);
    });
}

const toolList = ref([
  [
    {
      name: 'tool-undo',
      label: '撤销(meta+shift+z或ctrl+shift+z)'
    },
    {
      name: 'tool-redo',
      label: '重做(meta+z或ctrl+z)'
    }
  ],
  [
    {
      name: 'tool-copy',
      label: '复制(meta+c或ctrl+c)'
    },
    {
      name: 'tool-cut',
      label: '剪切(meta+x或ctrl+X)'
    },
    {
      name: 'tool-paste',
      label: '粘贴(x或ctrl + V)'
    },
    {
      name: 'tool-delete',
      label: '删除(meta+d或ctrl+d)'
    }
  ],
  [
    {
      name: 'tool-save',
      label: '保存'
      // disabeld: true
    },
    {
      name: 'tool-send',
      label: '推送'
      // disabeld: true
    }
  ],
  [
    {
      name: 'tool-var',
      label: '全局变量'
    }
  ]
]);
// 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':
      updateFlowData(graph, '1');
      break;
    case 'tool-send':
      updateFlowData(graph, '2');
      break;
    case 'tool-var':
      proxy.$eBus.emit('open:right-panel');
      break;
    default:
      break;
  }
}

onMounted(() => {
  getLogicDetailById();
});
</script>

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