import {
	BizContainer,
	BizValueType,
	CompanyPaymentAccountSelect,
	DealerSelect,
	ModeType,
	ProFormUploadMaterial,
	ReconciliationInvoiceSelect,
	ReconciliationSelect,
} from '@/components';
import { business } from '@/services';
import { formatCurrency } from '@/utils/format';
import { useIntl } from '@@/exports';
import {
	ProColumns,
	ProFormDateTimePicker,
	ProFormDependency,
	ProFormMoney,
	ProFormSelect,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import React from 'react';

interface IReconciliationPaymentListProps {
	ghost?: boolean;
	reconciliationId?: BusinessAPI.ReconciliationPaymentVO['reconciliationId'];
	dealerId?: BusinessAPI.ReconciliationPaymentVO['dealerId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}

export default function ReconciliationPaymentList(
	props: IReconciliationPaymentListProps,
) {
	const {
		ghost = false,
		reconciliationId,
		dealerId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'reconciliationPayment';

	// 账户类别映射
	const accountCategoryMap: Record<string, { text: string }> = {
		COMPANY_ACCOUNT: {
			text: intl.formatMessage({ id: intlPrefix + '.accountCategory.company' }),
		},
		PRIVATE_ACCOUNT: {
			text: intl.formatMessage({ id: intlPrefix + '.accountCategory.private' }),
		},
	};

	// 账户类型映射
	const accountTypeMap: Record<string, { text: string; color: string }> = {
		BANK_CARD: {
			text: intl.formatMessage({ id: intlPrefix + '.accountType.bankCard' }),
			color: 'blue',
		},
		ALIPAY: {
			text: intl.formatMessage({ id: intlPrefix + '.accountType.alipay' }),
			color: 'cyan',
		},
		WECHAT: {
			text: intl.formatMessage({ id: intlPrefix + '.accountType.wechat' }),
			color: 'green',
		},
	};

	// 定义表格列
	const columns: ProColumns<
		BusinessAPI.ReconciliationPaymentVO,
		BizValueType
	>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.dealer' }),
			dataIndex: 'dealerVO',
			key: 'dealerId',
			valueType: 'dealer',
			hidden: !!dealerId,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.company' }),
			dataIndex: 'companyVO',
			key: 'companyId',
			valueType: 'company',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountType' }),
			dataIndex: 'accountType',
			key: 'accountType',
			valueType: 'select',
			valueEnum: accountTypeMap,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountCategory' }),
			dataIndex: 'accountCategory',
			key: 'accountCategory',
			valueType: 'select',
			valueEnum: accountCategoryMap,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountName' }),
			dataIndex: 'accountName',
			key: 'accountName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountNumber' }),
			dataIndex: 'accountNumber',
			key: 'accountNumber',
			ellipsis: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidAmount' }),
			dataIndex: 'paidAmount',
			key: 'paidAmount',
			valueType: 'money',
			search: false,
			renderText: (value: number) => formatCurrency(value),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidAt' }),
			dataIndex: 'paidAt',
			key: 'paidAt',
			valueType: 'dateTime',
			search: false,
		},
	];

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

	// 定义创建表单字段
	const formContext = [
		<DealerSelect name={'dealerId'} key={'dealerId'} />,
		<ProFormDependency key={'reconciliationId'} name={['dealerId']}>
			{({ dealerId }) => {
				return (
					<ReconciliationSelect
						name="reconciliationId"
						params={{
							dealerId: dealerId,
						}}
					/>
				);
			}}
		</ProFormDependency>,
		<ProFormDependency
			key={'reconciliationInvoiceId'}
			name={['reconciliationId']}
		>
			{({ reconciliationId }) => {
				return (
					<ReconciliationInvoiceSelect
						name="reconciliationInvoiceId"
						params={{
							reconciliationId: reconciliationId,
						}}
					/>
				);
			}}
		</ProFormDependency>,
		<ProFormSelect
			key="companyId"
			name="companyId"
			label={intl.formatMessage({
				id: intlPrefix + '.form.companyId.label',
			})}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.companyId.placeholder',
			})}
			required
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.companyId.required',
					}),
				},
			]}
			request={async (params) => {
				const { data } = await business.company.listCompany({
					companyListQry: {
						...params,
					},
				});
				return (
					data?.map((item) => ({
						label: item.fullName,
						value: item.companyId,
					})) || []
				);
			}}
		/>,
		<ProFormText
			key={'companyPaymentAccountVO'}
			name={'companyPaymentAccountVO'}
			hidden={true}
			transform={(companyPaymentAccountVO) => {
				return {
					companyPaymentAccountVO,
					...companyPaymentAccountVO,
				};
			}}
		/>,
		<ProFormDependency key={'accountId'} name={['companyId']}>
			{({ companyId }) => {
				return (
					<CompanyPaymentAccountSelect
						name="companyPaymentAccountId"
						params={{
							companyId: companyId,
						}}
						transform={(companyPaymentAccountId) => {
							return {
								companyPaymentAccountId: companyPaymentAccountId,
								accountId: companyPaymentAccountId,
							};
						}}
					/>
				);
			}}
		</ProFormDependency>,
		<ProFormMoney
			key="paidAmount"
			name="paidAmount"
			label={intl.formatMessage({
				id: intlPrefix + '.form.paidAmount.label',
			})}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.paidAmount.placeholder',
			})}
			required
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.paidAmount.required',
					}),
				},
			]}
			fieldProps={{
				precision: 2,
				min: 0.01,
			}}
		/>,
		<ProFormDateTimePicker
			key="paidAt"
			name="paidAt"
			label={intl.formatMessage({ id: intlPrefix + '.form.paidAt.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.paidAt.placeholder',
			})}
			required
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.paidAt.required',
					}),
				},
			]}
		/>,
		<ProFormUploadMaterial
			key={'paidCredentials'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.paidCredentials.label',
			})}
			name={'paidCredentials'}
			fieldProps={{
				maxCount: 9,
			}}
		/>,
	];

	return (
		<BizContainer<
			typeof business.reconciliationPayment,
			BusinessAPI.ReconciliationPaymentVO,
			BusinessAPI.ReconciliationPaymentPageQry
		>
			rowKey={'reconciliationPaymentId'}
			permission={'operation-reconciliation-payment'}
			func={business.reconciliationPayment}
			method={'reconciliationPayment'}
			methodUpper={'ReconciliationPayment'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{ ghost }}
			remark={{ mode: 'editor' }}
			status={false}
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					//@ts-ignore
					params: {
						...(reconciliationId && { reconciliationId }),
						...(dealerId && { dealerId }),
					},
				},
				columns,
				options: () => [],
			}}
			create={{
				formType: 'drawer',
				formContext,
				trigger,
			}}
			update={false}
			destroy={false}
			detail={{
				rowId: reconciliationId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
