//部门桑基图
import itemBg from '@/assets/images/unbanManage/treeItemBg.png';
import rootbg from '@/assets/images/unbanManage/treeRootBg.png';
import ReactEcharts from 'echarts-for-react';
const TreeCharts: React.FC<{ style?: React.CSSProperties }> = (props) => {
  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) => {
            console.log(param);
            if (param.dataIndex === 1) {
              return [`{a|${param.data.name}}`].join(
                '\n',
              );
            } else {
              return [
                `{b|${param.data.name}}`,

              ].join('\n');
            }
          },

          rich: {
            a: {
              align: 'center',
              color: '#fff',
              width: 128,
              height: 52,
              fontSize: 20,
              labelLayout: {
                align: 'center',
              },
              backgroundColor: '#265D90',
              borderRadius: 16,

              borderWidth: 1,
              borderColor: '#265D90',
            },

            b: {
              align: 'center',
              fontSize: 20,
              width: 180,
              height: 52,
              fontFamily: 'CustomFont',
              color: '#fff',
              backgroundColor: '#265D90',
              borderRadius: 16,
              borderWidth: 1,
              borderColor: '#265D90',
            },


          },
        },
        data: [
          {
            name: '安全',
            value: 6,
            symbolSize: [236, 272],

            children: [
              {
                name: '交通设施安全',
                value: 4,
                // symbolSize: [70, 30],
                // symbol: 'rectangle',

                children: [

                  {
                    name: '项目中心',
                    value: 4,
                    symbolSize: [70, 30],
                    symbol: 'rectangle',
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'inside',
                        },
                        borderWidth: 2,
                        borderColor: 'black',
                      },
                    },
                    children: [
                      {
                        name: '售前支持部',
                        value: 4,
                        symbolSize: [90, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                      {
                        name: '项目一部',
                        value: 4,
                        symbolSize: [70, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                      {
                        name: '项目二部',
                        value: 4,
                        symbolSize: [70, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                      {
                        name: '项目三部',
                        value: 4,
                        symbolSize: [70, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                    ],
                  },

                ],
              },
              {
                name: '道路桥梁安全',
                value: 6,

                children: [

                  {
                    name: '项目中心',
                    value: 4,
                    symbolSize: [70, 30],
                    symbol: 'rectangle',
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'inside',
                        },
                        borderWidth: 2,
                        borderColor: 'black',
                      },
                    },
                    children: [
                      {
                        name: '售前支持部',
                        value: 4,
                        symbolSize: [90, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                      {
                        name: '项目一部',
                        value: 4,
                        symbolSize: [70, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                      {
                        name: '项目二部',
                        value: 4,
                        symbolSize: [70, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                      {
                        name: '项目三部',
                        value: 4,
                        symbolSize: [70, 30],
                        symbol: 'rectangle',
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'inside',
                            },
                            borderWidth: 2,
                            borderColor: 'black',
                          },
                        },
                      },
                    ],
                  },

                ],
              },
            ],
          },
        ],
      },
    ],
  };
  const getOption = () => {
    return option;
  };
  return <ReactEcharts option={getOption()} style={props.style} />;
};
export default TreeCharts;
