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

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="py-2 flex flex-col gap-2.5 text-base">
        <table className="border-collapse text-sm leading-4">
          <tbody>
            <tr>
							<td className="font-bold p-2 text-left border border-black w-1/3">车次:</td>
							<td colSpan={2} className="p-2 text-left border border-black">第175车</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">收货地:</td>
              <td colSpan={2} className="p-2 text-left border border-black">北京果多美</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">产地：</td>
              <td colSpan={2} className="p-2 text-left border border-black">内蒙</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">供应商:</td>
              <td colSpan={2} className="p-2 text-left border border-black">北京新发龙盛商贸有限公司</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">发车时间:</td>
              <td colSpan={2} className="p-2 text-left border border-black">9月8号</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">到达时间:</td>
              <td colSpan={2} className="p-2 text-left border border-black">9月9号</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">品名:</td>
              <td colSpan={2} className="p-2 text-left border border-black">A级-麒麟瓜</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">发货重量:</td>
              <td colSpan={2} className="p-2 text-left border border-black">以公司入库重量为准。</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">净瓜单价：</td>
              <td colSpan={2} className="p-2 text-left border border-black">3元/斤</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">大约重量：</td>
              <td className="p-2 text-left border border-black">29062</td>
              <td className="p-2 text-left border border-black">斤</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">箱数</td>
              <td className="p-2 text-left border border-black">688</td>
              <td className="p-2 text-left border border-black">件</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">车号:</td>
              <td colSpan={2} className="p-2 text-left border border-black">蒙L80367</td>
            </tr>
            <tr>
              <td className="font-bold p-2 text-left border border-black w-1/3">手机号:</td>
              <td colSpan={2} className="p-2 text-left border border-black">15849849656</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default OtherInfoModule;