import { reactive, ref } from 'vue';
import { FLOW_CREATE_ID } from './initGraph';
import { cancelKeyboardEvents, keyboardEvents } from './keyboard';

// 控制连接桩显示/隐藏
const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
  for (let i = 0, len = ports.length; i < len; i += 1) {
    ports[i].style.visibility = show ? 'visible' : 'hidden';
  }
};
/** 选中的节点 */
let selectNode: any = null;

export const initNodeEvents = (graph: any) => {
  graph.on('node:mouseenter', () => {
    const container = document.getElementById(FLOW_CREATE_ID)!;
    const ports = container.querySelectorAll(
      '.x6-port-body'
    ) as NodeListOf<SVGElement>;
    showPorts(ports, true);
  });
  graph.on('node:mouseleave', () => {
    const container = document.getElementById(FLOW_CREATE_ID)!;
    const ports = container.querySelectorAll(
      '.x6-port-body'
    ) as NodeListOf<SVGElement>;
    showPorts(ports, false);
  });
  graph.on('node:selected', ({ node }:any) => {
    // console.log('selected node', node);
    // const flowElement = document.getElementById('flow-create-content') as HTMLElement;
    // flowElement.tabIndex = -1;
    // flowElement.focus();

  });
  graph.on('node:unselected', ({ node }:any) => {
    console.log('unselected node', node);
    node.removeTools();
    const container = document.getElementById(FLOW_CREATE_ID)!;
    const ports = container.querySelectorAll(
      '.x6-port-body'
    ) as NodeListOf<SVGElement>;
    showPorts(ports, false);
    drawerVisible.value = false;
    selectNode = null;
  });

  graph.on('node:click', ({ node }:any) => {
    console.log('click node', node, node.data);
    if (node.data.isApp) {
      drawerVisible.value = true;
      updateNodeAttribute(node.data);
      selectNode = node;
      // for (const key in node.data) {
      //   nodeAttribute[key] = node.data[key];
      // }
      // console.log('nodeAttribute', nodeAttribute);
    }
    node.addTools({
      name: 'boundary',
      args: {
        padding: 0,
        attrs: {
          // fill: '#7c68fc',
          stroke: '#0366FF ',
          'stroke-width': 2,
          'stroke-dasharray': '',
          rx: 4,
          ry: 4,
        },
      },
    });
  });
};

export const useNodeEvents = () => {
  return {
    undoFun,
    zoomInFun,
    zoomOutFun,
    yAlign,
  };
};

const undoFun = (graph: any) => {
  console.log('graph undoFun', graph);
  graph.undo();
};

const zoomInFun = (graph: any) => {
  graph.zoom(-0.2);
};

const zoomOutFun = (graph: any) => {
  graph.zoom(0.2);
};

const yAlign = (graph: any) => {
  const nodes = graph.getSelectedCells();

};

const drawerVisible = ref(false);

export const useNodeAttribute = () => {
  return {
    drawerVisible,
    nodeAttribute,
  };
};

export const nodeAttribute = reactive<any>({
  label: '',
  uuid: '',
  type: '',
  iconUrl: '',
  preScripts: [],
  postScripts: [],
  postExeCommand: '', // 执行命令
  preExeCommand: '', // 执行命令
  nodeCondition: 'and', // 节点条件
  exeMethod: 'serviceTask', // 执行方式
  inputFormat: '', // 输入文件格式
  outputFormat: '', // 输出文件格式
  pageConfigList: [],
});

export const updateNodeAttribute = (val:any) => {
  for (const key in val) {
    nodeAttribute[key] = val[key];
  }
  if (selectNode) {
    selectNode.setData(nodeAttribute);
  }
};

