import { BizContainer, BizValueType, ModeType } from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import {
	ProColumns,
	ProFormDependency,
	ProFormRadio,
	ProFormSwitch,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { message } from 'antd';
import React from 'react';

interface ICompanyPaymentAccountListProps {
	ghost?: boolean;
	companyVO?: BusinessAPI.CompanyVO;
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}

export default function CompanyPaymentAccountList(
	props: ICompanyPaymentAccountListProps,
) {
	const {
		ghost = false,
		companyVO,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;

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

	const columns: ProColumns<
		BusinessAPI.CompanyPaymentAccountVO,
		BizValueType
	>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountCategory' }),
			dataIndex: 'accountCategory',
			key: 'accountCategory',
			valueType: 'select',
			valueEnum: {
				COMPANY_ACCOUNT: intl.formatMessage({
					id: intlPrefix + '.column.accountCategory.enum.companyAccount',
				}),
				PRIVATE_ACCOUNT: intl.formatMessage({
					id: intlPrefix + '.column.accountCategory.enum.privateAccount',
				}),
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountType' }),
			dataIndex: 'accountType',
			key: 'accountType',
			valueType: 'select',
			valueEnum: {
				BANK_CARD: intl.formatMessage({
					id: intlPrefix + '.column.accountType.enum.bankCard',
				}),
				ALIPAY: intl.formatMessage({
					id: intlPrefix + '.column.accountType.enum.alipay',
				}),
				WECHAT: intl.formatMessage({
					id: intlPrefix + '.column.accountType.enum.wechat',
				}),
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.accountInfo' }),
			dataIndex: 'accountInfo',
			key: 'accountInfo',
			search: false,
			render: (_, record) => {
				const {
					accountCategory,
					accountType,
					accountName,
					accountNumber,
					bankName,
					branchName,
				} = record;

				// 对公账户
				if (accountCategory === 'COMPANY_ACCOUNT') {
					if (accountType === 'BANK_CARD') {
						return (
							<div>
								<div>
									<span style={{ fontWeight: 'bold' }}>{accountName}</span>
								</div>
								<div style={{ color: '#666', fontSize: '12px' }}>
									{bankName} {branchName}
								</div>
								<div style={{ color: '#333' }}>{accountNumber}</div>
							</div>
						);
					}
				}
				// 对私账户
				else if (accountCategory === 'PRIVATE_ACCOUNT') {
					if (accountType === 'BANK_CARD') {
						return (
							<div>
								<div>
									<span style={{ fontWeight: 'bold' }}>{accountName}</span>
								</div>
								<div style={{ color: '#666', fontSize: '12px' }}>
									{bankName}
								</div>
								<div style={{ color: '#333' }}>{accountNumber}</div>
							</div>
						);
					} else if (accountType === 'ALIPAY') {
						return (
							<div>
								<div>
									<span style={{ fontWeight: 'bold' }}>{accountName}</span>
								</div>
								<div style={{ color: '#666', fontSize: '12px' }}>支付宝</div>
								<div style={{ color: '#333' }}>{accountNumber}</div>
							</div>
						);
					} else if (accountType === 'WECHAT') {
						return (
							<div>
								<div>
									<span style={{ fontWeight: 'bold' }}>{accountName}</span>
								</div>
								<div style={{ color: '#666', fontSize: '12px' }}>微信</div>
								<div style={{ color: '#333' }}>{accountNumber}</div>
							</div>
						);
					}
				}

				// 默认显示
				return (
					<div>
						<div>
							<span style={{ fontWeight: 'bold' }}>{accountName}</span>
						</div>
						<div style={{ color: '#333' }}>{accountNumber}</div>
					</div>
				);
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.isPrimary' }),
			dataIndex: 'isPrimary',
			key: 'isPrimary',
			renderText: (isPrimary: string) => (isPrimary ? '是' : '否'),
		},
	];

	const formContext = [
		<ProFormText name={'companyId'} key={'companyId'} hidden={true} />,
		<ProFormDependency name={['accountCategory']} key={'accountCategory'}>
			{(_, form) => {
				return (
					<ProFormRadio.Group
						name={'accountCategory'}
						key={'accountCategory'}
						label={intl.formatMessage({
							id: intlPrefix + '.form.accountCategory.label',
						})}
						required={true}
						rules={[
							{
								required: true,
								message: intl.formatMessage({
									id: intlPrefix + '.form.accountCategory.required',
								}),
							},
						]}
						fieldProps={{
							onChange: (e) => {
								const value = e.target.value;
								// 提醒用户
								message.info(
									value === 'COMPANY_ACCOUNT'
										? intl.formatMessage({
												id: intlPrefix + '.message.switchToCompany',
											})
										: intl.formatMessage({
												id: intlPrefix + '.message.switchToPrivate',
											}),
								);

								// 重置相关字段
								setTimeout(() => {
									form.setFieldsValue({
										accountType: 'BANK_CARD',
										accountName: undefined,
										accountNumber: undefined,
										bankName: undefined,
										branchName: undefined,
										publicAccountType: undefined,
									});
								}, 100);
							},
						}}
						valueEnum={{
							COMPANY_ACCOUNT: intl.formatMessage({
								id: intlPrefix + '.form.accountCategory.enum.companyAccount',
							}),
							PRIVATE_ACCOUNT: intl.formatMessage({
								id: intlPrefix + '.form.accountCategory.enum.privateAccount',
							}),
						}}
					/>
				);
			}}
		</ProFormDependency>,
		<ProFormDependency key="accountType" name={['accountCategory']}>
			{({ accountCategory }, form) => {
				return (
					<ProFormRadio.Group
						name={'accountType'}
						key={'accountType'}
						label={intl.formatMessage({
							id: intlPrefix + '.form.accountType.label',
						})}
						required={true}
						rules={[
							{
								required: true,
								message: intl.formatMessage({
									id: intlPrefix + '.form.accountType.required',
								}),
							},
						]}
						fieldProps={{
							onChange: (e) => {
								const value = e.target.value;
								// 重置相关字段
								if (value && form) {
									form.setFieldsValue({
										accountName: undefined,
										accountNumber: undefined,
										bankName: undefined,
										branchName: undefined,
										publicAccountType: undefined,
									});
								}
							},
						}}
						valueEnum={
							// 对公账户只能是银行卡，对私账户可以是银行卡、支付宝或微信
							accountCategory === 'COMPANY_ACCOUNT'
								? {
										BANK_CARD: intl.formatMessage({
											id: intlPrefix + '.form.accountType.enum.bankCard',
										}),
									}
								: {
										BANK_CARD: intl.formatMessage({
											id: intlPrefix + '.form.accountType.enum.bankCard',
										}),
										ALIPAY: intl.formatMessage({
											id: intlPrefix + '.form.accountType.enum.alipay',
										}),
										WECHAT: intl.formatMessage({
											id: intlPrefix + '.form.accountType.enum.wechat',
										}),
									}
						}
					/>
				);
			}}
		</ProFormDependency>,
		<ProFormDependency
			key="accountFields"
			name={['accountCategory', 'accountType']}
		>
			{({ accountCategory, accountType }) => {
				const isCompanyAccount = accountCategory === 'COMPANY_ACCOUNT';
				const isPrivateAccount = accountCategory === 'PRIVATE_ACCOUNT';
				const isBankCard = accountType === 'BANK_CARD';
				const isAlipay = accountType === 'ALIPAY';
				const isWechat = accountType === 'WECHAT';

				return (
					<>
						{/* 账户名称 - 所有类型都需要 */}
						<ProFormText
							key={'accountName'}
							name={'accountName'}
							label={
								isCompanyAccount
									? intl.formatMessage({
											id: intlPrefix + '.form.companyName.label',
										})
									: intl.formatMessage({
											id: intlPrefix + '.form.accountName.label',
										})
							}
							required={true}
							placeholder={
								isCompanyAccount
									? intl.formatMessage({
											id: intlPrefix + '.form.companyName.placeholder',
										})
									: intl.formatMessage({
											id: intlPrefix + '.form.accountName.placeholder',
										})
							}
							rules={[
								{
									required: true,
									message: intl.formatMessage({
										id: intlPrefix + '.form.accountName.required',
									}),
								},
							]}
							tooltip={
								isPrivateAccount
									? intl.formatMessage({
											id: intlPrefix + '.form.accountName.tooltip',
										})
									: undefined
							}
						/>
						{/* 账户号码 - 所有类型都需要 */}
						<ProFormText
							key={'accountNumber'}
							name={'accountNumber'}
							label={
								isAlipay
									? intl.formatMessage({
											id: intlPrefix + '.form.alipayAccount.label',
										})
									: isWechat
										? intl.formatMessage({
												id: intlPrefix + '.form.wechatAccount.label',
											})
										: intl.formatMessage({
												id: intlPrefix + '.form.accountNumber.label',
											})
							}
							required={true}
							placeholder={
								isAlipay
									? intl.formatMessage({
											id: intlPrefix + '.form.alipayAccount.placeholder',
										})
									: isWechat
										? intl.formatMessage({
												id: intlPrefix + '.form.wechatAccount.placeholder',
											})
										: intl.formatMessage({
												id: intlPrefix + '.form.accountNumber.placeholder',
											})
							}
							rules={[
								{
									required: true,
									message: intl.formatMessage({
										id: intlPrefix + '.form.accountNumber.required',
									}),
								},
							]}
							tooltip={
								isAlipay
									? intl.formatMessage({
											id: intlPrefix + '.form.alipayAccount.tooltip',
										})
									: isWechat
										? intl.formatMessage({
												id: intlPrefix + '.form.wechatAccount.tooltip',
											})
										: undefined
							}
						/>
						{(isCompanyAccount && isBankCard) ||
						(isPrivateAccount && isBankCard) ? (
							<>
								<ProFormText
									key={'bankName'}
									name={'bankName'}
									label={intl.formatMessage({
										id: intlPrefix + '.form.bankName.label',
									})}
									required={true}
									placeholder={intl.formatMessage({
										id: intlPrefix + '.form.bankName.placeholder',
									})}
									rules={[
										{
											required: true,
											message: intl.formatMessage({
												id: intlPrefix + '.form.bankName.required',
											}),
										},
									]}
								/>
								{isCompanyAccount && (
									<ProFormText
										key={'branchName'}
										name={'branchName'}
										label={intl.formatMessage({
											id: intlPrefix + '.form.branchName.label',
										})}
										required={true}
										placeholder={intl.formatMessage({
											id: intlPrefix + '.form.branchName.placeholder',
										})}
										rules={[
											{
												required: true,
												message: intl.formatMessage({
													id: intlPrefix + '.form.branchName.required',
												}),
											},
										]}
									/>
								)}
							</>
						) : null}
						{isCompanyAccount && isBankCard && (
							<ProFormRadio.Group
								name={'publicAccountType'}
								key={'publicAccountType'}
								label={intl.formatMessage({
									id: intlPrefix + '.form.publicAccountType.label',
								})}
								required={true}
								rules={[
									{
										required: true,
										message: intl.formatMessage({
											id: intlPrefix + '.form.publicAccountType.required',
										}),
									},
								]}
								valueEnum={{
									BASIC_ACCOUNT: intl.formatMessage({
										id:
											intlPrefix + '.form.publicAccountType.enum.basicAccount',
									}),
									GENERAL_ACCOUNT: intl.formatMessage({
										id:
											intlPrefix +
											'.form.publicAccountType.enum.generalAccount',
									}),
									SPECIAL_ACCOUNT: intl.formatMessage({
										id:
											intlPrefix +
											'.form.publicAccountType.enum.specialAccount',
									}),
									TEMPORARY_ACCOUNT: intl.formatMessage({
										id:
											intlPrefix +
											'.form.publicAccountType.enum.temporaryAccount',
									}),
								}}
							/>
						)}
					</>
				);
			}}
		</ProFormDependency>,
		<ProFormSwitch
			key={'isPrimary'}
			name={'isPrimary'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.isPrimary.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.isPrimary.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.isPrimary.required',
					}),
				},
			]}
			checkedChildren={intl.formatMessage({
				id: intlPrefix + '.form.isPrimary.enum.yes',
			})}
			unCheckedChildren={intl.formatMessage({
				id: intlPrefix + '.form.isPrimary.enum.no',
			})}
		/>,
	];

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

	return (
		<BizContainer<
			typeof business.companyPaymentAccount,
			BusinessAPI.CompanyPaymentAccountVO,
			BusinessAPI.CompanyPaymentAccountPageQry,
			BusinessAPI.CompanyPaymentAccountCreateCmd,
			BusinessAPI.CompanyPaymentAccountUpdateCmd
		>
			rowKey={'accountId'}
			permission={'operation-company-payment-account'}
			func={business.companyPaymentAccount}
			method={'companyPaymentAccount'}
			methodUpper={'CompanyPaymentAccount'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						...(companyVO && {
							companyId: companyVO?.companyId,
						}),
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					companyId: companyVO?.companyId,
					status: true,
					accountCategory: 'COMPANY_ACCOUNT',
					accountType: 'BANK_CARD',
					isPrimary: true,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
