import { Apis } from '@/gen/Apis';
import { Column } from '@ant-design/plots';
import { ProCard } from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
export default function OverviewClient() {
  const [houseBillsCount, setHouseBillsCount] = useState<any>({});
  const config = {
    data: [],
    xField: '月份',
    yField: '金额',
    colorField: 'name',
    group: true,
    style: {
      // 矩形四个方向的内边距
      inset: 5,
      // 矩形单个方向的内边距
      // insetLeft:5,
      // insetRight:20,
      // insetBottom:10
      // insetTop:10
    },
  };
  const getProjectDataByMonth = async () => {
    const res = await Apis.Statistics.HouseBillsCount.ProjectDataByMonth();
    setHouseBillsCount({ ...config, data: res?.data || [] });
  };

  useEffect(() => {
    getProjectDataByMonth();
  }, []);

  return (
    <ProCard
      title="收费项目数据"
      headerBordered
      style={{ height: 436, width: '100%', overflow: 'hidden' }}
    >
      <Column {...houseBillsCount} />
    </ProCard>
  );
}
