import { MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProTable } from '@ant-design/pro-components';
import { useEffect, useState } from 'react';

export default function Ranking() {
  const [dataSource, setDataSource] = useState([]);

  const getHouseBillsCount = async () => {
    const res = await Apis.Statistics.HouseBillsCount.ProjectPaymentRanking();
    console.log(res);
    setDataSource(res?.data?.items || []);
  };

  useEffect(() => {
    // let data: any = [];
    // for (let i = 1; i < 21; i++) {
    //   data?.push({
    //     id: i,
    //     name: '杭州某某字可以这么多',
    //     receivable_amount: '1211.21',
    //     actual_receipt_amount: '1211.21',
    //     collection_amount: '12%',
    //   });
    // }

    getHouseBillsCount();
  }, []);
  return (
    <ProTable
      {...MyProTableProps.props}
      options={false}
      search={false}
      pagination={false}
      dataSource={dataSource}
      columns={[
        {
          title: '排名',
          render: (_, item: any, index) => {
            return index + 1;
          },
        },
        {
          title: '项目名称',
          dataIndex: 'project_name',
        },
        {
          title: '应收金额',
          dataIndex: 'receivable_amount',
          render: (_, item: any) => {
            return <div>¥{item?.payable_amount}元</div>;
          },
        },
        {
          title: '实收金额',
          dataIndex: 'actual_receipt_amount',
          render: (_, item: any) => {
            return <div>¥{item?.paid_amount}元</div>;
          },
        },
        {
          title: '收缴率',
          dataIndex: 'collection_amount',
          render: (_, item: any) => {
            return (
              <div style={{ color: '#2A7EFB' }}>{item?.collection_rate}%</div>
            );
          },
        },
      ]}
    />
  );
}
