//部门桑基图
import ReactEcharts from 'echarts-for-react';

const DepartmentSankey: React.FC<{
  style?: React.CSSProperties;
  sankeyData: {nodes:any[],links:any[]};
}> = (props) => {
  let mydata = [
    {
      name: '市级城运',
      depth: 0,
    },
    {
      name: '市级部门',
      depth: 1,
    },
    {
      name: '区市县部门',
      depth: 1,
    },
    {
      name: '市人民政府',
      depth: 2,
    },
    {
      name: '成都市政协',
      depth: 2,
    },
    {
      name: '成都市政协1XXX',
      depth: 3,
    },
    {
      name: '成都市政协2XXX',
      depth: 2,
    },
  ];
  let mylinks = [
    {
      source: '市级城运',
      target: '市级部门',
      value: 42,
    },
    {
      source: '市级城运',
      target: '区市县部门',
      value: 22,
    },
    {
      source: '市级部门',
      target: '成都市政协',
      value: 32,
    },
    {
      source: '市级部门',
      target: '市人民政府',
      value: 10,
    },
    {
      source: '市级部门',
      target: '成都市政协2XXX',
      value: 4,
    },
    {
      source: '成都市政协',
      target: '成都市政协1XXX',
      value: 28,
    },
  ];

  const getOption = () => {
    return {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        formatter: (params: any) => {
          return '-' + params?.data?.value;
        },
      },
      series: {
        type: 'sankey',
        data: props?.sankeyData?.nodes,
        links: props?.sankeyData?.links,
        emphasis: {
          focus: 'adjacency',
        },
        levels: [
          {
            depth: 0,
            itemStyle: {
              color: '#FFB1AA',
            },
          },
          {
            depth: 1,
            itemStyle: {
              color: '#ACD8FF',
            },
          },
          {
            depth: 2,
            itemStyle: {
              color: '#BCE8B1',
            },
          },
          {
            depth: 3,
            itemStyle: {
              color: '#E7C9F0',
            },
          },
        ],
        lineStyle: {
          color: 'source',
          curveness: 0.5,
        },
        label: {
          color: 'white',
          fontFamily: 'Arial',
          fontSize: 20,
        },
      },
    };
  };

  return <ReactEcharts option={getOption()} style={props.style} />;
};

export default DepartmentSankey;
