// material-ui
import * as React from 'react';
import {
Stack,
Typography,
Button,
Autocomplete,
TextField,
Grid,
Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery,
} from '@mui/material';
import { FiDataGrid } from "components/FiDataGrid";
import * as HttpUtils from "utils/HttpUtils"
import * as UrlUtils from "utils/ApiPathConst"
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";
import {
isORGLoggedIn,
} from "utils/Utils";
import { ThemeProvider, useTheme } from "@emotion/react";
import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| EVENT TABLE ||============================== //
export default function SubmittedTab({ rows }) {
const [rowList, setRowList] = React.useState([]);
const [selectedRowItems, setSelectedRowItems] = React.useState([]);
const [isPopUp, setIsPopUp] = React.useState(false);
const [checkCareOf, setCheckCareOf] = React.useState(false);
const [getCareOfList, setCareOfList] = React.useState([]);
const [careOfComboList, setCareOfComboList] = React.useState([{}]);
const [selectedCareOf, setSelectedCareOf] = React.useState(null);
const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
const [expiryDateErr, setExpiryDateErr] = React.useState(false);
const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
const theme = useTheme();
const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
const intl = useIntl();
//const [amount, setAmount] = React.useState(0);
const navigate = useNavigate()
React.useEffect(() => {
// const careOfList = rows.map(obj => obj.careOf);
// console.log(rows)
// console.log(careOfList)
setRowList(rows)
const formattedData = Array.from(new Set(rows.filter(obj => obj.careOf !== null).map(obj => obj.careOf))).map((careOf, index) => ({
key: index,
id: rows.find(obj => obj.careOf === careOf).id,
label: careOf
}));
// console.log(formattedData)
setCareOfList(formattedData)
}, []);
React.useEffect(() => {
// console.log(getCareOfList)
setCareOfComboList(getCareOfList)
}, [getCareOfList]);
React.useEffect(() => {
if (selectedCareOf != null) {
const afteSelectedList = [];
console.log(rows)
console.log(selectedCareOf)
rows.forEach((element) => {
if (element.careOf === selectedCareOf.label) {
afteSelectedList.push(element)
}
});
// afteSelectedList.push(rows.find(obj => obj.careOf ===(selectedCareOf.label)));
console.log(afteSelectedList)
setRowList(afteSelectedList)
} else {
setRowList(rows)
}
}, [selectedCareOf]);
const handleDetailClick = (params) => () => {
navigate('/publicNotice/' + params.id);
};
const handlePaymentBtn = () => {
let appIdList = [];
const datas = rows?.filter((row) =>
selectedRowItems.includes(row.id)
);
// console.log(datas)
for (var i = 0; i < datas?.length; i++) {
appIdList.push(datas[i].id);
}
if(appIdList.length<1){
setExpiryDateErrText(intl.formatMessage({ id: 'MSG.plzSelectApp' }));
setExpiryDateErr(true);
return;
}
HttpUtils.post({
url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,
params: {
ids: appIdList
},
onSuccess: (responData) => {
if (responData.success == true) {
// setIsPopUp(true);
handlePaymentCheck(appIdList)
return;
}
let str = "";
responData.msg.forEach((item) => {
str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n";
});
setExpiryDateErrText(str.split('\n').map(str => <>{str}
));
setExpiryDateErr(true);
}
});
};
const handlePaymentCheck = (appIdList) => {
HttpUtils.post({
url: UrlUtils.PAYMENT_CHECK,
params: {
appIds: appIdList
},
onSuccess: (responseData) => {
const latestData = {};
responseData.forEach(item => {
const { appId, timeDiff } = item;
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
latestData[appId] = item;
}
});
const latestDataObjects = Object.values(latestData);
const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
const filteredAppIds = filteredData.map(item => item.appId);
const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
if (readyToPayment){
setIsPopUp(true);
return;
}else{
const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
setPaymentHoldedErrText(resultString);
// setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
setPaymentHoldedErr(true);
}
}
});
};
const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: intl.formatMessage({ id: 'applicationId' }),
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
},
{
id: 'created',
field: 'created',
headerName: intl.formatMessage({ id: 'submitDate' }),
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'remarks',
field: 'remarks',
headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount2_1' }) : intl.formatMessage({ id: 'myRemarks' }),
width: isMdOrLg ? 'auto' : 400,
flex: isMdOrLg ? 3 : undefined,
renderCell: (params) => (
isORGLoggedIn() ?
: {params.row.careOf}
: {params.row.remarks}
:
{params.row.remarks}
)
},
{
id: 'fee',
field: 'fee',
headerName: intl.formatMessage({ id: 'price' }),
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
renderCell: (params) => {
return FormatUtils.currencyFormat(params.row.fee)
},
},
{
id: 'status',
field: 'status',
headerName: intl.formatMessage({ id: 'status' }),
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
renderCell: (params) => {
return [StatusUtils.getStatusIntl(params, intl)]
},
},
{
field: 'actions',
type: 'actions',
headerName: '',
width: 150,
cellClassName: 'actions',
renderCell: (params) => {
return ;
},
}
];
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(<>
: {datas[i].appNo}
({DateUtils.datetimeStr(datas[i].created)})
: {datas[i].remarks}
);
totalAmount += datas[i].fee;
}
content.push(
(HK$): {FormatUtils.currencyFormat(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)
);
// console.log(datas)
for (var i = 0; i < datas?.length; i++) {
totalAmount += datas[i].fee;
appIdList.push(datas[i].id);
}
const firstCareOf = datas[0].careOf;
const areAllCareOfEqual = datas.every(obj => obj.careOf === firstCareOf);
if (appIdList.length > 0 && areAllCareOfEqual) {
navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } });
} else {
setCheckCareOf(true);
// console.log("The selected applications should be from the same Care of.")
}
}
function afterWarningPayment() {
let totalAmount = 0;
let appIdList = [];
const datas = rows?.filter((row) =>
selectedRowItems.includes(row.id)
);
// console.log(datas)
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 (
<>
{isORGLoggedIn() ?
:
{
// console.log(newValue)
setSelectedCareOf(newValue);
}}
renderInput={(params) => }
/>
: null
}
{
setSelectedRowItems(newSelection);
}}
onRowDoubleClick={handleRowDoubleClick}
getRowHeight={() => 'auto'}
/>
);
}