import { ReconciliationModal } from '@/components';
import { ProFormSelect } from '@ant-design/pro-components';
import { ProFieldFCRenderProps } from '@ant-design/pro-provider';
import { useState } from 'react';

export interface IReconciliationFormItemProps extends Omit<
	ProFieldFCRenderProps,
	'value' | 'onChange'
> {
	value?: BusinessAPI.ReconciliationVO['reconciliationId'];
	onChange?: (value?: BusinessAPI.ReconciliationVO['reconciliationId']) => void;
}

export default function ReconciliationFormItem(
	props: IReconciliationFormItemProps,
) {
	const { value, onChange } = props;

	const [showReconciliationModal, setShowReconciliationModal] =
		useState<boolean>(false);
	const [reconciliationList, setReconciliationList] =
		useState<(BusinessAPI.ReconciliationVO | undefined)[]>();

	return (
		<>
			<ProFormSelect
				fieldProps={{
					open: false,
					onClear: () => {
						onChange?.(undefined);
					},
					onClick: () => {
						setShowReconciliationModal(true);
					},
					value: value,
					placeholder: '请选择对账记录',
					options: reconciliationList?.map(
						(reconciliationVO?: BusinessAPI.ReconciliationVO) => {
							return {
								value: reconciliationVO?.reconciliationId,
								label:
									reconciliationVO?.reconciliationSn ||
									reconciliationVO?.reconciliationId,
							};
						},
					),
				}}
			/>
			<ReconciliationModal
				title={'选择对账记录'}
				open={showReconciliationModal}
				onOk={() => setShowReconciliationModal(false)}
				onCancel={() => setShowReconciliationModal(false)}
				onFinish={async (reconciliationVOList) => {
					if (reconciliationVOList.length > 0) {
						const reconciliationVO = reconciliationVOList[0];
						onChange?.(reconciliationVO?.reconciliationId);
						setReconciliationList(reconciliationVOList);
						setShowReconciliationModal(false);
					}
				}}
				type={'radio'}
			/>
		</>
	);
}
