chuhai-payment-frontend/src/pages/bill/query.tsx

import {Button, ButtonGroup, Modal, Notification, Popconfirm, Space, Toast} from "@douyinfe/semi-ui";
import {useState} from "react";
import {useRequest, useSetState} from "ahooks";
import {useTranslation} from "react-i18next";
import {saveAs} from "file-saver";

import {BillList} from "@/components/bill/list.tsx";
import SearchForm from "@/components/bill/search-form.tsx";
import BillDetail from "@/components/bill/detail.tsx";
import {billList, BillQueryParams, cancelConfirmBill, exportBillList, modifyBillStatus} from "@/service/api/bill.ts";
import {BillStatus, BizError} from "@/service/types.ts";
import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";
import {BillPaidModal} from "@/pages/bill/components/bill_paid_modal.tsx";
import {BillTypeConfirmModal} from "@/pages/bill/components/bill_type_confirm.tsx";
// import {AddBillModal} from "@/pages/bill/components/add_bill_modal.tsx";
import {BillTypeConfirmBatch} from "@/pages/bill/components/bill_type_confirm_batch.tsx";
import {AddBillModal} from "@/pages/bill/components/add_bill_modal.tsx";
import {ImportBillModal} from "@/pages/bill/components/import_bill_modal.tsx";
import {PermissionCheck} from "@/components/permission";


const DownloadButton = ({bill, text}: { bill: BillModel; text: string }) => {
	const {loading: downloading, downloadPDF} = useDownloadReceiptPDF()
	return (<Button
		onClick={() => downloadPDF(bill)} size={'small'} loading={downloading}>{text}</Button>)
}

// const ConfirmPaidBill =({bill,onRefresh}: { bill: BillModel;onRefresh:()=>void }) => {
//     return
// }

const BillQuery = () => {

	// const {createPDF,downloadPDF} = useDownloadReceiptPDF()
	const [state, setState] = useSetState<{
		updateBill?: BillModel;
		confirmBill?: BillModel;
		previewPDFUrl?: string;
		updateLoading?: boolean
		exporting?: boolean;
		confirmBillId: number;
	}>({confirmBillId: 0})
	const [showBill, setShowBill] = useState<BillModel>()
	const [queryParams, setBillQueryParams] = useState<BillQueryParams>({
		sort_field: 'id',
		sort_order: 'DESC'
	});
	const {data, loading, refresh} = useRequest(() => billList(queryParams), {
		refreshDeps: [queryParams],
		onSuccess: () => {
			document.documentElement.scrollTo({top: 0});
		},
		onError: (e) => {
			Notification.error({title: 'Error', content: e.message})
		}
	})
	const {t} = useTranslation()

	const onCancelBill = (bill: BillModel) => {
		modifyBillStatus(bill.id, 'CANCELLED').then(() => {
			Notification.success({title: 'Notice', content: t('bill.cancel_success')})
			refresh()
		}).catch((e: BizError) => {
			Toast.error({
				content: `${t('base.operate_fail')}:${e.message}`,
				duration: 3
			})
		})
	}

	const onCancelBillConfirm = (id: number) => {
		cancelConfirmBill(id).then(() => {
			Toast.success({
				content: `${t('base.operate_success')}`,
				duration: 3
			})
			refresh()
		}).catch((e: BizError) => {
			Toast.error({
				content: `${t('base.operate_fail')}:${e.message}`,
				duration: 3
			})
		})
	}

	// const showBillPDF = (bill: BillModel) => {
	// 	setState({
	// 		previewPDFUrl: createPDF(bill).output('bloburi').toString()
	// 	})
	// }
	const operation = (bill: BillModel) => {
		return (<div className={'table-operation-render'}>
			<PermissionCheck permission={'complete_button'}>
				{bill.status != BillStatus.PAID &&
                    <Button onClick={() => setState({updateBill: bill})} size={'small'} theme={'solid'}
                            type={'danger'}>{t('bill.paid')}</Button>
				}
			</PermissionCheck>

			{bill.status == BillStatus.PENDING && <>
                <Popconfirm
                    title={'Notice'} onConfirm={() => onCancelBill(bill)} position={'topRight'}
                    content={`${t('bill.cancel_confirm')}?`}
                >
                    <Button size={'small'} theme={'solid'} type={'primary'}>{t('bill.cancel')}</Button>
                </Popconfirm>
                <Button
                    onClick={() => setShowBill(bill)} size={'small'} theme={'solid'}
                    type={'primary'}>{t('base.qr-code')}</Button>
            </>}
			{
				bill.status == BillStatus.PAID && <>
					<DownloadButton bill={bill} text={t('bill.download_receipt')}/>
                    {/*<Button*/}
                    {/*    onClick={() => showBillPDF(bill)} size={'small'}>download pdf</Button>*/}

                    <PermissionCheck permission={'confirm_button'}>
						{
							bill.confirm_status == 'UNCONFIRMED'
								? <Button
								onClick={() => setState({confirmBill: bill})}
								size={'small'} theme={'solid'}
								type={'primary'}>{t('bill.confirm_bill_type')}</Button>
								: <Popconfirm
									title={'Warning'} onConfirm={() => onCancelBillConfirm(bill.id)} position={'topRight'}
									content={`${t('base.confirm_next_operation')}?`}
								>
								<Button size={'small'} theme={'solid'} type={'danger'}>{t('bill.btn_cancel_confirm')}</Button>
						</Popconfirm>
						}
                    </PermissionCheck>
                </>
			}
		</div>)
	}
	const onExportExcel = () => {
		// const downloadUrl = `${AppConfig.API_PREFIX || '/api'}/bills/export?${stringify(queryParams)}`
		//
		//
		// saveAs(downloadUrl, 'bill-result-excel.xlsx')
		setState({
			exporting: true
		})
		exportBillList(queryParams).then(ret => {
			console.log(ret)
			const blob = new Blob([ret], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
			saveAs(blob, 'bill-result-excel.xlsx')
		}).finally(() => {
			setState({
				exporting: false
			})
		})
	}


	const [selectKeys, setSelectedKeys] = useState<number[]>([])


	const onBillConfirm = (reload?: boolean) => {
		setState({confirmBill: undefined})
		if (reload) refresh()
	}

	return (<div>
		<SearchForm showApply loading={loading} onSearch={setBillQueryParams}/>
		<BillList
			type={'query'} loading={loading} source={data}
			operationRender={operation} operationRenderWidth={180}
			beforeTotalAmount={<Space>
				<BillTypeConfirmBatch data={data} selectKeys={selectKeys} onConfirm={refresh}/>
				<AddBillModal onConfirm={refresh}/>
				<ButtonGroup style={{marginRight: 20}} theme={'solid'}>
					{/*<Button onClick={onImportExcel}>{t('bill.import_excel')}</Button>*/}
					<ImportBillModal onConfirm={refresh}/>
					<Button loading={state.exporting} onClick={onExportExcel}>{t('bill.export_excel')}</Button>
				</ButtonGroup>
			</Space>}

			onRowSelection={(keys) => setSelectedKeys(keys as number[])}
			rowSelectionDisabled={(r) => (r.status != BillStatus.PAID || r.confirm_status == 'CONFIRMED')}
			onPageChange={(page_number) => {
				setBillQueryParams({
					...queryParams,
					page_number
				})
			}}
			onPageSizeChange={(page_size) => {
				setBillQueryParams({
					...queryParams,
					page_size
				})
			}}
		/>
		<Modal
			title="Bill Detail"
			visible={!!showBill}
			width={680}
			onCancel={() => setShowBill(undefined)} //>=1.16.0
			closeOnEsc={true}
			footer={null}
			closeIcon={<span></span>}
		>
			{showBill && <BillDetail bill={showBill} onCancel={() => setShowBill(undefined)}/>}
		</Modal>
		{/* preview and download pdf */}
		{/*<Modal*/}
		{/*	title={'PDF Preview'} width={800} visible={!!state.previewPDFUrl}*/}
		{/*	maskClosable={false} onCancel={() => setState({previewPDFUrl: undefined})}*/}
		{/*	onOk={()=>{*/}
		{/*		if(state.previewPDFUrl) {*/}
		{/*			saveAs(state.previewPDFUrl, 'pdf.pdf')*/}
		{/*		}*/}
		{/*	}}*/}
		{/*>*/}
		{/*	{state.previewPDFUrl && <div className={'bill-pdf-previewer'}>*/}
        {/*        <iframe allowFullScreen={false} src={state.previewPDFUrl + '#view=FitH,top&toolbar=0'}*/}
        {/*                className={'bill-pdf-container'}/>*/}
        {/*    </div>}*/}
		{/*</Modal>*/}
		<BillPaidModal
			open={!!state.updateBill}
			onCancel={() => setState({updateBill: undefined})}
			bill={state.updateBill!}
			onConfirm={() => {
				setState({updateBill: undefined})
				refresh()
			}}
		/>
		{state.confirmBill && <BillTypeConfirmModal onClose={onBillConfirm} bill={state.confirmBill}/>}
	</div>)
}
export default BillQuery