flow-playform-react/src/pages/flowEditor/components/nodeContent.tsx

import React from 'react';
import styles from '@/pages/flowEditor/node/style/base.module.less';
import { Handle, Position, useStore } from '@xyflow/react';
import { isJSON } from '@/utils/common';
import cronstrue from 'cronstrue/i18n';

interface NodeContentData {
  parameters?: {
    dataIns?: any[];
    dataOuts?: any[];
    apiIns?: any[];
    apiOuts?: any[];
  };
  showFooter?: boolean;
  type?: string;

  [key: string]: any;
}

// 定义通用的句柄样式
const handleStyles = {
  mainSource: {
    background: '#2290f6',
    width: '8px',
    height: '8px',
    border: '2px solid #fff',
    boxShadow: '0 0 4px rgba(0,0,0,0.2)'
  },
  mainTarget: {
    background: '#2290f6',
    width: '8px',
    height: '8px',
    border: '2px solid #fff',
    boxShadow: '0 0 4px rgba(0,0,0,0.2)'
  },
  data: {
    background: '#555',
    width: '6px',
    height: '6px',
    border: '1px solid #fff',
    boxShadow: '0 0 2px rgba(0,0,0,0.2)'
  }
};

// 渲染特殊节点（开始/结束节点）的句柄
const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => {
  const renderStartNodeHandles = () => {
    if (!isStartNode) return null;

    return (
      <>
        {apiOuts.map((_, index) => (
          <Handle
            key={`start-output-handle-${index}`}
            type="source"
            position={Position.Right}
            id={apiOuts[index].name || `start-output-${index}`}
            style={{
              ...handleStyles.mainSource,
              top: `${40 + index * 20}px`
            }}
          />
        ))}
        {dataOuts.map((_, index) => (
          <Handle
            key={`output-handle-${index}`}
            type="source"
            position={Position.Right}
            id={dataOuts[index].name || `output-${index}`}
            style={{
              ...handleStyles.data,
              top: `${60 + index * 20}px`
            }}
          />
        ))}
      </>
    );
  };

  const renderEndNodeHandles = () => {
    if (!isEndNode) return null;

    return (
      <>
        {apiIns.map((_, index) => (
          <Handle
            key={`end-input-handle-${index}`}
            type="target"
            position={Position.Left}
            id={apiIns[index].name || `end-input-${index}`}
            style={{
              ...handleStyles.mainTarget,
              top: `${40 + index * 20}px`
            }}
          />
        ))}
        {dataIns.map((_, index) => (
          <Handle
            key={`input-handle-${index}`}
            type="target"
            position={Position.Left}
            id={dataIns[index].name || `input-${index}`}
            style={{
              ...handleStyles.data,
              top: `${60 + index * 20}px`
            }}
          />
        ))}
      </>
    );
  };

  return (
    <>
      {renderStartNodeHandles()}
      {renderEndNodeHandles()}
    </>
  );
};

// 渲染普通节点的句柄
const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => {
  return (
    <>
      {apiOuts.map((_, index) => (
        <Handle
          key={`api-output-handle-${index}`}
          type="source"
          position={Position.Right}
          id={apiOuts[index].name || `output-${index}`}
          style={{
            ...handleStyles.mainSource,
            top: `${40 + index * 20}px`
          }}
        />
      ))}
      {apiIns.map((_, index) => (
        <Handle
          key={`api-input-handle-${index}`}
          type="target"
          position={Position.Left}
          id={apiIns[index].name || `input-${index}`}
          style={{
            ...handleStyles.mainTarget,
            top: `${40 + index * 20}px`
          }}
        />
      ))}

      {/* 输入参数连接端点 */}
      {dataIns.map((_, index) => (
        <Handle
          key={`data-input-handle-${index}`}
          type="target"
          position={Position.Left}
          id={dataIns[index].name || `input-${index}`}
          style={{
            ...handleStyles.data,
            top: `${40 + (index + 1) * 20}px`
          }}
        />
      ))}

      {/* 输出参数连接端点 */}
      {dataOuts.map((_, index) => (
        <Handle
          key={`data-output-handle-${index}`}
          type="source"
          position={Position.Right}
          id={dataOuts[index].name || `output-${index}`}
          style={{
            ...handleStyles.data,
            top: `${40 + (index + 1) * 20}px`
          }}
        />
      ))}
    </>
  );
};

const formatFooter = (data: any) => {
  console.log('formatFooter：', data);
  switch (data.type) {
    case 'WAIT':
      const { duration } = data.customDef;
      const hours = Math.floor(duration / 3600);
      const minutes = Math.floor((duration % 3600) / 60);
      const seconds = Math.floor(duration % 60);
      return `${hours}小时${minutes}分钟${seconds}秒`;
    case 'CYCLE':
      const { intervalSeconds } = data.customDef;
      return cronstrue.toString(intervalSeconds, { locale: 'zh_CN' });
    case 'EVENTSEND':
    case 'EVENTLISTENE':
      const { name } = data.customDef;
      return `事件: ${name}`;
    default:
      return '这个类型还没开发';
  }
};

const NodeContent = ({ data }: { data: NodeContentData }) => {
  const apiIns = data.parameters?.apiIns || [];
  const apiOuts = data.parameters?.apiOuts || [];
  const dataIns = data.parameters?.dataIns || [];
  const dataOuts = data.parameters?.dataOuts || [];
  const showFooter = data?.component?.customDef || false;
  const footerData = (showFooter && data.component) || {};

  // 判断节点类型
  const isStartNode = data.type === 'start';
  const isEndNode = data.type === 'end';
  const isSpecialNode = isStartNode || isEndNode;

  return (
    <>
      {/*content栏*/}
      <div className={styles['node-content']}>
        {dataIns.length > 0 && !isStartNode && (
          <div className={styles['node-inputs']}>
            {dataIns.map((input, index) => (
              <div key={`input-${index}`} className={styles['node-input-label']}>
                {input.id || `输入${index + 1}`}
              </div>
            ))}
          </div>
        )}

        {dataOuts.length > 0 && !isEndNode && (
          <div className={styles['node-outputs']}>
            {dataOuts.map((output, index) => (
              <div key={`output-${index}`} className={styles['node-input-label']}>
                {output.id || `输出${index + 1}`}
              </div>
            ))}
          </div>
        )}
      </div>

      {/*footer栏*/}
      {showFooter && (
        <div className={styles['node-footer']}>
          {formatFooter(footerData)}
        </div>
      )}

      {/* 根据节点类型渲染不同的句柄 */}
      {isSpecialNode
        ? renderSpecialNodeHandles(isStartNode, isEndNode, dataIns, dataOuts, apiIns, apiOuts)
        : renderRegularNodeHandles(dataIns, dataOuts, apiIns, apiOuts)}
    </>
  );
};

export default NodeContent;