import { Dnd } from '@antv/x6-plugin-dnd';
import { PORTS, bpmnPORTS } from '../shape/gengral-config';
import { CustomX6NodeProxy } from './custom_x6_node_proxy';
import { message } from 'ant-design-vue';
import { FormDesignApi } from '../../form/design/api/FormDesignApi';

export class WorkflowDnd {
  graph;
  dnd;

  constructor(graph) {
    this.graph = graph;
    this.dnd = new Dnd({
      target: graph,
      getDragNode: node => node.clone({ keepId: true }),
      getDropNode: node => node.clone({ keepId: true }),
      validateNode: async droppingNode => {
        // 验证节点是否可以拖拽进画布

        let droppingNodeData = JSON.parse(droppingNode.data);
        // 判断拖拽的节点类型是否是开始事件
        if (droppingNodeData.type === 10) {
          if (graph.getNodes().length > 0) {
            let node = graph.getNodes().find(({ data }) => {
              return data && JSON.parse(data).type === droppingNodeData.type;
            });
            if (node) {
              message.warn('只能有一个开始事件');
              return false;
            }
          }
        }

        // 判断拖拽的节点类型是否是结束事件
        if (droppingNodeData.type === 11) {
          if (graph.getNodes().length > 0) {
            let node = graph.getNodes().find(({ data }) => {
              return data && JSON.parse(data).type === droppingNodeData.type;
            });
            if (node) {
              message.warn('只能有一个结束事件');
              return false;
            }
          }
        }

        return true;
      }
    });
  }

  async drag(data, event) {
    let id = await FormDesignApi.genId();
    if (id) {
      let node = null;
      data.data.nodeId = id;
      // 旧ui
      if (data.type < 99) {
        // 网关节点
        if (data.type === 50 || data.type === 51 || data.type === 52) {
          node = this.graph.createNode({
            id,
            shape: 'custom-polygon',
            data: data,
            label: data.name,
            ports: { ...PORTS }
          });
        } else if ([10, 11, 60, 61].includes(data.type)) {
          let obj = {
            id,
            shape: 'custom-circle',
            data: data,
            width: 92,
            height: 36,
            label: data.name,
            ports: { ...PORTS }
          }
          if (data.type == 60) {
            obj.width = 172;
          } else if (data.type == 61) {
            obj.width = 123;
          }
          // 开始、结束
          node = this.graph.createNode(obj);
        } else {
          node = this.graph.createNode({
            id,
            shape: 'custom-vue-shape',
            width: 254,
            height: 76,
            data: data,
            ports: { ...PORTS }
          });
        }
      } else {
        // bpmn
        if (data.type == 99) {
          node = this.graph.createNode({
            id,
            shape: 'custom-bpmn-notes-shape',
            data: data,
            ports: { ...bpmnPORTS }
          });
        } else if (data.type == 248) {
          let obj = {
            id,
            shape: 'custom-circle',
            data: data,
            width: 172,
            height: 36,
            label: data.name,
            ports: { ...PORTS }
          }
          node = this.graph.createNode(obj);
        } else if (data.type != 99.5 && (data.type > 99 && data.type < 190 || data.type > 229 && data.type < 250 || data.type > 279 && data.type < 290)) {
          node = this.graph.createNode({
            id,
            shape: 'custom-bpmn-img-shape',
            data: data,
            ports: { ...bpmnPORTS }
          });
        } else if (data.type == 99.5 || data.type > 259 && data.type < 270) {
          node = this.graph.createNode({
            id,
            shape: 'custom-bpmn-lane-shape',
            data: data,
            ports: {}
          });
        } else if (data.type > 299 && data.type < 399) {
          // 业务图
          if (data.type == 300) {
            node = this.graph.createNode({
              id,
              shape: 'custom-business-rect',
              data: data,
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: 'transparent',
                  fill: 'transparent',
                }
              },
              label: data.name,
              ports: { ...PORTS }
            });
          } else if (data.type == 301) {
            node = this.graph.createNode({
              id,
              shape: 'custom-business-circle',
              data: data,
              label: data.name,
              ports: { ...PORTS }
            });
          } else if (data.type == 302) {
            node = this.graph.createNode({
              id,
              shape: 'custom-business-rect',
              data: data,
              label: data.name,
              ports: { ...PORTS }
            });
          } else if (data.type == 303) {
            node = this.graph.createNode({
              id,
              shape: 'custom-business-polygon',
              data: data,
              label: data.name,
              attrs: {
                body: {
                  refPoints: '0,10 10,0 20,10 10,20',
                },
              },
              ports: { ...PORTS }
            });
          } else if (data.type == 304) {
            node = this.graph.createNode({
              id,
              shape: 'custom-business-polygon',
              data: data,
              label: data.name,
              attrs: {
                body: {
                  refPoints: '10,0 40,0 30,20 0,20',
                },
              },
              ports: {
                ...PORTS,
              }
            });
          }
        } else {
          node = this.graph.createNode({
            id,
            shape: 'custom-bpmn-vue-shape',
            data: data,
            ports: { ...PORTS }
          });
        }
      }

      const proxy = new CustomX6NodeProxy(node);
      proxy.setData(data);
      this.dnd.start(node, event);
    }
  }
}
