import {
	BizContainer,
	BizValueType,
	DealerSelect,
	DealerWarehouseList,
	ModeType,
} from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import { ProColumns, ProFormText } from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import React from 'react';

interface IDealerPaymentAccountListProps {
	ghost?: boolean;
	dealerVO?: BusinessAPI.DealerVO;
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}

export default function DealerPaymentAccountList(
	props: IDealerPaymentAccountListProps,
) {
	const {
		ghost = false,
		dealerVO,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;

	const intl = useIntl();
	const intlPrefix = 'dealerPaymentAccount';

	const columns: ProColumns<
		BusinessAPI.DealerPaymentAccountVO,
		BizValueType
	>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.dealerId' }),
			dataIndex: 'dealerVO',
			key: 'dealerId',
			valueType: 'dealer',
			hidden: !!dealerVO,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.companyName' }),
			dataIndex: 'companyName',
			key: 'companyName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.taxNumber' }),
			dataIndex: 'taxNumber',
			key: 'taxNumber',
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.companyAddress',
			}),
			dataIndex: 'companyAddress',
			key: 'companyAddress',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
			dataIndex: 'phone',
			key: 'phone',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.openingBank' }),
			dataIndex: 'openingBank',
			key: 'openingBank',
		},
	];

	const formContext = [
		<DealerSelect key={'dealerId'} />,
		<ProFormText
			key={'companyName'}
			name={'companyName'}
			label={intl.formatMessage({ id: intlPrefix + '.form.companyName.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.companyName.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.companyName.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'taxNumber'}
			name={'taxNumber'}
			label={intl.formatMessage({ id: intlPrefix + '.form.taxNumber.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.taxNumber.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.taxNumber.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'companyAddress'}
			name={'companyAddress'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.companyAddress.label',
			})}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.companyAddress.placeholder',
			})}
		/>,
		<ProFormText
			key={'phone'}
			name={'phone'}
			label={intl.formatMessage({ id: intlPrefix + '.form.phone.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.phone.placeholder',
			})}
		/>,
		<ProFormText
			key={'openingBank'}
			name={'openingBank'}
			label={intl.formatMessage({ id: intlPrefix + '.form.openingBank.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.openingBank.placeholder',
			})}
		/>,
		<ProFormText
			key={'bankAccount'}
			name={'bankAccount'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.bankAccount.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.bankAccount.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.bankAccount.required',
					}),
				},
			]}
		/>,
	];

	const detailColumns: ProDescriptionsItemProps<
		BusinessAPI.DealerPaymentAccountVO,
		BizValueType
	>[] = columns as ProDescriptionsItemProps<
		BusinessAPI.DealerPaymentAccountVO,
		BizValueType
	>[];

	const detailContext = (
		dealerPaymentAccountVO: BusinessAPI.DealerPaymentAccountVO,
		onValueChange: () => void,
	) => {
		return [
			{
				label: `仓库管理`,
				key: 'dealerWarehouse',
				children: (
					<DealerWarehouseList
						dealerVO={dealerVO}
						dealerPaymentAccountVO={dealerPaymentAccountVO}
						ghost={true}
						search={false}
						onValueChange={onValueChange}
					/>
				),
			},
		];
	};

	return (
		<BizContainer<
			typeof business.dealerPaymentAccount,
			BusinessAPI.DealerPaymentAccountVO,
			BusinessAPI.DealerPaymentAccountPageQry,
			BusinessAPI.DealerPaymentAccountCreateCmd,
			BusinessAPI.DealerPaymentAccountUpdateCmd
		>
			rowKey={'accountId'}
			permission={'operation-dealer-payment-account'}
			func={business.dealerPaymentAccount}
			method={'dealerPaymentAccount'}
			methodUpper={'DealerPaymentAccount'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						...(dealerVO && {
							dealerId: dealerVO?.dealerId,
						}),
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					...(dealerVO && {
						dealerId: dealerVO?.dealerId,
						dealerVO: dealerVO,
						canChangeDealer: !dealerVO,
					}),
					status: true,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
				formContext: detailContext,
				trigger,
			}}
		/>
	);
}
