import {
	BizContainer,
	BizValueType,
	DealerPaymentAccountList,
	DealerPurchaseSetting,
	DealerRebateCustomerList,
	DealerStallList,
	DeliveryTemplate,
	ModeType,
} from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import {
	ProColumns,
	ProFormRadio,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { Space, Tooltip } from 'antd';
import React from 'react';

interface IDealerListProps {
	ghost?: boolean;
	dealerId?: BusinessAPI.DealerVO['dealerId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}
export default function DealerList(props: IDealerListProps) {
	const {
		ghost = false,
		dealerId,
		search = true,
		mode = 'drag',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'dealer';

	const columns: ProColumns<BusinessAPI.DealerVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.shortName' }),
			dataIndex: 'shortName',
			key: 'shortName',
			render: (_, dealerVO) => {
				return (
					<DealerList
						ghost={true}
						mode={'detail'}
						dealerId={dealerVO.dealerId}
						trigger={() => (
							<Space>
								<a>{dealerVO.shortName}</a>
							</Space>
						)}
					/>
				);
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.dealerType' }),
			dataIndex: 'dealerType',
			key: 'dealerType',
			valueType: 'select',
			valueEnum: {
				MARKET: intl.formatMessage({
					id: intlPrefix + '.column.dealerType.enum.market',
				}),
				SUPERMARKET: intl.formatMessage({
					id: intlPrefix + '.column.dealerType.enum.supermarket',
				}),
			},
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.dealerPaymentAccountVOList',
			}),
			dataIndex: 'dealerPaymentAccountVOList',
			key: 'dealerPaymentAccountVOList',
			renderText: (
				dealerPaymentAccountVOList: BusinessAPI.DealerPaymentAccountVO[],
			) => <span>{dealerPaymentAccountVOList?.length || 0} 个账户</span>,
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.receivable' }),
			dataIndex: 'receivable',
			key: 'receivable',
			valueType: 'money',
			search: false,
		},
		// 新增字段展示
		{
			title: (
				<span>{intl.formatMessage({ id: intlPrefix + '.column.share' })}</span>
			),
			dataIndex: 'shareInfo',
			key: 'shareInfo',
			search: false,
			render: (_, record) => (
				<span>
					{record.enableShare ? (
						<>
							<CheckCircleOutlined style={{ color: '#52c41a' }} />
							{record.shareRatio ? ` ${record.shareRatio}%` : ''}
							{record.shareAdjusted ? '可调整' : '不可调整'}
						</>
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
				</span>
			),
		},
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.freightCostFlag.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({ id: intlPrefix + '.column.freightCostFlag' })}
					</span>
				</Tooltip>
			),
			dataIndex: 'freightCostFlag',
			key: 'freightCostFlag',
			valueType: 'switch',
			search: false,
			render: (_, record) => (
				<span>
					{record.freightCostFlag ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
				</span>
			),
		},
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.strawMatCostFlag.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({
							id: intlPrefix + '.column.strawMatCostFlag',
						})}
					</span>
				</Tooltip>
			),
			dataIndex: 'strawMatCostFlag',
			key: 'strawMatCostFlag',
			valueType: 'switch',
			search: false,
			render: (_, record) => (
				<span>
					{record.strawMatCostFlag ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
				</span>
			),
		},
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.includePackingFlag.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({
							id: intlPrefix + '.column.includePackingFlag',
						})}
					</span>
				</Tooltip>
			),
			dataIndex: 'includePackingFlag',
			key: 'includePackingFlag',
			valueType: 'switch',
			search: false,
			render: (_, record) => (
				<span>
					{record.includePackingFlag ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
				</span>
			),
		},
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.includeFreightFlag.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({
							id: intlPrefix + '.column.includeFreightFlag',
						})}
					</span>
				</Tooltip>
			),
			dataIndex: 'includeFreightFlag',
			key: 'includeFreightFlag',
			valueType: 'switch',
			search: false,
			render: (_, record) => (
				<span>
					{record.includeFreightFlag ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
				</span>
			),
		},
		// 新增字段展示 - 计提税金
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.enableAccrualTax.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({
							id: intlPrefix + '.column.enableAccrualTax',
						})}
					</span>
				</Tooltip>
			),
			dataIndex: 'accrualTaxRatio',
			key: 'accrualTaxRatio',
			search: false,
			render: (_, record) => (
				<span>
					{record.enableAccrualTax ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
					{record.enableAccrualTax && record.accrualTaxRatio
						? ` ${record.accrualTaxRatio}%`
						: ''}
				</span>
			),
		},
		// 新增字段展示 - 公司返点
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.enableCompanyRebate.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({
							id: intlPrefix + '.column.enableCompanyRebate',
						})}
					</span>
				</Tooltip>
			),
			dataIndex: 'companyRebateRatio',
			key: 'enableCompanyRebate',
			search: false,
			render: (_, record) => (
				<span>
					{record.enableCompanyRebate ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
					{record.enableCompanyRebate && record.companyRebateRatio
						? ` ${record.companyRebateRatio}%`
						: ''}
				</span>
			),
		},
		// 新增字段展示 - 公司返点
		{
			title: (
				<Tooltip
					title={intl.formatMessage({
						id: intlPrefix + '.column.enableLoss.tooltip',
					})}
				>
					<span>
						{intl.formatMessage({
							id: intlPrefix + '.column.enableLoss',
						})}
					</span>
				</Tooltip>
			),
			dataIndex: 'enableLoss',
			key: 'enableLoss',
			search: false,
			render: (_, record) => (
				<span>
					{record.enableLoss ? (
						<CheckCircleOutlined style={{ color: '#52c41a' }} />
					) : (
						<CloseCircleOutlined style={{ color: '#ff4d4f' }} />
					)}
					{record.enableLoss && record.lossAmount
						? ` ${record.lossAmount}元`
						: ''}
				</span>
			),
		},
	];

	const formContext = [
		<ProFormText
			key={'shortName'}
			name={'shortName'}
			label={intl.formatMessage({ id: intlPrefix + '.form.shortName.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.shortName.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.shortName.required',
					}),
				},
			]}
		/>,
		<ProFormRadio.Group
			key={'dealerType'}
			name="dealerType"
			label={intl.formatMessage({
				id: intlPrefix + '.form.dealerType.label',
			})}
			valueEnum={{
				MARKET: intl.formatMessage({
					id: intlPrefix + '.form.dealerType.enum.market',
				}),
				SUPERMARKET: intl.formatMessage({
					id: intlPrefix + '.form.dealerType.enum.supermarket',
				}),
			}}
		/>,
	];

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

	const detailContext = (
		dealerVO: BusinessAPI.DealerVO,
		onValueChange: () => void,
	) => {
		return [
			{
				label: `结算账户`,
				key: 'dealerPaymentAccountList',
				children: (
					<DealerPaymentAccountList
						dealerVO={dealerVO}
						ghost={true}
						search={false}
						onValueChange={onValueChange}
					/>
				),
			},
			{
				label: `返点客户`,
				key: 'dealerRebateCustomerList',
				children: (
					<DealerRebateCustomerList
						dealerVO={dealerVO}
						ghost={true}
						search={false}
						onValueChange={onValueChange}
					/>
				),
			},
			{
				label: `档口管理`,
				key: 'dealerStallList',
				display: (record: BusinessAPI.DealerVO) =>
					record.dealerType === 'MARKET',
				children: (
					<DealerStallList
						dealerVO={dealerVO}
						ghost={true}
						search={false}
						onValueChange={onValueChange}
					/>
				),
			},
		];
	};

	return (
		<BizContainer<
			typeof business.dealer,
			BusinessAPI.DealerVO,
			BusinessAPI.DealerPageQry,
			BusinessAPI.DealerCreateCmd,
			BusinessAPI.DealerUpdateCmd
		>
			rowKey={'dealerId'}
			permission={'operation-dealer'}
			func={business.dealer}
			method={'dealer'}
			methodUpper={'Dealer'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			drag={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
				},
				columns,
				options: (record, actionRef) => {
					return [
						<DeliveryTemplate
							insertPosition={'after:view'}
							key={'deliveryTemplate'}
							dealerVO={record}
							onFinish={() => {
								actionRef.current?.reload();
							}}
						/>,
						<DealerPurchaseSetting
							insertPosition={'after:view'}
							key={'dealerPurchaseSetting'}
							dealerVO={record}
							onFinish={() => {
								actionRef.current?.reload();
							}}
						/>,
					];
				},
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					status: true,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				rowId: dealerId,
				formType: 'drawer',
				columns: detailColumns,
				formContext: detailContext,
				trigger,
			}}
		/>
	);
}
