import React from 'react';
import { message, Badge } from 'antd';
import { useXFlowApp, XFlowNodeCommands } from '@antv/xflow';
// import './dnd-node.less'

export default function CustomRect(props) {
  const { size = { width: 120, height: 50 }, 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.count}>
      <div
        style={{
          width,
          height,
          border: `2px solid ${stroke || '#ADDCFC'}`,
          backgroundColor: fill || '#E6F6FD',
          color: fontFill,
          fontSize,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onClick={handleClick}
      >
        <span>{label}</span>
      </div>
    </Badge>
  );
}
