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

interface IPurchaseOrderListProps {
	ghost?: boolean;
	orderId?: BusinessAPI.PurchaseOrderVO['orderId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}

export default function PurchaseOrderList(props: IPurchaseOrderListProps) {
	const {
		ghost = false,
		orderId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'purchaseOrder';

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

	const columns: ProColumns<BusinessAPI.PurchaseOrderVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.orderSn' }),
			dataIndex: 'orderSn',
			key: 'orderSn',
			renderText: (text: string) => <span className="font-medium">{text}</span>,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.origin' }),
			dataIndex: ['orderVehicle', 'origin'],
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.destination' }),
			dataIndex: ['orderVehicle', 'destination'],
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.dealerName' }),
			dataIndex: ['orderVehicle', 'dealerName'],
			key: 'dealerName',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.vehicleNo' }),
			dataIndex: ['orderVehicle', 'vehicleNo'],
			key: 'vehicleNo',
			render: (_, record) => {
				return record.orderVehicle?.vehicleNo
					? '第' + record.orderVehicle?.vehicleNo + '车'
					: '-';
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.plate' }),
			dataIndex: ['orderVehicle', 'plate'],
			key: 'plate',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.driver' }),
			dataIndex: ['orderVehicle', 'driver'],
			key: 'driver',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
			dataIndex: ['orderVehicle', 'phone'],
			key: 'phone',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.state' }),
			dataIndex: 'state',
			key: 'state',
			valueType: 'select',
			render: (_, record) => {
				const stateText = intl.formatMessage({
					id: `${intlPrefix}.column.state.${record.state?.toLowerCase() || 'unknown'}`,
				});

				let color = 'default';
				switch (record.state) {
					case 'DRAFT':
						color = 'default';
						break;
					case 'WAITING_AUDIT':
						color = 'processing';
						break;
					case 'COMPLETED':
						color = 'success';
						break;
					case 'REJECTED':
						color = 'error';
						break;
					default:
						color = 'default';
				}

				return <Tag color={color}>{stateText}</Tag>;
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.createdAt' }),
			dataIndex: 'createdAt',
			key: 'createdAt',
			valueType: 'dateTime',
			search: false,
		},
	];

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

	return (
		<BizContainer<
			typeof business.purchaseOrder,
			BusinessAPI.PurchaseOrderVO,
			BusinessAPI.PurchaseOrderPageQry,
			BusinessAPI.PurchaseOrderCreateCmd,
			BusinessAPI.PurchaseOrderUpdateCmd
		>
			rowKey={'orderId'}
			permission={'operation-purchase-order'}
			func={business.purchaseOrder}
			method={'purchaseOrder'}
			methodUpper={'PurchaseOrder'}
			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.PurchaseOrderVO['state'],
						}),
					},
					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: 'WAITING_AUDIT',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.waitingAudit',
									}),
								},
								{
									key: 'COMPLETED',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.completed',
									}),
								},
								{
									key: 'REJECTED',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.rejected',
									}),
								},
								{
									key: 'CLOSED',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.closed',
									}),
								},
							],
							onChange: (key) => {
								setActiveKey(key as string);
							},
						},
					},
				},
				columns,
			}}
			create={false}
			update={false}
			destroy={false}
			detail={{
				rowId: orderId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}