PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

// material-ui
import * as React from 'react';
import {
    Stack,
    Typography,
    Button,
    Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import { FiDataGrid } from "components/FiDataGrid";
import * as DateUtils from "utils/DateUtils"
import * as FormatUtils from "utils/FormatUtils"
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import { useNavigate } from "react-router-dom";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {
    const [selectedRowItems, setSelectedRowItems] = React.useState([]);
    const [isPopUp, setIsPopUp] = React.useState(false);
    //const [amount, setAmount] = React.useState(0);
    const navigate = useNavigate()

    const handleDetailClick = (params) => () => {
        navigate('/publicNotice/' + params.id);
    };

    const columns = [
        {
            id: 'appNo',
            field: 'appNo',
            headerName: '申請編號',
            flex: 1,
        },
        {
            id: 'created',
            field: 'created',
            headerName: '提交日期',
            flex: 1,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        // {
        //     id: 'contactPerson',
        //     field: 'contactPerson',
        //     headerName: '聯絡人',
        //     flex: 2,
        //     renderCell: (params) => {
        //         let phone = JSON.parse(params.row.contactTelNo);
        //         let faxNo = JSON.parse(params.row.contactFaxNo);

        //         let contact = "";
        //         if (phone) {
        //             contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
        //         }

        //         if (faxNo && faxNo?.faxNumber) {
        //             if (contact != "")
        //                 contact = contact + ", "
        //             contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
        //         }

        //         return (<>
        //             {params?.value}<br />
        //             {contact}
        //         </>);
        //     }
        // },
        {
            id: 'remarks',
            field: 'remarks',
            headerName: '我的備註',
            flex: 3,

        },
        {
            id: 'fee',
            field: 'fee',
            headerName: '價錢',
            flex: 1,
            renderCell: (params) => {
                return FormatUtils.currencyFormat(params.row.fee)
            },
        },
        {
            id: 'status',
            field: 'status',
            headerName: '狀態',
            flex: 1,
            renderCell: (params) => {
                return [StatusUtils.getStatus(params)]
            },
        },
        {
            field: 'actions',
            type: 'actions',
            headerName: '',
            width: 120,
            cellClassName: 'actions',
            renderCell: (params) => {
                return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
            },
        }
    ];

    const getWindowContent = () => {
        var content = [];
        let totalAmount = 0;
        const datas = rows?.filter((row) =>
            selectedRowItems.includes(row.id)
        );
        for (var i = 0; i < datas?.length; i++) {
            content.push(<>
                <Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
                備註: {datas[i].remarks}
                <br /><br />
            </>);

            totalAmount += datas[i].fee;
        }
        content.push(<Typography variant="h5">
            總計金額: HK$ {FormatUtils.currencyFormat(totalAmount)} <br /><br />
        </Typography>);
        //setAmount(totalAmount);
        return content;
    }

    function handleRowDoubleClick(params) {
        navigate('/publicNotice/' + params.id);
    }

    function doPayment() {
        setIsPopUp(false);
        let totalAmount = 0;
        let appIdList = [];
        const datas = rows?.filter((row) =>
            selectedRowItems.includes(row.id)
        );
        for (var i = 0; i < datas?.length; i++) {
            totalAmount += datas[i].fee;
            appIdList.push(datas[i].id);
        }
        navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } });
    }

    return (
        <>
            <div style={{ height: 400, width: '100%', padding: 4 }}>
                <FiDataGrid
                    checkboxSelection
                    disableRowSelectionOnClick
                    rows={rows}
                    columns={columns}
                    initialState={{
                        pagination: {
                            paginationModel: { page: 0, pageSize: 5 },
                        },
                    }}
                    onRowSelectionModelChange={(newSelection) => {
                        setSelectedRowItems(newSelection);
                    }}
                    onRowDoubleClick={handleRowDoubleClick}
                    getRowHeight={() => 'auto'}
                />
                <br/>
                <Button variant="contained" onClick={() => { setIsPopUp(true) }}><Typography variant="h5">付款</Typography></Button>
            </div>

            <div>
                <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
                    <DialogTitle></DialogTitle>
                    <Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
                    <DialogContent style={{ display: 'flex', }}>
                        <Stack direction="column" justifyContent="space-between">
                            {getWindowContent()}
                        </Stack>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
                        <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </>
    );



}