import rightPageApi from "@/https/apis/rightPageApi";
import {useEffect, useState} from "react";

const {Pie, G2} = window.charts;
const G = G2.getEngine('canvas');
const cfg = {
  appendPadding: 10,
  data: [],
  angleField: 'count',
  colorField: 'type',
  radius: 0.75,
  legend: false,
  label: {
    type: 'spider',
    labelHeight: 40,
    formatter: (data, mappingData) => {
      const group = new G.Group({});
      group.addShape({
        type: 'circle',
        attrs: {
          x: 0,
          y: 0,
          width: 40,
          height: 50,
          r: 5,
          fill: mappingData.color,
        },
      });
      group.addShape({
        type: 'text',
        attrs: {
          x: 10,
          y: 8,
          text: `${data.type}`,
          fill: mappingData.color,
        },
      });
      return group;
    },
  },
  interactions: [
    {
      type: 'element-selected',
    },
    {
      type: 'element-active',
    },
  ],
};

const DemoPie = ({onClick}) => {

  useEffect(() => {
    getSevenType()
  }, [])

  const [dataCount, setDataCount] = useState([])

  const clickPie = (plot) => {
    plot.on('plot:click', (...args) => {
      console.log(args[0]?.data?.data)
      onClick && onClick(args[0]?.data?.data)
    })
  }

  const getSevenType = () => {
    rightPageApi.sevenType().then(res => {
      if (res.code === 200) {
        console.log(res.data)
        setDataCount(res.data
          .map(it => (
            {...it, illegalType: it.type, count: parseInt(it.count, 10)}
          ))
        )
      }
    })
  }

  return <Pie {...cfg} data={dataCount} onReady={clickPie}/>;
};

export default DemoPie
