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

const {Bar} = window.charts;

const DemoBar = ({requestDate,onClick}) => {



  const [list,setList] = useState([])
  const pieRef = useRef();

  useEffect(()=>{
    getCollegeCount()
    clickPie(pieRef?.current?.getChart())
  },[requestDate])

  const getCollegeCount = () => {
    rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res=>{
      if(res.code == 200){
        setList(res.data.map(it => {
          return {collegeName:it.collegeName.substr(0,10), sales: parseInt(it.count,10),collegeNo:it.collegeNo}
        }))
      }
    })
  }

  const clickPie = (plot) => {
    plot.off("plot:click");
    plot.on('plot:click', (...args) => {
      onClick && onClick(args[0]?.data?.data,requestDate.format('YYYY-MM'))
    })
  }

  const data = list
  const config = {
    data,
    xField: 'sales',
    yField: 'collegeName',
    color: '#3B90FF',
    xAxis:{
      label:{
        style:{
          fill:'#F2F2F2'
        }
      }
    },
    barStyle: {
      fill: 'l(180) 0:#3B90FF 1:rgba(47, 253, 239, 0)',
    },
    yAxis:{
      label:{
        style:{
          fill:'#F2F2F2'
        }
      }
    },
    meta: {
      collegeName: {
        alias: '类别',
      },
      sales: {
        alias: '违规总数',
      },
      no:{
        alias:'编号'
      }
    },
    minBarWidth: 25,
    maxBarWidth: 25,
  };
  return <Bar ref={pieRef} {...config}/>;
};

export default DemoBar

