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

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

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

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

	const columns: ProColumns<BusinessAPI.DealerWarehouseVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.dealerId' }),
			dataIndex: 'dealerVO',
			key: 'dealerId',
			valueType: 'dealer',
			hidden: !!dealerVO,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountId' }),
			dataIndex: ['dealerPaymentAccountVO', 'companyName'],
			key: 'accountId',
			hidden: !!dealerPaymentAccountVO,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.address' }),
			dataIndex: 'address',
			key: 'address',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.contactPerson' }),
			dataIndex: 'contactPerson',
			key: 'contactPerson',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.contactPhone' }),
			dataIndex: 'contactPhone',
			key: 'contactPhone',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.receiverName' }),
			dataIndex: 'receiverName',
			key: 'receiverName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.receiverPhone' }),
			dataIndex: 'receiverPhone',
			key: 'receiverPhone',
		},
	];

	const formContext = [
		<DealerSelect key={'dealerId'} />,
		<ProFormSelect
			key={'accountId'}
			name={'accountId'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.accountId.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.accountId.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.accountId.required',
					}),
				},
			]}
			request={async (params) => {
				const { data } =
					await business.dealerPaymentAccount.listDealerPaymentAccount({
						dealerPaymentAccountListQry: {
							dealerId: dealerVO?.dealerId,
							...params,
						},
					});

				return data?.map((item) => ({
					label: item.companyName,
					value: item.accountId,
				})) || [];
			}}
		/>,
		<ProFormText
			key={'name'}
			name={'name'}
			label={intl.formatMessage({ id: intlPrefix + '.form.name.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.name.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'address'}
			name={'address'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.address.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.address.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.address.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'contactPerson'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.contactPerson.label',
			})}
			name={'contactPerson'}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.contactPerson.placeholder',
			})}
		/>,
		<ProFormText
			key={'contactPhone'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.contactPhone.label',
			})}
			name={'contactPhone'}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.contactPhone.placeholder',
			})}
		/>,
		<ProFormText
			key={'receiverName'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.receiverName.label',
			})}
			name={'receiverName'}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.receiverName.placeholder',
			})}
		/>,
		<ProFormText
			key={'receiverPhone'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.receiverPhone.label',
			})}
			name={'receiverPhone'}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.receiverPhone.placeholder',
			})}
		/>,
	];

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

	return (
		<BizContainer<
			typeof business.dealerWarehouse,
			BusinessAPI.DealerWarehouseVO,
			BusinessAPI.DealerWarehousePageQry,
			BusinessAPI.DealerWarehouseCreateCmd,
			BusinessAPI.DealerWarehouseUpdateCmd
		>
			rowKey={'warehouseId'}
			permission={'operation-dealer-warehouse'}
			func={business.dealerWarehouse}
			method={'dealerWarehouse'}
			methodUpper={'DealerWarehouse'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						...(dealerPaymentAccountVO && {
							accountId: dealerPaymentAccountVO?.accountId,
						}),
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					...(dealerVO && {
						dealerId: dealerVO?.dealerId,
						dealerVO: dealerVO,
						canChangeDealer: !dealerVO,
					}),
					...(dealerPaymentAccountVO && {
						accountId: dealerPaymentAccountVO?.accountId,
					}),
					status: true,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
