import { BizContainer, BizValueType, ModeType } from '@/components';
import { business } from '@/services';
import { formatCurrency } from '@/utils/format';
import { useIntl } from '@@/exports';
import { ProColumns } 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<number, { label: string; color: string }> = {
		1: {
			label: intl.formatMessage({
				id: intlPrefix + '.accountCategory.corporate',
			}),
			color: 'processing',
		},
		2: {
			label: intl.formatMessage({
				id: intlPrefix + '.accountCategory.private',
			}),
			color: 'warning',
		},
	};

	// 账户类型映射
	const accountTypeMap: Record<number, { label: string; color: string }> = {
		1: {
			label: intl.formatMessage({
				id: intlPrefix + '.accountType.bankCard',
			}),
			color: 'default',
		},
		2: {
			label: intl.formatMessage({
				id: intlPrefix + '.accountType.alipay',
			}),
			color: 'blue',
		},
		3: {
			label: 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.accountCategory' }),
			dataIndex: 'accountCategory',
			key: 'accountCategory',
			valueType: 'select',
			valueEnum: {
				1: {
					text: accountCategoryMap[1].label,
					status: accountCategoryMap[1].color as any,
				},
				2: {
					text: accountCategoryMap[2].label,
					status: accountCategoryMap[2].color as any,
				},
			},
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountType' }),
			dataIndex: 'accountType',
			key: 'accountType',
			valueType: 'select',
			valueEnum: {
				1: {
					text: accountTypeMap[1].label,
					status: accountTypeMap[1].color as any,
				},
				2: {
					text: accountTypeMap[2].label,
					status: accountTypeMap[2].color as any,
				},
				3: {
					text: accountTypeMap[3].label,
					status: accountTypeMap[3].color as any,
				},
			},
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.bankName' }),
			dataIndex: 'bankName',
			key: 'bankName',
			ellipsis: true,
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.branchName' }),
			dataIndex: 'branchName',
			key: 'branchName',
			ellipsis: true,
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountName' }),
			dataIndex: 'accountName',
			key: 'accountName',
			ellipsis: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountNumber' }),
			dataIndex: 'accountNumber',
			key: 'accountNumber',
			ellipsis: true,
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.returnAmount' }),
			dataIndex: 'returnAmount',
			key: 'returnAmount',
			valueType: 'money',
			search: false,
			render: (_, record) => (
				<span className="text-green-600 font-medium">
					￥{formatCurrency(record.returnAmount)}
				</span>
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.returnAt' }),
			dataIndex: 'returnAt',
			key: 'returnAt',
			valueType: 'dateTime',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.remark' }),
			dataIndex: 'remark',
			key: 'remark',
			valueType: 'remark',
			ellipsis: true,
			search: false,
		},
	];

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

	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={false}
			update={false}
			destroy={false}
			detail={{
				rowId: reconciliationId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
