import {
	ArrowDownOutlined,
	ArrowUpOutlined,
	DeleteOutlined,
	MenuOutlined,
} from '@ant-design/icons';
import { Button, Typography } from 'antd';
import classNames from 'classnames';
import React from 'react';

const { Text } = Typography;

interface ModuleProps {
	config: any;
	isSelected: boolean;
	onSelect: () => void;
	onDelete: () => void;
	onMoveUp?: () => void;
	onMoveDown?: () => void;
	canMoveUp?: boolean;
	canMoveDown?: boolean;
	previewMode?: boolean; // 添加预览模式属性
}

const OtherInfoModule: React.FC<ModuleProps> = ({
	config,
	isSelected,
	onSelect,
	onDelete,
	onMoveUp,
	onMoveDown,
	canMoveUp,
	canMoveDown,
	previewMode = false, // 默认为false
}) => {
	return (
		<div
			className={classNames('bg-white transition-all duration-200', {
				'border border-black': !previewMode,
				'border-2 border-blue-500 shadow-[0_0_0_2px_rgba(24,144,255,0.2)] rounded p-2 mb-2':
					isSelected && !previewMode,
				'hover:border-blue-300 rounded p-2 mb-2': !isSelected && !previewMode,
			})}
			onClick={previewMode ? undefined : onSelect}
		>
			{!previewMode && (
				<div className="flex justify-between items-center mb-2 pb-2 border-b border-gray-100">
					<Text strong>表格信息模块</Text>
					<div className="flex gap-1">
						<Button
							type="text"
							icon={<MenuOutlined />}
							size="small"
							style={{ cursor: 'move' }}
						/>
						<Button
							type="text"
							icon={<ArrowUpOutlined />}
							onClick={(e) => {
								e.stopPropagation();
								if (onMoveUp) onMoveUp();
							}}
							size="small"
							disabled={!canMoveUp}
						/>
						<Button
							type="text"
							icon={<ArrowDownOutlined />}
							onClick={(e) => {
								e.stopPropagation();
								if (onMoveDown) onMoveDown();
							}}
							size="small"
							disabled={!canMoveDown}
						/>
						<Button
							type="text"
							icon={<DeleteOutlined />}
							onClick={(e) => {
								e.stopPropagation();
								onDelete();
							}}
							danger
							size="small"
						/>
					</div>
				</div>
			)}
			<div className={'table-border'}>
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">车次:</div>
					<div className="col-span-2 p-2 text-left">{config.vehicleNumber}</div>
				</div>
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">收货地:</div>
					<div className="col-span-2 p-2 text-left">{config.destination}</div>
				</div>
				{config.showShippingFrom && (
					<div className="grid w-full gap-0 text-base grid-cols-3">
						<div className="font-bold p-2 text-left">产地：</div>
						<div className="col-span-2 p-2 text-left">
							{config.shippingFrom}
						</div>
					</div>
				)}
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">供应商:</div>
					<div className="col-span-2 p-2 text-left">
						{config.accountCompany}
					</div>
				</div>
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">发车时间:</div>
					<div className="col-span-2 p-2 text-left">{config.date}</div>
				</div>
				{config.showEstimatedArrivalTime && (
					<div className="grid w-full gap-0 text-base grid-cols-3">
						<div className="font-bold p-2 text-left">到达时间:</div>
						<div className="col-span-2 p-2 text-left">
							{config.estimatedArrivalTime}
						</div>
					</div>
				)}
				{config.data?.map((item: any) => (
					<>
						{config.showGrade && (
							<div className="grid w-full gap-0 text-base grid-cols-3">
								<div className="font-bold p-2 text-left">品名:</div>
								<div className="col-span-2 p-2 text-left">{item.watermelonGrade}</div>
							</div>
						)}
						<div className="grid w-full gap-0 text-base grid-cols-3">
							<div className="font-bold p-2 text-left">发货重量:</div>
							<div className="col-span-2 p-2 text-left">
								以公司入库重量为准。
							</div>
						</div>
						<div className="grid w-full gap-0 text-base grid-cols-3">
							<div className="font-bold p-2 text-left">净瓜单价：</div>
							<div className="col-span-2 p-2 text-left">
								{item.unitPrice}
								{config.unitPriceUnit === '1' ? '元/斤' : '元/公斤'}
							</div>
						</div>
					</>
				))}
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">大约重量：</div>
					<div className="p-2 text-left">{config.data?.reduce((acc: any, cur: any) => acc + cur.grossWeight, 0)}</div>
					<div className="p-2 text-left">斤</div>
				</div>
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">箱数</div>
					<div className="p-2 text-left">
						{config.data?.reduce((acc: any, cur: any) => acc + cur.boxCount, 0)}
					</div>
					<div className="p-2 text-left">件</div>
				</div>
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">车号:</div>
					<div className="col-span-2 p-2 text-left">{config.licensePlate}</div>
				</div>
				<div className="grid w-full gap-0 text-base grid-cols-3">
					<div className="font-bold p-2 text-left">手机号:</div>
					<div className="col-span-2 p-2 text-left">{config.driverPhone}</div>
				</div>
			</div>
		</div>
	);
};

export default OtherInfoModule;
