import { h } from '@logicflow/core';
import { VueNodeView } from '@logicflow/vue-node-registry';

export default class BaseNodeView extends VueNodeView {
  getAnchorShape(anchorData: any): any {
    const { x, y, id, name } = anchorData;
    if (name === 'left') {
      return h('rect', {
        x,
        'y': y - 5,
        'width': 2,
        'height': 8,
        'fill': '#296dff',
        'stroke': 'transparent',
        'stroke-width': 2,
        'cursor': 'pointer',
        'data-anchor-id': id,
        'data-node-id': id.split('_')[0],
      } as any);
    }
    else {
      // 使用一个 <g> 包含默认矩形（可见）和悬停时的圆形+号（默认隐藏）
      return h(
        'g',
        {
          'data-anchor-id': id,
          'data-node-id': id.split('_')[0],
          'transform': `translate(${x}, ${y})`,
        } as any,
        [
          h('rect', {
            'x': -1,
            'y': -5,
            'width': 2,
            'height': 8,
            'fill': '#296dff',
            'stroke': 'transparent',
            'stroke-width': 2,
            'cursor': 'pointer',
            'class': 'bf-anchor-rect',
          } as any),
          // 将 circle 与 text 包成一个整体 <g>，便于整体显示/隐藏与事件绑定
          h('g', {
            class: 'bf-anchor-circle-group',
            style: 'display:none; cursor:pointer',
            onClick: (ev: any) => {
              ev.stopPropagation();
              const nodeId = id.split('_')[0];
              const anchorId = id;
              const detail = { ev, nodeId, anchorId, name, x, y };
              const gm = (this as any).graphModel || (this as any).props?.graphModel;
              // console.log('gm--->>>', gm);
              gm.eventCenter.emit('bf:anchor:click', detail);
            },
          } as any, [
            h('circle', {
              'cx': 0,
              'cy': 0,
              'r': 6,
              'fill': '#296dff',
              'stroke': '#296dff',
              'stroke-width': 0,
              'class': 'bf-anchor-circle',
            } as any),
            h('text', {
              'x': 0,
              'y': 1,
              'text-anchor': 'middle',
              'alignment-baseline': 'middle',
              'font-size': 12,
              'fill': '#fff',
              'class': 'bf-anchor-plus',
              'style': 'pointer-events:none',
            } as any, '+'),
          ]),
        ],
      );
    }
  }
}
