import { Apis } from '@/gen/Apis';
import { Line } from '@ant-design/plots';
import { ProCard } from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
export default function DemoLine() {
  const [houseBillsCount, setHouseBillsCount] = useState<any>({});
  // const data = [
  //   { 月份: '1月', 金额: 322 },
  //   { 月份: '2月', 金额: 411 },
  //   { 月份: '3月', 金额: 322.5 },
  //   { 月份: '4月', 金额: 544 },
  //   { 月份: '5月', 金额: 411.9 },
  //   { 月份: '6月', 金额: 612 },
  // ];
  const config = {
    data: [],
    xField: 'month_label',
    yField: '金额',
    point: {
      shapeField: 'square',
      sizeField: 4,
    },
    interaction: {
      tooltip: {
        marker: false,
      },
    },
    style: {
      lineWidth: 2,
    },
  };

  const getHouseBillsCount = async () => {
    const res = await Apis.Statistics.HouseBillsCount.PaidAmountTrend({
      start_date: new Date('2025-06-01'),
      end_date: new Date('2025-12-31'),
    });
    setHouseBillsCount({ ...config, data: res?.data?.items || [] });
  };

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

  return (
    <ProCard
      title="实收金额趋势"
      headerBordered
      style={{ height: 437, width: '100%', overflow: 'hidden' }}
    >
      <Line {...houseBillsCount} />
    </ProCard>
  );
}
