import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { Col, Row, Statistic } from 'antd';
import { useEffect, useState } from 'react';

export default function OverviewFinancialData() {
  const [getOverviewStatistics, setOverviewStatistics] = useState<any>({});
  const getHouseBillsCount = async () => {
    const res = await Apis.Statistics.HouseBillsCount.OverviewStatistics();
    setOverviewStatistics(res?.data);
  };

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

  return (
    <div className="overview-financial-data">
      <ProCard
        title="财务数据概览"
        subTitle={`更新时间：${getOverviewStatistics?.updated_at || ''}`}
      >
        <Row gutter={16}>
          <Col span={6}>
            <Statistic
              title="总应收金额"
              value={getOverviewStatistics?.total_payable_amount || 0}
              suffix="元"
              prefix="¥"
              precision={2}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="总实收金额"
              suffix="元"
              prefix="¥"
              value={getOverviewStatistics?.total_paid_amount || 0}
              precision={2}
            />
            {/* <div className="yesterday_value_number">昨日+10.19元</div> */}
          </Col>
          <Col span={6}>
            <Statistic
              title="整体收缴率"
              suffix="%"
              value={getOverviewStatistics?.collection_rate || 0}
              precision={2}
            />
            {/* <div className="yesterday_value_number">昨日+10%</div> */}
          </Col>
          <Col span={6}>
            <Statistic
              title="总未收金额"
              suffix="元"
              prefix="¥"
              value={getOverviewStatistics?.total_unpaid_amount || 0}
              precision={2}
            />
          </Col>
        </Row>
      </ProCard>
    </div>
  );
}
