import { register } from '@antv/x6-vue-shape';
import X6VueShape from './x6_vue_shape.vue';
import X6DiamondShape from './x6_diamond_shape.vue';
import X6CircleShape from './x6_circle_shape.vue';
import NewX6VueShape from './new_x6_vue_shape.vue';
import BpmnImgShape from './bpmn_img_shape.vue';
import BpmnLaneShape from './bpmn_lane_shape.vue';
import BpmnNotesShape from './bpmn_notes_shape.vue';
import { SHOW_NEW_FLOW_DESIGN } from '@/config/setting';

let attrs = {
  circle: {
    r: 6,
    stroke: '#31d0c6',
    magnet: true,
    fill: '#fff'
  }
};

export default function () {
  // 自定义vue节点
  register({
    zIndex: 2,
    shape: 'custom-vue-shape',
    component: X6VueShape,
    width: 254,
    height: 76,
    ports: {
      groups: {
        top: {
          position: 'top',
          attrs
        },
        bottom: {
          position: 'bottom',
          attrs
        },
        left: {
          position: 'left',
          attrs
        },
        right: {
          position: 'right',
          attrs
        }
      }
    }
  });

  // 网关节点
  register({
    zIndex: 2,
    shape: 'custom-polygon',
    component: X6DiamondShape,
    width: 80,
    height: 98,
    ports: {
      groups: {
        top: {
          position: 'top',
          attrs
        },
        right: {
          position: 'right',
          attrs
        },
        bottom: {
          position: 'bottom',
          attrs
        },
        left: {
          position: 'left',
          attrs
        }
      },
      items: [
        {
          group: 'top'
        },
        {
          group: 'bottom'
        },
        {
          group: 'left'
        },
        {
          group: 'right'
        }
      ]
    }
  });

  // 开始、结束节点
  register({
    zIndex: 2,
    shape: 'custom-circle',
    component: X6CircleShape,
    width: 92,
    height: 36,
    ports: {
      groups: {
        top: {
          position: 'top',
          attrs
        },
        right: {
          position: 'right',
          attrs
        },
        bottom: {
          position: 'bottom',
          attrs
        },
        left: {
          position: 'left',
          attrs
        }
      }
    }
  });

  if (SHOW_NEW_FLOW_DESIGN) {
    // 自定义vue节点
    register({
      zIndex: 2,
      shape: 'custom-bpmn-vue-shape',
      component: NewX6VueShape,
      width: 170,
      height: 90,
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs
          },
          bottom: {
            position: 'bottom',
            attrs
          },
          left: {
            position: 'left',
            attrs
          },
          right: {
            position: 'right',
            attrs
          }
        }
      }
    });

    // 自定义图片
    register({
      zIndex: 2,
      shape: 'custom-bpmn-img-shape',
      component: BpmnImgShape,
      width: 80,
      height: 70,
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs
          },
          bottom: {
            position: 'bottom',
            attrs
          },
          left: {
            position: 'left',
            attrs
          },
          right: {
            position: 'right',
            attrs
          }
        },
        items: [
          {
            group: 'top'
          },
          {
            group: 'bottom'
          },
          {
            group: 'left'
          },
          {
            group: 'right'
          }
        ]
      }
    });

    // 自定义泳道
    register({
      zIndex: 1,
      shape: 'custom-bpmn-lane-shape',
      component: BpmnLaneShape,
      width: 600,
      height: 200,
      ports: {}
    });

    // 自定义注释节点
    register({
      zIndex: 2,
      shape: 'custom-bpmn-notes-shape',
      component: BpmnNotesShape,
      width: 100,
      height: 40,
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs
          },
          bottom: {
            position: 'bottom',
            attrs
          },
          left: {
            position: 'left',
            attrs
          },
          right: {
            position: 'right',
            attrs
          }
        }
      }
    });
  }

  // 业务图 自定义节点
  register(
    {
      zIndex: 2,
      shape: 'custom-business-rect',
      inherit: 'rect',
      width: 120,
      height: 40,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#ADB5B8',
          fill: '#ffffff',
        },
        text: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs
          },
          right: {
            position: 'right',
            attrs
          },
          bottom: {
            position: 'bottom',
            attrs
          },
          left: {
            position: 'left',
            attrs
          }
        },
        items: [
          {
            group: 'top'
          },
          {
            group: 'bottom'
          },
          {
            group: 'left'
          },
          {
            group: 'right'
          }
        ]
      },
      tools: [
        {
          name: 'node-editor',
          args: {
            attrs: {
              backgroundColor: '#ffffff',
            },
          },
        },
      ],
    }
  );

  register(
    {
      zIndex: 2,
      shape: 'custom-business-polygon',
      inherit: 'polygon',
      width: 100,
      height: 60,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#ADB5B8',
          fill: '#ffffff',
        },
        text: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs
          },
          right: {
            position: 'right',
            attrs
          },
          bottom: {
            position: 'bottom',
            attrs
          },
          left: {
            position: 'left',
            attrs
          }
        },
        items: [
          {
            group: 'top'
          },
          {
            group: 'bottom'
          },
          {
            group: 'left'
          },
          {
            group: 'right'
          }
        ]
      },
      tools: [
        {
          name: 'node-editor',
          args: {
            attrs: {
              backgroundColor: '#ffffff',
            },
          },
        },
      ],
    }
  );

  register(
    {
      zIndex: 2,
      shape: 'custom-business-circle',
      inherit: 'circle',
      width: 60,
      height: 60,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#ADB5B8',
          fill: '#ffffff',
        },
        text: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs
          },
          right: {
            position: 'right',
            attrs
          },
          bottom: {
            position: 'bottom',
            attrs
          },
          left: {
            position: 'left',
            attrs
          }
        },
        items: [
          {
            group: 'top'
          },
          {
            group: 'bottom'
          },
          {
            group: 'left'
          },
          {
            group: 'right'
          }
        ]
      },
      tools: [
        {
          name: 'node-editor',
          args: {
            attrs: {
              backgroundColor: '#ffffff',
            },
          },
        },
      ],
    }
  );
}
