
import TreeCharts from './TreeCharts';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Spin } from 'antd';
import { useMemo, useState } from 'react';

const SystemIndex = ({ indexId }: { indexId: string }) => {
  const [treeData, setTreeData] =
    useState<PhysicalsignApi.IndexSystemVO | null>(null);

  const { data, loading } = useRequest(
    () => services.Physicalsign.getIndexSystem(indexId),
    {
      onSuccess: (result) => {
        if (result && result.data) {
          setTreeData(result.data as any);
        }
      },
    },
  );

  const processData = (data: PhysicalsignApi.IndexSystemVO) => {
    const processNode = (node: PhysicalsignApi.IndexSystemVO): any => {
      return {
        name: node.name,
        value: node.actualScore,
        symbolSize: [70, 30],
        symbol: 'rectangle',
        collapsed: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside',
            },
            borderWidth: 2,
            borderColor: 'black',
          },
        },
        children: node.children ? node.children.map(processNode) : undefined,
      };
    };

    return { ...processNode(data), collapsed: false };
  };
  const processedData = useMemo(() => {
    if (!treeData) return [];
    return [processData(treeData)];
  }, [treeData]);

  return (
    <>
      {processedData?.length ? (
        <TreeCharts style={{ height: 600 }} treeData={processedData} />
      ) : (
        <div
          style={{
            width: '100%',
            height: 630,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          {loading ? <Spin /> : <span>暂无数据</span>}
        </div>
      )}
    </>
  );
};

export default SystemIndex;
