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

// material-ui
import * as React from 'react';
import {
    DataGrid,
} from "@mui/x-data-grid";
import {
    Stack,
    Typography,
    Button,
    Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import * as DateUtils from "utils/DateUtils"
import * as StatusUtils from "./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 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: 'status',
            field: 'status',
            headerName: '狀態',
            flex: 1,
            renderCell: (params) => {
                return [StatusUtils.getStatus(params)]
            },
        },
        {
            field: 'actions',
            type: 'actions',
            headerName: '',
            width: 100,
            cellClassName: 'actions',
            renderCell: (params) => {
                return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
            },
        }
    ];

    const getWindowContent = () => {
        var content = [];
        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 />
            </>);
        }
        return content;
    }

    return (
        <>
            <div style={{ height: 400, width: '100%', padding: 4 }}>
                <DataGrid
                    checkboxSelection
                    disableRowSelectionOnClick
                    rows={rows}
                    columns={columns}
                    editMode="row"
                    rowSelectionModel={selectedRowItems}
                    initialState={{
                        pagination: {
                            paginationModel: { page: 0, pageSize: 5 },
                        },
                    }}
                    pageSizeOptions={[5, 10]}
                    autoHeight={true}
                    onRowSelectionModelChange={(newSelection) => {
                        setSelectedRowItems(newSelection);
                    }}
                    sx={{
                        boxShadow: 1,
                        border: 1,
                        borderColor: '#DDD',
                        '& .MuiDataGrid-cell': {
                            border: 1,
                            borderColor: "#EEE"
                        },
                        '& .MuiDataGrid-footerContainer':{
                            border: 1,
                            borderColor: "#EEE"
                        }
                    }}
                />
                <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</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)}>Close</Button>
                         <Button onClick={() => setIsPopUp(false)}>確認</Button>
                    </DialogActions>
                </Dialog>
            </div>
        </>
    );



}