system-copyright-react/src/components/invoice/order/InvoiceOrderSelectedList.tsx

import {
    Table, TableProps,
    // Tooltip
} from "antd";
import useMessage from "antd/es/message/useMessage";
import { useEffect, useState } from "react";
import { get } from "../../../util/AjaxUtils.ts";
import { IListPage } from "../../../interfaces/listpage/IListPage.ts";

import { getInvoiceRechargeList } from "../../../request/api.ts"

// type DetailDataType = {
//     productType: string;
//     quantity: number;
//     unitPrice: number;
//     notes: string;
//     productDescription: string;
// }

type DataType = {
    rechargeMoney: number;
    thirdParty: string;
    reconciliationTime: string;
    rechargeFinalTime: string;
    accountRechargeId: string;
}

interface ListProps {
    invoiceRechargeId: string;
}

export default function InvoiceInfoSelectedList(props: ListProps) {
    const [messageApi, messageContext] = useMessage();
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<DataType[]>([]);

    // const columns: TableProps<DataType>['columns'] = [
    //     {
    //         title: '订单号',
    //         dataIndex: 'orderNo',
    //         align: 'center',
    //         width: 250,
    //         fixed: 'left'
    //     },
    //     {
    //         title: '总金额',
    //         dataIndex: 'totalAmount',
    //         align: 'center',
    //         width: 100,
    //         fixed: 'left',
    //         render: (value) => {
    //             return (value / 100).toFixed(2)
    //         }
    //     },
    //     {
    //         title: '订单状态',
    //         dataIndex: 'orderStatus',
    //         align: 'center',
    //         width: 100,
    //         render: (value) => {
    //             if(value === 'COMPLETE') {
    //                 return '完成';
    //             }
    //             if(value === 'CHARGEBACK') {
    //                 return '已退款';
    //             }
    //         }
    //     },
    //     {
    //         title: '创建时间',
    //         dataIndex: 'gmtCreate',
    //         align: 'center',
    //         width: 180
    //     },
    //     {
    //         title: '产品类型',
    //         dataIndex: 'orderDetails.0.productType',
    //         align: 'center',
    //         width: 100,
    //         render: (_value, record) => {
    //             if(record.orderDetails[0].productType === 'PROJ') {
    //                 return '项目创建'
    //             }
    //             if(record.orderDetails[0].productType === 'AGENT') {
    //                 return '项目代理'
    //             }
    //             return record.orderDetails[0].productType
    //         }
    //     },
    //     {
    //         title: '数量',
    //         dataIndex: 'orderDetails.0.quantity',
    //         align: 'center',
    //         width: 100,
    //         render: (_value, record) => {
    //             return record.orderDetails[0].quantity
    //         }
    //     },
    //     {
    //         title: '单价',
    //         dataIndex: 'orderDetails.0.unitPrice',
    //         align: 'center',
    //         width: 100,
    //         render: (_value, record) => {
    //             return (record.orderDetails[0].unitPrice / 100).toFixed(2)
    //         }
    //     },
    //     {
    //         title: '订单备注',
    //         dataIndex: 'orderDetails.0.notes',
    //         align: 'center',
    //         width: 120,
    //         render: (_value, record) => {
    //             return record.orderDetails[0].notes
    //         }
    //     },
    //     {
    //         title: '描述',
    //         dataIndex: 'orderDetails.0.productDescription',
    //         align: 'center',
    //         width: 200,
    //         ellipsis: {
    //             showTitle: false,
    //         },
    //         render: (_value, record) => {
    //             return <Tooltip placement="top" title={record.orderDetails[0].productDescription}>{record.orderDetails[0].productDescription}</Tooltip>
    //         }
    //     },
    // ]

    // const columns = []
    const columns: TableProps<DataType>['columns'] = [

        {
            title: '充值金额',
            dataIndex: 'rechargeMoney',
            align: 'center',
            width: 150,
            key: 'accountRechargeId',

        },
        {
            title: '充值方式',
            dataIndex: 'thirdParty',
            align: 'center',
            width: 150,
            key: 'thirdParty',
        },
        {
            title: '充值时间',
            dataIndex: 'reconciliationTime',
            align: 'center',
            // width: 150,
            key: 'reconciliationTime',

        },
        {
            title: '充值到账时间',
            dataIndex: 'rechargeFinalTime',
            align: 'center',
            // width: 150,
            key:'rechargeFinalTime',
        },

    ]
    const getData = async () => {
        try {
            const res: any = await getInvoiceRechargeList(props.invoiceRechargeId, { page: page, rows: 20 })
            console.log('数据', res);
            setPage(res.page);
            setTotal(res.total);
            setDataArray(res.rows);
        } catch (error: any) {
            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }
    }
    useEffect(() => {
        getData()
        // get<IListPage<DataType>>({
        //     messageApi,
        //     url: `/api/order/listpage/complete/self?invoiceId=${props.invoiceId}`,
        //     config: {
        //         params: {
        //             page: page,
        //             rows: 20
        //         }
        //     },
        //     onSuccess({data}) {
        //         setPage(data.page);
        //         setTotal(data.total);
        //         setDataArray(data.rows);
        //     }
        // })
    }, [page]);

    return (
        <>
            {messageContext}
            <div className="invoice-list-container">
                
                <div className="mod-list">
                    <Table columns={columns} dataSource={dataArray}
                    pagination={
                        {
                            pageSize: 20,
                            total: total,
                            showSizeChanger: false,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            }

                        }
                    } scroll={{ y: 500 }} bordered key="accountRechargeId" rowKey="accountRechargeId"
                   />
                </div>
            </div>
        </>
    );
}