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

const { Column } = window.charts;

const DemoColumn = ({onClick}) => {

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

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

  const getSevenCount = () => {
    rightPageApi.sevenCount().then(res=>{
      if(res.code == 200){
        setDataCount(res.data.map(it=>{
          return {type:it.week.substr(5,5),sales:parseInt(it.count,10)}
        }))
      }
    })
  }

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

  const data = dataCount;
  const config = {
    data,
    xField: 'type',
    yField: 'sales',
    color: '#4AE7E0',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#F2F2F2',
      },
    },
    xAxis: {
      name:'type',
      label: {
        autoHide: true,
        autoRotate: false,
        style: {
          fill: '#F2F2F2'
        }
      },
    },
    barStyle: {
      fill: 'red',
    },
    yAxis:{
      label:{
        style:{
          fill:'#F2F2F2'
        }
      }
    },
    meta: {
      type: {
        alias: '类别',
      },
      sales: {
        alias: '违规数',
      },
    },
  };
  return <Column {...config} onReady={clickColumn}/>;
};

export default DemoColumn
