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

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

export default function PaymentTaskFormItem(props: IPaymentTaskFormItemProps) {
	const { value, onChange } = props;

	const [showPaymentTaskModal, setShowPaymentTaskModal] =
		useState<boolean>(false);
	const [paymentTaskList, setPaymentTaskList] =
		useState<(BusinessAPI.PaymentTaskVO | undefined)[]>();

	return (
		<>
			<ProFormSelect
				fieldProps={{
					open: false,
					onClear: () => {
						onChange?.(undefined);
					},
					onClick: () => {
						setShowPaymentTaskModal(true);
					},
					value: value,
					placeholder: '请选择付款任务',
					options: paymentTaskList?.map(
						(paymentTaskVO?: BusinessAPI.PaymentTaskVO) => {
							return {
								value: paymentTaskVO?.paymentTaskId,
								label: paymentTaskVO?.taskName || paymentTaskVO?.paymentTaskSn,
							};
						},
					),
				}}
			/>
			<PaymentTaskModal
				title={'选择付款任务'}
				open={showPaymentTaskModal}
				onOk={() => setShowPaymentTaskModal(false)}
				onCancel={() => setShowPaymentTaskModal(false)}
				onFinish={async (paymentTaskVOList) => {
					if (paymentTaskVOList.length > 0) {
						const paymentTaskVO = paymentTaskVOList[0];
						onChange?.(paymentTaskVO?.paymentTaskId);
						setPaymentTaskList(paymentTaskVOList);
						setShowPaymentTaskModal(false);
					}
				}}
				type={'radio'}
			/>
		</>
	);
}
