import EmptySpace from '@/components/EmptySpace';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useModel } from '@umijs/max';
import ReactEcharts from 'echarts-for-react';
import { useMemo } from 'react';

interface TreeChartsProps {
  data: any;
}

const list2tree = (list: any[], parentId: string,) => {
  let menuObj: any = {}
  list.forEach(item => {
    item.children = []
    menuObj[item.target] = item
    item.key = item.target
    item.name = item.target
    item.checkable = false
  })
  const result = list.filter(item => {
    if (item.source !== parentId) {
      menuObj[item.source]?.children.push(item)
      return false
    }
    return true
  })
  return result
}

const TreeCharts: React.FC<TreeChartsProps> = (
  props,
) => {
  const { data } = props;

  //递归设置数据
  const deepData = (data: any[], parentId: string) => {
    let menuObj: any = {}
    data.forEach(item => {
      item.children = []
      menuObj[item.target] = item
      item.key = item.target
      item.name = item.target
      item.checkable = false
    })
    const result = data.filter(item => {
      if (item.source !== parentId) {
        menuObj[item.source]?.children.push(item)
        return false
      }
      return true
    })
    return result
  };

  const handleDataCollapsed = (data: any) => {
    console.log(data)
    data?.forEach((item: any) => {
      if (item.children && item.children.length) {
        item.children.forEach((v: any) => {
          v.collapsed = true;
        });
      }
    });
    return data;
  };

  const option = {
    title: {
      text: '',
    },

    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b}: {c}',
    },
    toolbox: {
      show: false,
    },

    calculable: false,
    series: [
      {
        symbol: 'roundRect',
        edgeForkPosition: '20%',
        name: '树图',
        type: 'tree',
        // orient: 'horizontal', // vertical horizontal
        rootLocation: {
          x: '50%',
          y: '15%',
        }, 
        // 根节点位置  {x: 'center',y: 10}
        // nodePadding: 20,
        // layerPadding: 40,
        roam: true,
        width: '80%',
        height: '100%',
        left: '8%',
        right: '5%',
        top: '5%',
        bottom: '0',
        itemStyle: {
          normal: {
            color: 'transparent', //节点背景色
            borderCap: 'round',
            lineStyle: {
              color: '#4C86BB',
              width: 2,
              type: 'solid', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
            },
          },
          emphasis: {
            label: {
              show: true,
            },
          },
        },
        label: {
          formatter: (param: any) => {
            return [`{a|${param.data.name}}`].join('\n');
          },
          rich: {
            a: {
              align: 'center',
              color: '#fff',
              // width: 128,
              padding: [10, 20, 8, 20],
              height: 40,
              fontSize: 20,
              labelLayout: {
                align: 'center',
              },
              backgroundColor: '#265D90',
              borderRadius: 16,
              borderWidth: 1,
              borderColor: '#265D90',
            }
          },
        },
        data: handleDataCollapsed(deepData(data || [], '')),
      },
    ],
  };

  const getOptions = useMemo(() => {
    return option;
  }, [data]);

  return (
    <>
      {data?.length ? (
        <ReactEcharts
          option={getOptions}
          style={{ height: '600px' }}
        />
      ) : (
        <EmptySpace describe="暂无数据" style={{ padding: '29% 0' }} />
      )}
    </>
  );
};
export default TreeCharts;
