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

interface IOrderShipListProps {
	ghost?: boolean;
	orderShipId?: BusinessAPI.OrderShipVO['orderShipId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
	params?: BusinessAPI.OrderShipPageQry;
}

export default function OrderShipList(props: IOrderShipListProps) {
	const {
		ghost = false,
		orderShipId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
		params,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'orderShip';

	const [activeKey, setActiveKey] = useState<string>('ALL');

	const columns: ProColumns<BusinessAPI.OrderShipVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.order' }),
			dataIndex: 'orderVO',
			key: 'orderId',
			valueType: 'order',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.dealer' }),
			dataIndex: 'dealerVO',
			key: 'dealerId',
			valueType: 'dealer',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.company' }),
			dataIndex: 'companyVO',
			key: 'companyId',
			valueType: 'company',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.orderSn' }),
			dataIndex: 'orderSn',
			key: 'orderSn',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.shippingAddress' }),
			dataIndex: 'shippingAddress',
			key: 'shippingAddress',
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.receivingAddress',
			}),
			dataIndex: 'receivingAddress',
			key: 'receivingAddress',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.shippingDate' }),
			dataIndex: 'shippingDate',
			key: 'shippingDate',
			valueType: 'date',
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.estimatedArrivalDate',
			}),
			dataIndex: 'estimatedArrivalDate',
			key: 'estimatedArrivalDate',
			valueType: 'date',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.watermelonGrade' }),
			dataIndex: 'watermelonGrade',
			key: 'watermelonGrade',
			search: false,
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.receivableAmount',
			}),
			dataIndex: 'receivableAmount',
			key: 'receivableAmount',
			search: false,
			valueType: 'money',
			render: (_, record) => (
				<span className="text-blue-600 font-medium">
					￥{formatCurrency(record.receivableAmount)}
				</span>
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.adjustedAmount' }),
			dataIndex: 'adjustedAmount',
			key: 'adjustedAmount',
			search: false,
			valueType: 'money',
			render: (_, record) => (
				<span
					className={
						record.adjustedAmount >= 0 ? 'text-green-600' : 'text-red-600'
					}
				>
					{record.adjustedAmount >= 0 ? (
						<ArrowUpOutlined />
					) : (
						<ArrowDownOutlined />
					)}
					<span className="ml-1">
						￥{formatCurrency(Math.abs(record.adjustedAmount))}
					</span>
				</span>
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.type' }),
			dataIndex: 'type',
			key: 'type',
			valueType: 'select',
			valueEnum: {
				PURCHASE_SHIP: intl.formatMessage({
					id: intlPrefix + '.column.type.enum.purchaseShip',
				}),
				TRANSFER_SHIP: intl.formatMessage({
					id: intlPrefix + '.column.type.enum.transferShip',
				}),
				CHANGE_SHIP: intl.formatMessage({
					id: intlPrefix + '.column.type.enum.changeShip',
				}),
				RETURN_SHIP: intl.formatMessage({
					id: intlPrefix + '.column.type.enum.returnShip',
				}),
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.state' }),
			dataIndex: 'state',
			key: 'state',
			valueType: 'select',
			search: false,
			valueEnum: {
				DRAFT: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.draft',
				}),
				WAIT_SHIPMENT: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.waitShipment',
				}),
				WAIT_PAYMENT: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.waitPayment',
				}),
				PARTIAL_PAYMENT: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.partialPayment',
				}),
				FULL_PAYMENT: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.fullPayment',
				}),
				REJECT_FINISH: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.rejectFinish',
				}),
				FINISH: intl.formatMessage({
					id: intlPrefix + '.column.state.enum.finish',
				}),
			},
		},
	];

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

	return (
		<BizContainer<
			typeof business.orderShip,
			BusinessAPI.OrderShipVO,
			BusinessAPI.OrderShipPageQry,
			BusinessAPI.OrderShipCreateCmd,
			BusinessAPI.OrderShipUpdateCmd
		>
			rowKey={'orderShipId'}
			permission={'operation-ship-order'}
			func={business.orderShip}
			method={'orderShip'}
			methodUpper={'OrderShip'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			status={false}
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						...(activeKey !== 'ALL' && {
							state: activeKey! as BusinessAPI.OrderShipVO['state'],
						}),
						...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: 'WAIT_SHIPMENT',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.waitShipment',
									}),
								},
								{
									key: 'WAIT_PAYMENT',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.waitPayment',
									}),
								},
								{
									key: 'PARTIAL_PAYMENT',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.partialPayment',
									}),
								},
								{
									key: 'FULL_PAYMENT',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.fullPayment',
									}),
								},
								{
									key: 'REJECT_FINISH',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.rejectFinish',
									}),
								},
								{
									key: 'FINISH',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.finish',
									}),
								},
							],
							onChange: (key) => {
								setActiveKey(key as string);
							},
						},
					},
				},
				columns,
				convertValue: (orderShip: BusinessAPI.OrderShipVO) => {
					return {
						...orderShip,
						dealerVO: {
							dealerId: orderShip.dealerId,
							shortName: orderShip.dealerName,
						},
						companyVO: {
							companyId: orderShip.companyId,
							shortName: orderShip.companyName,
						},
					};
				},
			}}
			create={false}
			update={false}
			destroy={false}
			detail={{
				rowId: orderShipId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
