import { BizContainer, BizValueType, ModeType } from '@/components';
import { business } from '@/services';
import { formatCurrency } from '@/utils/format';
import { useIntl } from '@@/exports';
import { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { Space } from 'antd';
import React, { useRef, useState } from 'react';

interface IPaymentRecordListProps {
	ghost?: boolean;
	paymentRecordId?: BusinessAPI.PaymentRecordVO['paymentRecordId'];
	paymentTaskVO?: BusinessAPI.PaymentTaskVO;
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
	params?: BusinessAPI.PaymentRecordPageQry;
}

export default function PaymentRecordList(props: IPaymentRecordListProps) {
	const {
		ghost = false,
		paymentRecordId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
		paymentTaskVO,
		params,
	} = props;

	const { targetType } = params || {
		targetType: 'SUPPLIER',
	};

	const intl = useIntl();
	const intlPrefix = 'paymentRecord';
	const actionRef = useRef<ActionType>();

	const [activeKey, setActiveKey] = useState<
		BusinessAPI.PaymentRecordPageQry['paidState'] | 'ALL'
	>('ALL');
	// const [totalCount, setTotalCount] = useState(0);
	// const [draftCount, setDraftCount] = useState(0);
	// const [paidCount, setPaidCount] = useState(0);

	/** 状态文本映射 */
	const stateMap: Record<string, { text: string; color: string }> = {
		DRAFT: {
			text: intl.formatMessage({ id: intlPrefix + '.state.draft' }),
			color: 'orange',
		},
		PAID: {
			text: intl.formatMessage({ id: intlPrefix + '.state.paid' }),
			color: 'green',
		},
	};

	/** 付款对象类型映射 */
	const targetTypeMap: Record<string, { text: string }> = {
		SUPPLIER: {
			text: intl.formatMessage({ id: intlPrefix + '.targetType.supplier' }),
		},
		COST: {
			text: intl.formatMessage({ id: intlPrefix + '.targetType.cost' }),
		},
	};

	/** 付款对象类型映射 */
	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.PaymentRecordVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paymentRecordSn' }),
			dataIndex: 'paymentRecordSn',
			key: 'paymentRecordSn',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paymentTask' }),
			dataIndex: 'paymentTaskVO',
			key: 'paymentTask',
			valueType: 'paymentTask',
			hidden: targetType === 'ORDER_COST',
			search: targetType === 'SUPPLIER',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.supplier' }),
			dataIndex: 'supplierVO',
			key: 'supplier',
			valueType: 'supplier',
			hidden: targetType === 'ORDER_COST',
			search: targetType === 'SUPPLIER',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.orderCost' }),
			dataIndex: 'orderCostVO',
			key: 'orderCost',
			valueType: 'orderCost',
			hidden: targetType === 'SUPPLIER',
			search: targetType === 'ORDER_COST',
		},
		{
			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,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidState' }),
			dataIndex: 'paidState',
			key: 'paidState',
			valueType: 'select',
			search: false,
			valueEnum: {
				false: { text: stateMap.DRAFT.text, status: 'Warning' },
				true: { text: stateMap.PAID.text, status: 'Success' },
			},
			render: (_, record) => {
				const stateInfo = record.paidState ? stateMap.PAID : stateMap.DRAFT;
				return <span style={{ color: stateInfo.color }}>{stateInfo.text}</span>;
			},
		},
	];

	const detailColumns: ProDescriptionsItemProps<
		BusinessAPI.PaymentRecordVO,
		BizValueType
	>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paymentRecordSn' }),
			dataIndex: 'paymentRecordSn',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.targetType' }),
			dataIndex: 'targetType',
			valueEnum: targetTypeMap,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountType' }),
			dataIndex: 'accountType',
			valueEnum: accountTypeMap,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountCategory' }),
			dataIndex: 'accountCategory',
			valueType: 'select',
			valueEnum: accountCategoryMap,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.bankName' }),
			dataIndex: 'bankName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.branchName' }),
			dataIndex: 'branchName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountName' }),
			dataIndex: 'accountName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountNumber' }),
			dataIndex: 'accountNumber',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidAmount' }),
			dataIndex: 'paidAmount',
			render: (_, record) => formatCurrency(record.paidAmount),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidAt' }),
			dataIndex: 'paidAt',
			valueType: 'dateTime',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidState' }),
			dataIndex: 'paidState',
			valueType: 'select',
			valueEnum: {
				false: { text: stateMap.DRAFT.text },
				true: { text: stateMap.PAID.text },
			},
			render: (_, record) => {
				const stateInfo = record.paidState ? stateMap.PAID : stateMap.DRAFT;
				return (
					<Space>
						<span
							style={{
								display: 'inline-block',
								width: 8,
								height: 8,
								borderRadius: '50%',
								backgroundColor: stateInfo.color,
							}}
						/>
						<span>{stateInfo.text}</span>
					</Space>
				);
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.paidCredentials' }),
			dataIndex: 'paidCredentials',
			valueType: 'image',
		},
	];

	return (
		<BizContainer<
			typeof business.paymentRecord,
			BusinessAPI.PaymentRecordVO,
			BusinessAPI.PaymentRecordPageQry,
			BusinessAPI.PaymentRecordCreateCmd,
			BusinessAPI.PaymentRecordUpdateCmd
		>
			rowKey={'paymentRecordId'}
			permission={'operation-payment-record'}
			func={business.paymentRecord}
			method={'paymentRecord'}
			methodUpper={'PaymentRecord'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
				fieldProps: {
					ghost,
				},
			}}
			remark={{
				mode: 'editor',
			}}
			page={{
				fieldProps: {
					actionRef: actionRef,
					bordered: true,
					...(!ghost &&
						{
							// tableExtraRender: () => (
							// 	<StatisticCard.Group className={'statistics'}>
							// 		<StatisticCard
							// 			statistic={{
							// 				title: intl.formatMessage({
							// 					id: intlPrefix + '.statistics.total',
							// 				}),
							// 				value: totalCount,
							// 			}}
							// 		/>
							// 		<StatisticCard.Operation>=</StatisticCard.Operation>
							// 		<StatisticCard
							// 			statistic={{
							// 				title: intl.formatMessage({
							// 					id: intlPrefix + '.statistics.draft',
							// 				}),
							// 				value: draftCount,
							// 			}}
							// 			style={{ color: stateMap.DRAFT.color }}
							// 		/>
							// 		<StatisticCard.Operation>+</StatisticCard.Operation>
							// 		<StatisticCard
							// 			statistic={{
							// 				title: intl.formatMessage({
							// 					id: intlPrefix + '.statistics.paid',
							// 				}),
							// 				value: paidCount,
							// 			}}
							// 			style={{ color: stateMap.PAID.color }}
							// 		/>
							// 	</StatisticCard.Group>
							// ),
						}),
					ghost,
					//@ts-ignore
					search,
					params: {
						...(activeKey !== 'ALL' && {
							paidState: activeKey,
						}),
						...(paymentTaskVO && {
							paymentTaskId: paymentTaskVO.paymentTaskId,
						}),
						...params,
					},
					toolbar: {
						menu: {
							type: 'tab',
							activeKey: activeKey,
							items: [
								{
									key: 'ALL',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.all',
									}),
								},
								{
									key: 'DRAFT',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.draft',
									}),
								},
								{
									key: 'PAID',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.paid',
									}),
								},
							],
							onChange: (key) => {
								setActiveKey(key as any);
							},
						},
					},
				},
				columns,
				options: () => {
					return [];
				},
			}}
			create={false}
			update={false}
			destroy={false}
			detail={{
				rowId: paymentRecordId,
				formType: 'drawer',
				columns: detailColumns,
				formContextMode: 'flat',
				trigger,
			}}
		/>
	);
}
