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";

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

type DataType = {
    orderId: string;
    orderNo: string;
    totalAmount: number;
    orderDetails: any;
    orderStatus: string;
    gmtCreate: string;
}

interface ListProps {
    invoiceId: 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 = []
    useEffect(() => {
        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="dataTable" rowKey="orderId"/>
                </div>
            </div>
        </>
    );
}