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

interface TraceSourceOfLostPointsProps {
  data: any;
  showLostPoints?: boolean;
  style?: React.CSSProperties;
}

const TraceSourceOfLostPoints: React.FC<TraceSourceOfLostPointsProps> = (props) => {
  const { data, showLostPoints } = props;
  console.log('TraceSourceOfLostPoints', data);
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;

  const { modalOpt, setModalOpt, setInfluenceIndexData } = useModel('qualityModal', (model) => ({
    modalOpt: model.modalOpt,
    setModalOpt: model.setModalOpt,
    setInfluenceIndexData: model.setInfluenceIndexData
  }));


  //递归设置数据
  const deepData = (data: any[]) => {
    console.log(111, data)
    let newData: any = [];
    data?.forEach((item) => {
      item['value'] = item?.lostScore > 0 ? `-${item?.lostScore}` : "";
      item['collapsed'] = true
      newData.push(item);
      if (item.children && item.children.length) {
        item.children = deepData(item.children);
      }
    });
    return newData;
  };

  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,
        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) => {
            if (showLostPoints) {
              return [`{a|${param.data.name} ${param.data.value}}`].join(
                '\n',
              );
            } else {
              return [`{a|${param.data.name}}`].join(
                '\n',
              );
            }
          },
          rich: {
            a: {
              align: 'center',
              color: '#fff',
              // width: 128,
              padding: [0, 20],
              height: 40,
              fontSize: 20,
              labelLayout: {
                align: 'center',
              },
              backgroundColor: '#265D90',
              borderRadius: 16,
              borderWidth: 1,
              borderColor: '#265D90',
            },
            b: {
              align: 'center',
              fontSize: 20,
              // width: 180,
              padding: [0, 20],
              fontFamily: 'CustomFont',
              color: '#fff',
              backgroundColor: '#265D90',
              borderRadius: 16,
              borderWidth: 1,
              borderColor: '#265D90',
            },
          },
        },
        data: deepData(data?.children?.length ? [data] : []),
      },
    ],
  };

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

  const onChartClick = (params: any) => {
    const { data } = params;

    if (data.lastFlag === '1' && showLostPoints) {
      console.log(data)
      console.log('点击了节点');
      services.Physicalsign.getlistTopNItems({
        indexType: data.indexType,
        physicalSignType: 1,
        objectId: areaId,
        indexId: 26,
        n: 1
      }).then(res => {
        if (res.code === 200) {
          const data = res.data
          if (data?.length) {
            setModalOpt([...modalOpt, { title: '影响指标', type: 'influenceSign' }])
            setInfluenceIndexData(data[0] || {})
          }
        }
      })
    }
  }

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

};
export default TraceSourceOfLostPoints;
