import ReactEcharts from 'echarts-for-react';

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

const data2 = [
  {
    name: "安全",
    lostScore: '-3.5',
    children: [
      {
        name: "道路桥梁安全",
        lostScore: '-1',
        children: [
          {
            name: "施工与占道安全",
            lostScore: '-0.5',
            children: [
              {
                name: "过街天桥破损",
                lostScore: '-0.5',
              },
              {
                name: "过街天桥破损",
                lostScore: '-0.5',
              },
              {
                name: "过街天桥破损",
                lostScore: '-0.5',
              },
              {
                name: "过街天桥破损",
                lostScore: '-0.5',
              }
            ]
          },
          {
            name: "井盖安全",
            lostScore: '-0.5',
          },
        ],
      },
      {
        name: "交通设施安全",
        lostScore: '-0.5',
        children: [],
      },
      {
        name: "城市照明安全",
        lostScore: '-0.5',
        children: [],
      },
      {
        name: "道路积水安全",
        lostScore: '-0.5',
        children: [],
      },
      {
        name: "广告招牌安全",
        lostScore: '-0.5',
        children: [],
      },
    ],
  },
];

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

  //递归设置数据
  const deepData = (data: any[]) => {
    let newData: any = [];
    data?.forEach((item) => {
      item['value'] = item?.lostScore;
      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%',
        symbolSize: 75,
        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: 52,
              fontSize: 20,
              labelLayout: {
                align: 'center',
              },
              backgroundColor: '#265D90',
              borderRadius: 16,
              borderWidth: 1,
              borderColor: '#265D90',
            },
            b: {
              align: 'center',
              fontSize: 20,
              // width: 180,
              padding: [0, 20],
              height: 52,
              fontFamily: 'CustomFont',
              color: '#fff',
              backgroundColor: '#265D90',
              borderRadius: 16,
              borderWidth: 1,
              borderColor: '#265D90',
            },
          },
        },
        data: deepData(data.length ? [data] : data2),
      },
    ],
  };
  const getOption = () => {
    return option;
  };
  return <ReactEcharts option={getOption()} style={{ height: '600px' }} />;
};
export default TraceSourceOfLostPoints;
