import React from 'react';
import CircleServe from './mapServe';
import { Badge } from 'antd';
import { useXFlowApp, XFlowNodeCommands } from '@antv/xflow';
export { CircleServe };

export default function CustomRect(props) {
  const { size = { width: 90, height: 90 }, data } = props;
  const { width, height } = size;
  const { label, stroke, fill, fontFill, fontSize } = data;
  const app = useXFlowApp();
  const handleClick = () => {
    // console.log(data);
    app.executeCommand(XFlowNodeCommands.SELECT_NODE.id, {
      nodeId: data.id,
    });
    // console.log('XFlowNodeCommands.SELECT_NODE.id', data);
    // message.success(`${XFlowNodeCommands.SELECT_NODE.label}: 命令执行成功`);
  };
  return (
    <Badge count={data.versions} offset={[-10, 10]}>
      <div
        className="container"
        onClick={handleClick}
        style={{
          width,
          height,
          border: `2px solid ${stroke || '#FEDDAE'}`,
          backgroundColor: fill || '#FEF7E7',
          color: fontFill,
          fontSize,
          borderRadius: '50%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          padding: "0px 8px",
          lineHeight: 1.2
        }}
      >
        <span style={{ textAlign: 'center', lineHeight: '20px' }}>{label}</span>
      </div>
    </Badge>
  );
}