import { useMemo } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { customerColumns } from './columns';
import { getCustomerList } from './server';
import type { CustomerListQuery, CustomerVO } from './types';

const CustomerList = () => {
  const columns = useMemo(() => customerColumns, []);

  return (
    <div className="customer-list-page">
      <ProTable<CustomerVO, CustomerListQuery>
        rowKey="id"
        columns={columns}
        cardProps={{ className: 'table-card' }}
        search={{ labelWidth: 'auto', defaultCollapsed: false }}
        scroll={{ x: 1510 }}
        options={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          hideOnSinglePage: false,
          showTotal: (total) => `共 ${total} 条`,
        }}
        request={async (params) => {
          const result = await getCustomerList({
            page: params.current,
            size: params.pageSize,
            ownerId: params.ownerId,
          });

          return {
            data: result.records ?? [],
            total: result.total ?? 0,
            success: true,
          };
        }}
      />
    </div>
  );
};

export default CustomerList;