import { MyBetaModalFormProps } from '@/common';
import { Pie } from '@ant-design/plots';
import { Space } from 'antd';
import { useEffect, useState } from 'react';
export default function WorkOrderPie(props: MyBetaModalFormProps) {
  const [getPieCount, setPieCount] = useState<any>({});
  const config = {
    data: [],
    angleField: '数量',
    colorField: 'name',
    innerRadius: 0.8,
    radius: 0.5,
    style: {
      width: '60px',
    },
    label: {
      text: '数量',
      style: {
        fontWeight: 'bold',
      },
    },
  };

  useEffect(() => {
    setPieCount({
      ...config,
      data: props?.item?.list || [],
      legend: {
        color: {
          render: (legendItem: any, item: any) => {
            console.log(legendItem, item, 'legendItem');
            // 这里可以返回 React 节点或 HTML 字符串
            return (
              <Space
                size="small"
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  flexWrap: 'wrap',
                  gap: '5px',
                }}
              >
                {legendItem?.map((row: any, index: number) => {
                  return (
                    <div key={`item_${index}`}>
                      <div
                        style={{
                          width: 8,
                          height: 8,
                          display: 'inline-block',
                          backgroundColor: row?.color,
                          borderRadius: 100,
                          fontSize: 14,
                          marginRight: 4,
                        }}
                      />
                      {row?.label}：
                      {
                        props?.item?.list?.find(
                          (i: any) => i.name === row?.label,
                        )?.数量
                      }
                    </div>
                  );
                })}
              </Space>
            );
          },
          title: false,
          position: 'top',
          rowPadding: 5,
        },
      },
      annotations: [
        {
          type: 'text',
          style: {
            text: `${props?.item?.total || ''}\n工单总数`,
            x: '50%',
            y: '50%',
            textAlign: 'center',
            fontSize: 20,
            fontStyle: 'bold',
          },
        },
      ],
    });
  }, [props?.item]);

  return (
    <div style={{ height: 400 }}>
      <Pie {...getPieCount} />
    </div>
  );
}
