const lineDash = [4, 2, 1, 2];
const interval = 9;

G6.registerEdge(
  'customEdge',
  {
    /**
     * 绘制边，包含文本
     * @param  {Object} cfg 边的配置项
     * @param  {G.Group} group 图形分组，边中的图形对象的容器
     * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到
     */
    draw(cfg, group) {
      // console.log('--cfg--', cfg)
      let sourceNode, targetNode, start, end
      if (typeof (cfg.source) === 'string') {
        cfg.source = cfg.sourceNode
      }
      if (!cfg.start) {
        cfg.start = {
          x: 85,
          y: 0
        }
      }
      if (!cfg.end) {
        cfg.end = {
          x: -85,
          y: 0
        }
      }
      if (!cfg.source.x) {
        sourceNode = cfg.sourceNode.getModel()
        start = { x: sourceNode.x + cfg.start.x, y: sourceNode.y + cfg.start.y }
      } else {
        start = cfg.source
      }
      if (typeof (cfg.target) === 'string') {
        cfg.target = cfg.targetNode
      }
      if (!cfg.target.x) {

        targetNode = cfg.targetNode.getModel()
        end = { x: targetNode.x + cfg.end.x, y: targetNode.y + cfg.end.y }
      } else {
        end = cfg.target
      }

      let path = []
      let hgap = Math.abs(end.x - start.x)
      if (end.x > start.x) {
        path = [
          ['M', start.x, start.y],
          [
            'C',
            start.x + hgap / (hgap / 50),
            start.y,
            end.x - hgap / (hgap / 50),
            end.y,
            end.x - 6,
            end.y
          ],
          [
            'L',
            end.x,
            end.y
          ]
        ]
      } else {
        path = [
          ['M', start.x, start.y],
          [
            'C',
            start.x,
            start.y,
            end.x,
            end.y,
            end.x - 6,
            end.y
          ],
          [
            'L',
            end.x,
            end.y
          ]
        ]
      }
      const keyShape = group.addShape('path', {
        attrs: {
          id: 'edge' + _.uniqueId(),
          path: path,
          stroke: '#b8c3ce',
          lineWidth: 1,
          lineAppendWidth: 8,
          endArrow: {
            fill: '#b8c3ce',
            path: G6.Arrow.vee(10, 15)
          }
        }
      });
      return keyShape
    },
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg 边的配置项
     * @param  {G.Group} group 图形分组，边中的图形对象的容器
     */
    afterDraw(cfg, group) {
      const shape = group.get('children')[0]; // 获取图形组中的第一个图形，在这里就是边的路径图形
      const length = shape.getTotalLength(); // G 增加了 totalLength 的接口
      const startPoint = shape.getPoint(0); // 获取路径图形的中点坐标
      let totalArray = [];
      for (var i = 0; i < length; i += interval) {
        totalArray = totalArray.concat(lineDash);
      }
      // 在中点增加一个圆形
      const circle = group.addShape('circle', {
        attrs: {
          x: startPoint.x,
          y: startPoint.y,
          fill: '#1890ff',
          r: 3,
        },
        name: 'circle-shape',
      });
      circle.animate(
        ratio => {
          const tmpPoint = shape.getPoint(ratio);
          return {
            x: tmpPoint.x,
            y: tmpPoint.y,
          };
        },
        {
          repeat: true,
          duration: 3000,
        },
      );
    },
    /**
     * 设置边的状态，主要是交互状态，业务状态请在 draw 方法中实现
     * 单图形的边仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法
     * @param  {String} name 状态名称
     * @param  {Object} value 状态值
     * @param  {Edge} item 边
     */
    setState(name, value, item) {
      const group = item.getContainer();
      const shape = group.get("children")[0];
      const selectStyles = () => {
        shape.attr("stroke", "#1890ff");
        shape.attr("lineWidth", 2);
      };
      const unSelectStyles = () => {
        shape.attr("stroke", "#b8c3ce");
        shape.attr("lineWidth", 1);
      };
      switch (name) {
        case "selected":
        case "hover":
          if (value) {
            selectStyles()
          } else {
            unSelectStyles()
          }
          break;
      }
    }
  }
);
G6.registerEdge(
  'link-edge',
  {
    draw(cfg, group) {
      let sourceNode, targetNode, start, end
      if (!cfg.source.x) {
        sourceNode = cfg.sourceNode.getModel()
        start = { x: sourceNode.x + cfg.start.x, y: sourceNode.y + cfg.start.y }
      } else {
        start = cfg.source
      }
      if (!cfg.target.x) {
        targetNode = cfg.targetNode.getModel()
        end = { x: targetNode.x + cfg.end.x, y: targetNode.y + cfg.end.y }
      } else {
        end = cfg.target
      }
      let path = [
        ['M', start.x, start.y],
        ['L', end.x, end.y]
      ]
      const keyShape = group.addShape('path', {
        attrs: {
          id: 'edge' + _.uniqueId(),
          path: path,
          stroke: '#1890FF',
          strokeOpacity: 1,
        }
      });
      return keyShape
    },
  }
);
