/* 注册自定义节点 */

export default G6 => {
  G6.registerNode('tree-node', {
    draw(cfg, group) {
      const isNodeStyle = cfg.nodeType === 'node';
      const style = this.getShapeStyle(cfg, group); // node 样式
      const textStyle = {
        ...style
      }; // 文本节点样式
      const size = G6.Util.getTextSize(cfg.label, 14);

      if (!isNodeStyle) {
        delete textStyle.fill;
        delete textStyle.stroke;
        textStyle.width = size[0] + 12;
      }
      const attrs = isNodeStyle ? style : textStyle;
      const shape = group.addShape('rect', {
        attrs,
        name: 'rect-node',
      });
      let fontSize = 14;
      let textAlign = 'left'
      let content = cfg.label;
      if (cfg.id === '1'){
        fontSize = 22;
        textAlign = 'start';
        content = cfg.label.replace(/(.{10})/g, '$1\n');
        if (cfg.label.length % 10 === 0) {
         content = content.substring(0,content.lastIndexOf("\n"));
        }
      }
      const text = group.addShape('text', {
        attrs: {
          fontSize: fontSize,
          fill: '#666',
          textAlign: textAlign,
          textBaseline: 'middle',
          text: content,
          x: 0,
          y: 0,
        },
        name: 'node-label',
      });
      const bbox = text.getBBox();
      const hasChildren = cfg.children && cfg.children.length > 0;
      shape.attr({
        x: -bbox.width / 2 - 4,
        y: -bbox.height / 2 - 6,
        width: bbox.width + (hasChildren ? 26 : 12),
        height: bbox.height + 12,
      });
      text.attr({
        x: -bbox.width / 2,
        y: 0
      })
      if (hasChildren) {
        const circleX = !isNodeStyle && style.width > size[0] ? (-style.width / 2 + size[0] + 22) : (attrs.width /
          2 + 11);
        group.addShape('marker', {
          attrs: {
            x: bbox.width / 2 + 12,
            y: 0,
            r: 6,
            symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
            stroke: '#666',
            lineWidth: 2,
          },
          name: 'node-icon-text',
        });
        // group.addShape('circle', {
        //   attrs: {
        //     r: 7,
        //     fill: '#fff',
        //     stroke: '#ccc',
        //     x: circleX,
        //   },
        //   name: 'node-icon',
        // });

        // const iconX = !isNodeStyle && style.width > size[0] ? (-style.width / 2 + size[0] + 17) : (style.width /
        //   2 + 6);

        // group.addShape('text', {
        //   attrs: {
        //     text: '-',
        //     fontSize: 16,
        //     fill: '#ccc',
        //     cursor: 'pointer',
        //     x: iconX,
        //     y: 6,
        //   },
        //   name: 'node-icon-text',
        // });
      }

      return shape;
    },
    // update: (cfg, item) => {
    //   const group = item.getContainer();
    //   const icon = group.find((e) => e.get('name') === 'collapse-icon');
    //   icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);
    // },
    update(cfg, node) {
      const group = node.getContainer();
      const children = group.get('children');
      const nodeLabel = children.find(child => child.cfg.name === 'node-label');
      const icon = children.find(child => child.cfg.name === 'node-icon-text');
      let content = cfg.label;
      if (cfg.id === '1'){
        content = cfg.label.replace(/(.{10})/g, '$1\n')
        if (cfg.label.length % 10 === 0) {
         content = content.substring(0,content.lastIndexOf("\n"));
        }
      }
      if (nodeLabel) {
        nodeLabel.attr({
          text: content,
        });
      }

      if (icon) {
        icon.attr(
          'symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse
        );
      }
    },
  }, 'rect');
};
