import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
  Table,
  Button,
  Modal,
  Form,
  Input,
  Select,
  DatePicker,
  message,
  Card,
  Space,
  Tag,
  Dropdown,
  Menu,
  Tabs,
  Timeline,
  Descriptions,
  Checkbox,
  Popover,
  InputNumber,
  Switch,
  Row,
  Col,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  EyeOutlined,
  MoreOutlined,
  UserOutlined,
  ToolOutlined,
  CheckCircleOutlined,
  SyncOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  SettingOutlined,
  CloudServerOutlined,
  DatabaseOutlined,
  EnvironmentOutlined,
  TagOutlined,
  ExportOutlined,
} from '@ant-design/icons';
import axios from 'axios';
import CloseButton from '../components/CloseButton';
import TicketExportModal from '../components/TicketExportModal';
import dayjs from 'dayjs';
import { useSearchParams } from 'react-router-dom';
import { debounce, getUserFromStorage } from '../utils/common';
import secureStorage, { TICKET_COLUMNS_KEY } from '../utils/secureStorage';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { TabPane } = Tabs;

const BUILTIN_TICKET_FIELDS = [
  'ticketId',
  'title',
  'deviceId',
  'deviceName',
  'deviceModel',
  'serialNumber',
  'faultCategory',
  'faultSubCategory',
  'priority',
  'status',
  'description',
  'expectedCompletionDate',
  'reporterId',
  'reporterName',
  'assigneeId',
  'assigneeName',
  'location',
  'resolution',
  'completionDate',
  'evaluation',
  'evaluationRating',
  'attachments',
  'tags',
  'notes',
  'result',
  'solution',
  'usedParts',
];

const DEFAULT_TICKET_FIELDS = [
  {
    fieldName: 'title',
    displayName: '标题',
    fieldType: 'string',
    required: true,
    order: 1,
    visible: true,
  },
  {
    fieldName: 'deviceId',
    displayName: '关联设备',
    fieldType: 'device',
    required: false,
    order: 2,
    visible: true,
  },
  {
    fieldName: 'deviceName',
    displayName: '设备名称',
    fieldType: 'string',
    required: false,
    order: 3,
    visible: true,
  },
  {
    fieldName: 'serialNumber',
    displayName: '设备序列号',
    fieldType: 'string',
    required: false,
    order: 4,
    visible: true,
  },
  {
    fieldName: 'faultCategory',
    displayName: '故障分类',
    fieldType: 'select',
    required: true,
    order: 5,
    visible: true,
    options: [],
  },
  {
    fieldName: 'priority',
    displayName: '优先级',
    fieldType: 'select',
    required: true,
    order: 6,
    visible: true,
    options: [
      { value: 'low', label: '低' },
      { value: 'medium', label: '中' },
      { value: 'high', label: '高' },
      { value: 'urgent', label: '紧急' },
    ],
  },
  {
    fieldName: 'status',
    displayName: '状态',
    fieldType: 'select',
    required: false,
    order: 6.5,
    visible: true,
    options: [
      { value: 'pending', label: '待处理' },
      { value: 'in_progress', label: '处理中' },
      { value: 'completed', label: '已完成' },
      { value: 'closed', label: '已关闭' },
    ],
  },
  {
    fieldName: 'description',
    displayName: '故障描述',
    fieldType: 'textarea',
    required: true,
    order: 7,
    visible: true,
  },
  {
    fieldName: 'expectedCompletionDate',
    displayName: '期望完成时间',
    fieldType: 'datetime',
    required: false,
    order: 8,
    visible: true,
  },
  {
    fieldName: 'resolution',
    displayName: '解决方案',
    fieldType: 'textarea',
    required: false,
    order: 9,
    visible: true,
  },
  {
    fieldName: 'notes',
    displayName: '备注',
    fieldType: 'textarea',
    required: false,
    order: 10,
    visible: true,
  },
];

const getStatusColor = status => {
  const colors = {
    pending: 'orange',
    in_progress: 'processing',
    completed: 'green',
    closed: 'default',
  };
  return colors[status] || 'default';
};

const getStatusText = status => {
  const texts = {
    pending: '待处理',
    in_progress: '处理中',
    completed: '已完成',
    closed: '已关闭',
  };
  return texts[status] || status;
};

const getPriorityColor = priority => {
  const colors = {
    low: 'green',
    medium: 'orange',
    high: 'red',
    urgent: 'magenta',
  };
  return colors[priority] || 'default';
};

const getPriorityText = priority => {
  const texts = {
    low: '低',
    medium: '中',
    high: '高',
    urgent: '紧急',
  };
  return texts[priority] || priority;
};

const generateTicketId = () => {
  const prefix = 'TKT';
  const timestamp = dayjs().format('YYYYMMDDHHmmss');
  const random = Math.floor(Math.random() * 1000)
    .toString()
    .padStart(3, '0');
  return `${prefix}${timestamp}${random}`;
};

function TicketManagement() {
  const [searchParams] = useSearchParams();
  const [tickets, setTickets] = useState([]);
  const [devices, setDevices] = useState([]);
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [modalVisible, setModalVisible] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [processingModalVisible, setProcessingModalVisible] = useState(false);
  const [exportModalVisible, setExportModalVisible] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [editingTicket, setEditingTicket] = useState(null);
  const [selectedTicket, setSelectedTicket] = useState(null);
  const [operationRecords, setOperationRecords] = useState([]);
  const [form] = Form.useForm();
  const [processForm] = Form.useForm();
  const [searchForm] = Form.useForm();

  // 从URL参数获取设备信息（从设备详情页跳转过来）
  const urlDeviceId = searchParams.get('deviceId');
  const urlDeviceName = searchParams.get('deviceName');
  const urlSerialNumber = searchParams.get('serialNumber');
  const urlCreate = searchParams.get('create');
  const urlView = searchParams.get('view');

  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
    pageSizeOptions: ['10', '20', '30', '50'],
    showSizeChanger: true,
    showTotal: total => `共 ${total} 条记录`,
  });

  const [searchFilters, setSearchFilters] = useState({});
  const [manualDeviceSource, setManualDeviceSource] = useState(false);
  const [ticketFields, setTicketFields] = useState(DEFAULT_TICKET_FIELDS);
  const [loadingFields, setLoadingFields] = useState(true);
  const [deviceFields, setDeviceFields] = useState([]);

  const fetchTickets = useCallback(
    async (page = 1, pageSize = 10, filters = {}) => {
      try {
        setLoading(true);
        const params = {
          page,
          pageSize,
          ...searchFilters,
          ...filters,
        };

        const response = await axios.get('/api/tickets', { params });
        const { tickets: ticketList, total } = response.data;

        const processedTickets = ticketList.map(ticket => {
          const processed = { ...ticket };
          if (ticket.metadata && typeof ticket.metadata === 'object') {
            Object.entries(ticket.metadata).forEach(([key, value]) => {
              processed[key] = value;
            });
          }
          return processed;
        });

        setTickets(processedTickets);
        setPagination(prev => ({ ...prev, current: page, pageSize, total }));
      } catch (error) {
        message.error('获取工单列表失败');
        console.error('获取工单列表失败:', error);
      } finally {
        setLoading(false);
      }
    },
    [searchFilters]
  );

  const [deviceSearching, setDeviceSearching] = useState(false);
  const [deviceSearchValue, setDeviceSearchValue] = useState('');

  const fetchDevices = useCallback(async (keyword = '') => {
    try {
      setDeviceSearching(true);
      const params = {};
      if (keyword && keyword.trim()) {
        params.keyword = keyword.trim();
      }
      const response = await axios.get('/api/devices/all', { params });
      setDevices(response.data.devices || []);
    } catch (error) {
      console.error('获取设备列表失败:', error);
    } finally {
      setDeviceSearching(false);
    }
  }, []);

  const handleDeviceSearch = useCallback(
    debounce(value => {
      fetchDevices(value);
    }, 300),
    [fetchDevices]
  );

  const fetchCategories = useCallback(async () => {
    try {
      const response = await axios.get('/api/ticket-categories');
      const categoryOptions = (response.data || []).map(cat => ({
        value: cat.name,
        label: cat.name,
      }));
      setCategories(response.data || []);
      setTicketFields(prev =>
        prev.map(field =>
          field.fieldName === 'faultCategory' ? { ...field, options: categoryOptions } : field
        )
      );
    } catch (error) {
      console.error('获取分类列表失败:', error);
    }
  }, []);

  const fetchTicketFields = useCallback(async () => {
    try {
      setLoadingFields(true);
      const response = await axios.get('/api/ticket-fields');
      const dbFields = response.data.sort((a, b) => a.order - b.order);

      const isValidOptions = opts => {
        if (!opts) return false;
        if (!Array.isArray(opts)) return false;
        if (opts.length === 0) return false;
        return opts.some(
          opt => opt && opt.value !== undefined && opt.value !== null && opt.value !== ''
        );
      };

      const mergedFields = DEFAULT_TICKET_FIELDS.map(defaultField => {
        const dbField = dbFields.find(f => f.fieldName === defaultField.fieldName);
        if (dbField) {
          return {
            ...defaultField,
            ...dbField,
            options: isValidOptions(dbField.options) ? dbField.options : defaultField.options,
          };
        }
        return defaultField;
      });

      dbFields.forEach(dbField => {
        if (!DEFAULT_TICKET_FIELDS.some(f => f.fieldName === dbField.fieldName)) {
          mergedFields.push(dbField);
        }
      });

      setTicketFields(mergedFields);
    } catch (error) {
      console.error('获取工单字段配置失败:', error);
      setTicketFields(DEFAULT_TICKET_FIELDS);
    } finally {
      setLoadingFields(false);
    }
  }, []);

  // 获取设备字段配置
  const fetchDeviceFields = useCallback(async () => {
    try {
      const response = await axios.get('/api/deviceFields');
      setDeviceFields(response.data || []);
    } catch (error) {
      console.error('获取设备字段配置失败:', error);
      setDeviceFields([]);
    }
  }, []);

  useEffect(() => {
    fetchTickets();
    fetchDevices();
    fetchTicketFields().then(() => {
      // 在 ticketFields 加载完成后再加载分类数据
      fetchCategories();
    });
    fetchDeviceFields();
  }, [fetchTickets, fetchDevices, fetchTicketFields, fetchCategories, fetchDeviceFields]);

  // 处理从设备详情页跳转过来创建工单的情况
  useEffect(() => {
    if (urlDeviceId && devices.length > 0 && urlCreate === 'true') {
      setEditingTicket(null);
      setModalVisible(true);

      setTimeout(() => {
        form.setFieldsValue({
          deviceId: urlDeviceId,
        });
      }, 100);
    }
  }, [urlDeviceId, urlCreate, devices, form]);

  // 处理从设备详情页跳转过来查看工单的情况
  useEffect(() => {
    if (urlDeviceId && urlView === 'true') {
      // 设置搜索筛选条件，只显示该设备的工单
      const filters = { deviceId: urlDeviceId };
      setSearchFilters(filters);
      // 在搜索框中显示设备名称提示
      searchForm.setFieldsValue({ keyword: urlDeviceName || '' });
    }
  }, [urlDeviceId, urlView, urlDeviceName, searchForm]);

  // 当 searchFilters 变化时，重新获取工单列表
  useEffect(() => {
    if (urlDeviceId && urlView === 'true' && searchFilters.deviceId === urlDeviceId) {
      fetchTickets(1, pagination.pageSize);
    }
  }, [searchFilters, urlDeviceId, urlView]);

  const renderFormItem = useCallback(
    field => {
      const { fieldName, displayName, fieldType, required, options, placeholder } = field;
      const rules = required ? [{ required: true, message: `请选择或输入${displayName}` }] : [];

      let formItem;
      switch (fieldType) {
        case 'string':
          formItem = <Input placeholder={placeholder || `请输入${displayName}`} size="large" />;
          break;
        case 'number':
          formItem = (
            <InputNumber
              placeholder={placeholder || `请输入${displayName}`}
              style={{ width: '100%' }}
              size="large"
            />
          );
          break;
        case 'textarea':
          formItem = (
            <Input.TextArea
              rows={3}
              placeholder={placeholder || `请输入${displayName}`}
              showCount
            />
          );
          break;
        case 'boolean':
          formItem = <Switch />;
          break;
        case 'date':
          formItem = <DatePicker style={{ width: '100%' }} size="large" />;
          break;
        case 'datetime':
          formItem = <DatePicker showTime style={{ width: '100%' }} size="large" />;
          break;
        case 'select':
          const selectOptions = options && Array.isArray(options) ? options : [];
          formItem = (
            <Select placeholder={placeholder || `请选择${displayName}`} size="large">
              {selectOptions.map((opt, idx) => (
                <Option key={idx} value={opt.value}>
                  {opt.label}
                </Option>
              ))}
            </Select>
          );
          break;
        case 'device':
          formItem = (
            <Select
              placeholder="输入关键词搜索设备（序列号/名称/IP等）"
              showSearch
              allowClear
              loading={deviceSearching}
              filterOption={false}
              onSearch={handleDeviceSearch}
              notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
              onDropdownVisibleChange={open => {
                if (open && devices.length === 0) {
                  fetchDevices();
                }
              }}
              size="large"
            >
              {devices.map(device => (
                <Option key={device.deviceId} value={device.deviceId}>
                  {device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
                </Option>
              ))}
            </Select>
          );
          break;
        default:
          formItem = <Input placeholder={placeholder || `请输入${displayName}`} size="large" />;
      }

      return (
        <Form.Item
          key={fieldName}
          name={fieldName}
          label={<span style={{ fontWeight: 500 }}>{displayName}</span>}
          rules={rules}
          valuePropName={fieldType === 'boolean' ? 'checked' : undefined}
        >
          {formItem}
        </Form.Item>
      );
    },
    [devices, deviceSearching, handleDeviceSearch, fetchDevices]
  );

  const tableColumns = useMemo(() => {
    const baseColumns = [
      { title: '工单编号', dataIndex: 'ticketId', key: 'ticketId', width: 150, fixed: 'left' },
      { title: '标题', dataIndex: 'title', key: 'title', width: 200, ellipsis: true },
      {
        title: '设备信息',
        key: 'deviceInfo',
        width: 180,
        render: (_, record) => (
          <div>
            <div>{record.deviceName || '-'}</div>
            <div style={{ fontSize: 12, color: '#888' }}>{record.serialNumber || '-'}</div>
          </div>
        ),
      },
      {
        title: '故障分类',
        dataIndex: 'faultCategory',
        key: 'faultCategory',
        width: 120,
        render: value => (value ? <Tag>{value}</Tag> : '-'),
      },
      {
        title: '优先级',
        dataIndex: 'priority',
        key: 'priority',
        width: 80,
        render: value => <Tag color={getPriorityColor(value)}>{getPriorityText(value)}</Tag>,
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        render: value => <Tag color={getStatusColor(value)}>{getStatusText(value)}</Tag>,
      },
      { title: '报告人', dataIndex: 'reporterName', key: 'reporterName', width: 100 },
      {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        width: 160,
        render: value => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
      },
    ];

    const customFieldColumns = ticketFields
      .filter(field => !BUILTIN_TICKET_FIELDS.includes(field.fieldName) && field.visible)
      .map(field => ({
        title: field.displayName,
        dataIndex: field.fieldName,
        key: field.fieldName,
        width: 120,
        render: value => {
          if (value === null || value === undefined) return '-';
          if (field.fieldType === 'boolean') {
            return <Switch checked={value} disabled />;
          }
          if (field.fieldType === 'date' || field.fieldType === 'datetime') {
            return value
              ? dayjs(value).format(field.fieldType === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm')
              : '-';
          }
          if (field.fieldType === 'select' && Array.isArray(field.options)) {
            const option = field.options.find(opt => opt.value === value);
            return option ? option.label : value;
          }
          return String(value);
        },
      }));

    const actionColumn = {
      title: '操作',
      key: 'action',
      width: 100,
      fixed: 'right',
      render: (_, record) => (
        <Dropdown trigger={['click']} overlay={getActionItems(record)}>
          <Button type="text" icon={<MoreOutlined />} />
        </Dropdown>
      ),
    };

    return [...baseColumns, ...customFieldColumns, actionColumn];
  }, [ticketFields]);

  const fetchTicketDetail = useCallback(async ticketId => {
    try {
      const [ticketRes, operationsRes] = await Promise.all([
        axios.get(`/api/tickets/${ticketId}`),
        axios.get(`/api/tickets/${ticketId}/operations`),
      ]);

      setSelectedTicket(ticketRes.data);
      setOperationRecords(operationsRes.data || []);
      setDetailModalVisible(true);
    } catch (error) {
      message.error('获取工单详情失败');
      console.error('获取工单详情失败:', error);
    }
  }, []);

  const showModal = useCallback((ticket = null) => {
    setEditingTicket(ticket);
    if (ticket) {
      setManualDeviceSource(!ticket.deviceId);
      const ticketData = { ...ticket };
      if (ticketData.expectedCompletionDate) {
        ticketData.expectedCompletionDate = dayjs(ticketData.expectedCompletionDate);
      }
      if (ticketData.completionDate) {
        ticketData.completionDate = dayjs(ticketData.completionDate);
      }
      if (ticket.metadata && typeof ticket.metadata === 'object') {
        Object.entries(ticket.metadata).forEach(([key, value]) => {
          ticketData[key] = value;
        });
      }
      form.setFieldsValue(ticketData);
    } else {
      setManualDeviceSource(false);
      form.resetFields();
      const newTicketId = generateTicketId();
      form.setFieldsValue({ ticketId: newTicketId });
    }
    setModalVisible(true);
  }, []);

  const handleCancel = useCallback(() => {
    setModalVisible(false);
    setEditingTicket(null);
  }, []);

  const handleSubmit = useCallback(
    async values => {
      try {
        const ticketData = {
          ...values,
          expectedCompletionDate: values.expectedCompletionDate
            ? values.expectedCompletionDate.format('YYYY-MM-DD HH:mm:ss')
            : null,
          completionDate: values.completionDate
            ? values.completionDate.format('YYYY-MM-DD HH:mm:ss')
            : null,
          metadata: {},
        };

        ticketFields.forEach(field => {
          if (!BUILTIN_TICKET_FIELDS.includes(field.fieldName)) {
            if (values[field.fieldName] !== undefined) {
              ticketData.metadata[field.fieldName] = values[field.fieldName];
            }
            delete ticketData[field.fieldName];
          }
        });

        if (manualDeviceSource) {
          ticketData.deviceId = null;
          ticketData.deviceName = values.deviceName || '未知设备';
          ticketData.serialNumber = values.serialNumber;
        } else {
          const selectedDevice = devices.find(d => d.deviceId === values.deviceId);
          if (selectedDevice) {
            ticketData.deviceName = selectedDevice.name;
            ticketData.serialNumber = selectedDevice.serialNumber;
          }
        }

        if (editingTicket) {
          await axios.put(`/api/tickets/${editingTicket.ticketId}`, ticketData);
          message.success('工单更新成功');
        } else {
          const user = getUserFromStorage();
          ticketData.reporterId = user.userId || 'USER001';
          ticketData.reporterName = user.username || '系统用户';
          await axios.post('/api/tickets', ticketData);
          message.success('工单创建成功');
        }

        setModalVisible(false);
        fetchTickets();
        setEditingTicket(null);
      } catch (error) {
        message.error(editingTicket ? '工单更新失败' : '工单创建失败');
        console.error(error);
      }
    },
    [editingTicket, fetchTickets, ticketFields, devices, manualDeviceSource]
  );

  const handleDelete = useCallback(
    async ticketId => {
      Modal.confirm({
        title: '确认删除',
        content: '确定要删除这个工单吗？',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk: async () => {
          try {
            await axios.delete(`/api/tickets/${ticketId}`);
            message.success('工单删除成功');
            fetchTickets();
          } catch (error) {
            message.error('工单删除失败');
            console.error(error);
          }
        },
      });
    },
    [fetchTickets]
  );

  const handleProcess = useCallback(ticket => {
    setSelectedTicket(ticket);
    processForm.resetFields();
    setProcessingModalVisible(true);
  }, []);

  const handleProcessSubmit = useCallback(
    async values => {
      try {
        const user = getUserFromStorage();
        await axios.put(`/api/tickets/${selectedTicket.ticketId}/process`, {
          ...values,
          operatorId: user.userId,
          operatorName: user.username,
        });
        message.success('工单处理完成');
        setProcessingModalVisible(false);
        fetchTickets();
      } catch (error) {
        message.error('处理失败');
        console.error(error);
      }
    },
    [selectedTicket, fetchTickets]
  );

  const handleStatusChange = useCallback(
    async (ticketId, newStatus) => {
      try {
        const user = getUserFromStorage();
        await axios.put(`/api/tickets/${ticketId}/status`, {
          status: newStatus,
          operatorId: user.userId,
          operatorName: user.username,
        });
        message.success('状态更新成功');
        fetchTickets();
      } catch (error) {
        message.error('状态更新失败');
        console.error(error);
      }
    },
    [fetchTickets]
  );

  const handleSearch = useCallback(
    values => {
      setSearchFilters(values);
      fetchTickets(1, pagination.pageSize, values);
    },
    [fetchTickets, pagination.pageSize]
  );

  const handleReset = useCallback(() => {
    searchForm.resetFields();
    setSearchFilters({});
    fetchTickets(1, pagination.pageSize, {});
  }, [fetchTickets, pagination.pageSize]);

  const handleExport = useCallback(
    async ({ format, scope }) => {
      try {
        let ticketIds = [];

        if (scope === 'selected') {
          ticketIds = selectedRowKeys;
        } else if (scope === 'currentPage') {
          ticketIds = tickets.map(t => t.ticketId);
        } else {
          ticketIds = tickets.map(t => t.ticketId);
        }

        if (ticketIds.length === 0) {
          message.warning('没有可导出的工单');
          return;
        }

        const params = new URLSearchParams();
        ticketIds.forEach(id => params.append('ticketIds', id));
        params.append('format', format);
        Object.entries(searchFilters).forEach(([key, value]) => {
          if (value !== undefined && value !== null && value !== '') {
            params.append(key, value);
          }
        });

        const response = await axios.get(`/api/tickets/export?${params.toString()}`, {
          responseType: 'blob',
        });

        let mimeType;
        let filename;
        if (format === 'json') {
          mimeType = 'application/json';
          filename = `tickets_${Date.now()}.json`;
        } else if (format === 'xlsx') {
          mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          filename = `tickets_${Date.now()}.xlsx`;
        } else {
          mimeType = 'text/csv;charset=utf-8';
          filename = `tickets_${Date.now()}.csv`;
        }

        const blob = new Blob([response.data], { type: mimeType });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);

        message.success(`成功导出 ${ticketIds.length} 个工单`);
      } catch (error) {
        console.error('导出失败:', error);
        message.error('导出失败');
      }
    },
    [searchFilters, selectedRowKeys, tickets]
  );

  const handleTableChange = useCallback(
    paginationInfo => {
      setPagination(paginationInfo);
      fetchTickets(paginationInfo.current, paginationInfo.pageSize, searchFilters);
    },
    [fetchTickets, searchFilters]
  );

  const renderFormItems = useCallback(() => {
    const items = [];
    if (!editingTicket) {
      items.push(
        <Form.Item key="ticketId" name="ticketId" label="工单编号">
          <Input placeholder="自动生成" disabled style={{ background: '#f5f5f5' }} />
        </Form.Item>
      );
    }

    const hasDeviceIdField = ticketFields.some(f => f.fieldName === 'deviceId');
    const hasDeviceNameField = ticketFields.some(f => f.fieldName === 'deviceName');

    ticketFields.forEach(field => {
      if (field.fieldName === 'ticketId') {
      } else if (field.fieldName === 'deviceId') {
        items.push(
          <React.Fragment key="deviceSource">
            <Form.Item label="设备来源" required>
              <Select
                value={manualDeviceSource ? 'manual' : 'select'}
                onChange={val => setManualDeviceSource(val === 'manual')}
                style={{ width: 200 }}
              >
                <Option value="select">从设备列表选择</Option>
                <Option value="manual">手动输入序列号</Option>
              </Select>
            </Form.Item>
            {manualDeviceSource ? (
              <>
                <Form.Item
                  name="serialNumber"
                  label="设备序列号"
                  rules={[{ required: true, message: '请输入设备序列号' }]}
                >
                  <Input placeholder="请输入设备序列号" />
                </Form.Item>
                <Form.Item
                  name="deviceName"
                  label="设备名称"
                  rules={[{ required: false, message: '请输入设备名称（选填）' }]}
                >
                  <Input placeholder="请输入设备名称（选填）" />
                </Form.Item>
              </>
            ) : (
              <Form.Item
                name="deviceId"
                label="关联设备"
                rules={[{ required: true, message: '请选择关联设备' }]}
              >
                <Select
                  placeholder="输入关键词搜索设备（序列号/名称/IP等）"
                  showSearch
                  allowClear
                  loading={deviceSearching}
                  filterOption={false}
                  onSearch={handleDeviceSearch}
                  notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
                  onDropdownVisibleChange={open => {
                    if (open && devices.length === 0) {
                      fetchDevices();
                    }
                  }}
                >
                  {devices.map(device => (
                    <Option key={device.deviceId} value={device.deviceId}>
                      {device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            )}
          </React.Fragment>
        );
      } else if (field.fieldName === 'deviceName' || field.fieldName === 'serialNumber') {
        if (!hasDeviceIdField && field.fieldName === 'deviceName') {
          items.push(
            <Form.Item
              key="deviceId"
              name="deviceId"
              label="关联设备"
              rules={[{ required: true, message: '请选择关联设备' }]}
            >
              <Select
                placeholder="输入关键词搜索设备（序列号/名称/IP等）"
                showSearch
                allowClear
                loading={deviceSearching}
                filterOption={false}
                onSearch={handleDeviceSearch}
                notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
                onDropdownVisibleChange={open => {
                  if (open && devices.length === 0) {
                    fetchDevices();
                  }
                }}
              >
                {devices.map(device => (
                  <Option key={device.deviceId} value={device.deviceId}>
                    {device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          );
        }
      } else {
        items.push(renderFormItem(field));
      }
    });

    if (!hasDeviceIdField && !hasDeviceNameField) {
      items.push(
        <React.Fragment key="deviceSource">
          <Form.Item label="设备来源" required>
            <Select
              value={manualDeviceSource ? 'manual' : 'select'}
              onChange={val => setManualDeviceSource(val === 'manual')}
              style={{ width: 200 }}
            >
              <Option value="select">从设备列表选择</Option>
              <Option value="manual">手动输入序列号</Option>
            </Select>
          </Form.Item>
          {manualDeviceSource ? (
            <>
              <Form.Item
                name="serialNumber"
                label="设备序列号"
                rules={[{ required: true, message: '请输入设备序列号' }]}
              >
                <Input placeholder="请输入设备序列号" />
              </Form.Item>
              <Form.Item
                name="deviceName"
                label="设备名称"
                rules={[{ required: false, message: '请输入设备名称（选填）' }]}
              >
                <Input placeholder="请输入设备名称（选填）" />
              </Form.Item>
            </>
          ) : (
            <Form.Item
              name="deviceId"
              label="关联设备"
              rules={[{ required: true, message: '请选择关联设备' }]}
            >
              <Select
                placeholder="输入关键词搜索设备（序列号/名称/IP等）"
                showSearch
                allowClear
                loading={deviceSearching}
                filterOption={false}
                onSearch={handleDeviceSearch}
                notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
                onDropdownVisibleChange={open => {
                  if (open && devices.length === 0) {
                    fetchDevices();
                  }
                }}
              >
                {devices.map(device => (
                  <Option key={device.deviceId} value={device.deviceId}>
                    {device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          )}
        </React.Fragment>
      );
    }

    return items;
  }, [
    ticketFields,
    devices,
    deviceSearching,
    handleDeviceSearch,
    fetchDevices,
    editingTicket,
    renderFormItem,
    manualDeviceSource,
  ]);

  const getActionItems = useCallback(
    record => (
      <Menu
        items={[
          {
            key: 'view',
            icon: <EyeOutlined />,
            label: '查看详情',
            onClick: () => fetchTicketDetail(record.ticketId),
          },
          {
            key: 'process',
            icon: <ToolOutlined />,
            label: '处理工单',
            disabled: record.status === 'closed' || record.status === 'completed',
            onClick: () => handleProcess(record),
          },
          { type: 'divider' },
          {
            key: 'pending',
            label: '标记为待处理',
            disabled: record.status !== 'pending',
            onClick: () => handleStatusChange(record.ticketId, 'pending'),
          },
          {
            key: 'in_progress',
            label: '标记为处理中',
            disabled: record.status !== 'pending',
            onClick: () => handleStatusChange(record.ticketId, 'in_progress'),
          },
          {
            key: 'completed',
            label: '标记为已完成',
            disabled: record.status === 'completed' || record.status === 'closed',
            onClick: () => handleStatusChange(record.ticketId, 'completed'),
          },
          {
            key: 'closed',
            label: '标记为已关闭',
            disabled: record.status === 'closed',
            onClick: () => handleStatusChange(record.ticketId, 'closed'),
          },
          { type: 'divider' },
          {
            key: 'delete',
            icon: <DeleteOutlined />,
            label: '删除工单',
            danger: true,
            onClick: () => handleDelete(record.ticketId),
          },
        ]}
      />
    ),
    [fetchTicketDetail, handleProcess, handleStatusChange, handleDelete]
  );

  return (
    <div style={{ padding: 24 }}>
      <Card
        title="工单管理"
        extra={
          <Space>
            <Button icon={<ExportOutlined />} onClick={() => setExportModalVisible(true)}>
              导出
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
              创建工单
            </Button>
          </Space>
        }
      >
        <Form
          form={searchForm}
          layout="inline"
          onFinish={handleSearch}
          style={{ marginBottom: 16 }}
        >
          <Form.Item name="keyword" label="关键词">
            <Input placeholder="标题/设备/描述" allowClear style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select placeholder="选择状态" allowClear style={{ width: 120 }}>
              <Option value="pending">待处理</Option>
              <Option value="in_progress">处理中</Option>
              <Option value="completed">已完成</Option>
              <Option value="closed">已关闭</Option>
            </Select>
          </Form.Item>
          <Form.Item name="priority" label="优先级">
            <Select placeholder="选择优先级" allowClear style={{ width: 100 }}>
              <Option value="low">低</Option>
              <Option value="medium">中</Option>
              <Option value="high">高</Option>
              <Option value="urgent">紧急</Option>
            </Select>
          </Form.Item>
          <Form.Item name="faultCategory" label="故障分类">
            <Select placeholder="选择分类" allowClear style={{ width: 150 }}>
              {categories.map(cat => (
                <Option key={cat.categoryId} value={cat.name}>
                  {cat.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              搜索
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Form>

        <Table
          columns={tableColumns}
          dataSource={tickets}
          rowKey="ticketId"
          pagination={pagination}
          loading={loading}
          onChange={handleTableChange}
          scroll={{ x: 1200 }}
          rowSelection={{
            selectedRowKeys,
            onChange: setSelectedRowKeys,
          }}
          columnsState={{
            onChange: ({ visibleColumns }) => {
              secureStorage.set(TICKET_COLUMNS_KEY, visibleColumns);
            },
          }}
        />
      </Card>

      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: 8,
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#fff',
                fontSize: 16,
              }}
            >
              <PlusOutlined />
            </div>
            <span style={{ fontWeight: 600, fontSize: 18 }}>
              {editingTicket ? '编辑工单' : '创建工单'}
            </span>
          </div>
        }
        open={modalVisible}
        closeIcon={<CloseButton />}
        onCancel={handleCancel}
        footer={null}
        width={800}
        destroyOnClose
        style={{ top: 40 }}
        bodyStyle={{ padding: '24px 24px 8px 24px' }}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          requiredMark="optional"
          style={{ marginBottom: 16 }}
        >
          {!editingTicket && (
            <div
              style={{
                background: 'linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%)',
                border: '1px solid #e8eaff',
                borderRadius: 12,
                padding: '12px 16px',
                marginBottom: 20,
                display: 'flex',
                alignItems: 'center',
                gap: 12,
              }}
            >
              <div
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 8,
                  background: '#667eea',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 600,
                }}
              >
                TKT
              </div>
              <div>
                <div style={{ fontSize: 12, color: '#666', marginBottom: 2 }}>
                  工单编号（自动生成）
                </div>
                <Form.Item name="ticketId" noStyle>
                  <Input
                    disabled
                    placeholder="点击创建后自动生成"
                    style={{
                      background: 'transparent',
                      border: 'none',
                      padding: 0,
                      fontWeight: 600,
                      color: '#333',
                    }}
                  />
                </Form.Item>
              </div>
            </div>
          )}

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: '0 24px',
            }}
          >
            <div style={{ gridColumn: '1 / -1', marginBottom: 8 }}>
              <div
                style={{
                  fontSize: 13,
                  fontWeight: 600,
                  color: '#333',
                  marginBottom: 12,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                }}
              >
                <span
                  style={{
                    width: 4,
                    height: 16,
                    background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
                    borderRadius: 2,
                    display: 'inline-block',
                  }}
                />
                设备信息
              </div>
            </div>

            {(() => {
              const hasDeviceIdField = ticketFields.some(f => f.fieldName === 'deviceId');
              const hasDeviceNameField = ticketFields.some(f => f.fieldName === 'deviceName');

              const renderDeviceSection = () => (
                <React.Fragment>
                  <div style={{ gridColumn: '1 / -1', marginBottom: 16 }}>
                    <Form.Item
                      label={<span style={{ fontWeight: 500 }}>设备来源</span>}
                      name="deviceSource"
                      initialValue="select"
                    >
                      <Select
                        value={manualDeviceSource ? 'manual' : 'select'}
                        onChange={val => setManualDeviceSource(val === 'manual')}
                        style={{ width: '100%' }}
                        size="large"
                      >
                        <Option value="select">从设备列表选择</Option>
                        <Option value="manual">手动输入序列号</Option>
                      </Select>
                    </Form.Item>
                  </div>

                  {manualDeviceSource ? (
                    <>
                      <div>
                        <Form.Item
                          name="serialNumber"
                          label={
                            <span style={{ fontWeight: 500 }}>
                              设备序列号 <span style={{ color: '#ff4d4f' }}>*</span>
                            </span>
                          }
                          rules={[{ required: true, message: '请输入设备序列号' }]}
                        >
                          <Input placeholder="请输入设备序列号" size="large" />
                        </Form.Item>
                      </div>
                      <div>
                        <Form.Item
                          name="deviceName"
                          label={<span style={{ fontWeight: 500 }}>设备名称</span>}
                        >
                          <Input placeholder="请输入设备名称（选填）" size="large" />
                        </Form.Item>
                      </div>
                    </>
                  ) : (
                    <div style={{ gridColumn: '1 / -1' }}>
                      <Form.Item
                        name="deviceId"
                        label={
                          <span style={{ fontWeight: 500 }}>
                            关联设备 <span style={{ color: '#ff4d4f' }}>*</span>
                          </span>
                        }
                        rules={[{ required: true, message: '请选择关联设备' }]}
                      >
                        <Select
                          placeholder="输入关键词搜索设备（序列号/名称/IP等）"
                          showSearch
                          allowClear
                          loading={deviceSearching}
                          filterOption={false}
                          onSearch={handleDeviceSearch}
                          notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
                          onDropdownVisibleChange={open => {
                            if (open && devices.length === 0) {
                              fetchDevices();
                            }
                          }}
                          size="large"
                        >
                          {devices.map(device => (
                            <Option key={device.deviceId} value={device.deviceId}>
                              {device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
                            </Option>
                          ))}
                        </Select>
                      </Form.Item>
                    </div>
                  )}
                </React.Fragment>
              );

              if (hasDeviceIdField) {
                return renderDeviceSection();
              } else if (hasDeviceNameField) {
                if (!ticketFields.some(f => f.fieldName === 'deviceId')) {
                  return <div style={{ gridColumn: '1 / -1' }}>{renderDeviceSection()}</div>;
                }
              } else {
                return renderDeviceSection();
              }
              return null;
            })()}

            <div style={{ gridColumn: '1 / -1', marginBottom: 8, marginTop: 8 }}>
              <div
                style={{
                  fontSize: 13,
                  fontWeight: 600,
                  color: '#333',
                  marginBottom: 12,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                }}
              >
                <span
                  style={{
                    width: 4,
                    height: 16,
                    background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
                    borderRadius: 2,
                    display: 'inline-block',
                  }}
                />
                工单信息
              </div>
            </div>

            {ticketFields
              .filter(
                f =>
                  ![
                    'ticketId',
                    'deviceId',
                    'deviceName',
                    'serialNumber',
                    'expectedCompletionDate',
                    'resolution',
                    'notes',
                    'description',
                  ].includes(f.fieldName)
              )
              .map(field => (
                <div key={field.fieldName}>{renderFormItem(field)}</div>
              ))}

            <div style={{ gridColumn: '1 / -1' }}>
              <Form.Item
                name="title"
                label={
                  <span style={{ fontWeight: 500 }}>
                    工单标题 <span style={{ color: '#ff4d4f' }}>*</span>
                  </span>
                }
                rules={[{ required: true, message: '请输入工单标题' }]}
              >
                <Input placeholder="请输入工单标题" size="large" />
              </Form.Item>
            </div>

            <div>
              <Form.Item
                name="faultCategory"
                label={
                  <span style={{ fontWeight: 500 }}>
                    故障分类 <span style={{ color: '#ff4d4f' }}>*</span>
                  </span>
                }
                rules={[{ required: true, message: '请选择故障分类' }]}
              >
                <Select placeholder="请选择故障分类" size="large">
                  {categories.map(cat => (
                    <Option key={cat.categoryId} value={cat.name}>
                      {cat.name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>

            <div>
              <Form.Item
                name="priority"
                label={
                  <span style={{ fontWeight: 500 }}>
                    优先级 <span style={{ color: '#ff4d4f' }}>*</span>
                  </span>
                }
                rules={[{ required: true, message: '请选择优先级' }]}
                initialValue="medium"
              >
                <Select placeholder="请选择优先级" size="large">
                  <Option value="low">
                    <Tag color="green" style={{ margin: 0 }}>
                      低
                    </Tag>
                  </Option>
                  <Option value="medium">
                    <Tag color="orange" style={{ margin: 0 }}>
                      中
                    </Tag>
                  </Option>
                  <Option value="high">
                    <Tag color="red" style={{ margin: 0 }}>
                      高
                    </Tag>
                  </Option>
                  <Option value="urgent">
                    <Tag color="magenta" style={{ margin: 0 }}>
                      紧急
                    </Tag>
                  </Option>
                </Select>
              </Form.Item>
            </div>

            <div>
              <Form.Item
                name="expectedCompletionDate"
                label={<span style={{ fontWeight: 500 }}>期望完成时间</span>}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm"
                  style={{ width: '100%' }}
                  size="large"
                  placeholder="选择期望完成时间"
                />
              </Form.Item>
            </div>

            <div style={{ gridColumn: '1 / -1' }}>
              <Form.Item
                name="description"
                label={
                  <span style={{ fontWeight: 500 }}>
                    故障描述 <span style={{ color: '#ff4d4f' }}>*</span>
                  </span>
                }
                rules={[{ required: true, message: '请输入故障描述' }]}
              >
                <TextArea
                  rows={4}
                  placeholder="请详细描述故障现象、发生时间、影响范围等信息"
                  showCount
                  maxLength={500}
                />
              </Form.Item>
            </div>

            <div style={{ gridColumn: '1 / -1', marginTop: 8 }}>
              <Form.Item name="notes" label={<span style={{ fontWeight: 500 }}>备注信息</span>}>
                <TextArea
                  rows={2}
                  placeholder="补充说明或其他相关信息（选填）"
                  showCount
                  maxLength={200}
                />
              </Form.Item>
            </div>
          </div>

          <div
            style={{
              borderTop: '1px solid #f0f0f0',
              marginTop: 24,
              paddingTop: 20,
              display: 'flex',
              justifyContent: 'flex-end',
              gap: 12,
            }}
          >
            <Button onClick={handleCancel} size="large" style={{ minWidth: 100 }}>
              取消
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              style={{
                minWidth: 120,
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                border: 'none',
              }}
            >
              {editingTicket ? '更新工单' : '创建工单'}
            </Button>
          </div>
        </Form>
      </Modal>

      <Modal
        title="处理工单"
        open={processingModalVisible}
        closeIcon={<CloseButton />}
        onCancel={() => setProcessingModalVisible(false)}
        footer={null}
        width={600}
      >
        <Form form={processForm} layout="vertical" onFinish={handleProcessSubmit}>
          <Descriptions bordered column={1} style={{ marginBottom: 16 }}>
            <Descriptions.Item label="工单编号">{selectedTicket?.ticketId}</Descriptions.Item>
            <Descriptions.Item label="标题">{selectedTicket?.title}</Descriptions.Item>
            <Descriptions.Item label="设备">{selectedTicket?.deviceName}</Descriptions.Item>
            <Descriptions.Item label="故障描述">{selectedTicket?.description}</Descriptions.Item>
          </Descriptions>

          <Form.Item name="solution" label="处理方案" rules={[{ required: true }]}>
            <TextArea rows={4} placeholder="请详细描述处理方案和步骤" />
          </Form.Item>

          <Form.Item name="result" label="处理结果" rules={[{ required: true }]}>
            <Select placeholder="选择处理结果">
              <Option value="resolved">问题已解决</Option>
              <Option value="partially_resolved">部分解决</Option>
              <Option value="unresolved">未解决</Option>
              <Option value="escalated">需升级处理</Option>
            </Select>
          </Form.Item>

          <Form.Item name="notes" label="备注">
            <TextArea rows={2} placeholder="其他补充说明" />
          </Form.Item>

          <Form.Item name="usedParts" label="使用备件">
            <Input placeholder="使用的备件信息（名称、数量）" />
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" icon={<CheckCircleOutlined />}>
                提交处理结果
              </Button>
              <Button onClick={() => setProcessingModalVisible(false)}>取消</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={`工单详情 - ${selectedTicket?.ticketId}`}
        open={detailModalVisible}
        closeIcon={<CloseButton />}
        onCancel={() => setDetailModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setDetailModalVisible(false)}>
            关闭
          </Button>,
          selectedTicket?.status !== 'closed' && selectedTicket?.status !== 'completed' && (
            <Button
              key="process"
              type="primary"
              icon={<ToolOutlined />}
              onClick={() => {
                setDetailModalVisible(false);
                handleProcess(selectedTicket);
              }}
            >
              处理工单
            </Button>
          ),
        ]}
        width={900}
      >
        {selectedTicket && (
          <Tabs defaultActiveKey="info">
            <TabPane
              tab={
                <span>
                  <TagOutlined /> 基本信息
                </span>
              }
              key="info"
            >
              <Descriptions bordered column={2}>
                <Descriptions.Item label="工单编号">{selectedTicket.ticketId}</Descriptions.Item>
                <Descriptions.Item label="标题">{selectedTicket.title}</Descriptions.Item>
                <Descriptions.Item label="设备名称">{selectedTicket.deviceName}</Descriptions.Item>
                <Descriptions.Item label="设备序列号">
                  {selectedTicket.serialNumber}
                </Descriptions.Item>
                <Descriptions.Item label="故障分类">
                  {selectedTicket.faultCategory}
                </Descriptions.Item>
                <Descriptions.Item label="优先级">
                  <Tag color={getPriorityColor(selectedTicket.priority)}>
                    {getPriorityText(selectedTicket.priority)}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="状态">
                  <Tag color={getStatusColor(selectedTicket.status)}>
                    {getStatusText(selectedTicket.status)}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="报告人">{selectedTicket.reporterName}</Descriptions.Item>
                <Descriptions.Item label="创建时间">
                  {selectedTicket.createdAt
                    ? dayjs(selectedTicket.createdAt).format('YYYY-MM-DD HH:mm:ss')
                    : '-'}
                </Descriptions.Item>
                <Descriptions.Item label="期望完成时间">
                  {selectedTicket.expectedCompletionDate
                    ? dayjs(selectedTicket.expectedCompletionDate).format('YYYY-MM-DD HH:mm:ss')
                    : '-'}
                </Descriptions.Item>
                <Descriptions.Item label="完成时间" span={2}>
                  {selectedTicket.completionDate
                    ? dayjs(selectedTicket.completionDate).format('YYYY-MM-DD HH:mm:ss')
                    : '-'}
                </Descriptions.Item>
                <Descriptions.Item label="故障描述" span={2}>
                  {selectedTicket.description || '-'}
                </Descriptions.Item>
                <Descriptions.Item label="解决方案" span={2}>
                  {selectedTicket.resolution || '-'}
                </Descriptions.Item>
                <Descriptions.Item label="备注" span={2}>
                  {selectedTicket.notes || '-'}
                </Descriptions.Item>
              </Descriptions>
            </TabPane>

            {selectedTicket?.Device && (
              <TabPane
                tab={
                  <span>
                    <CloudServerOutlined /> 设备信息
                  </span>
                }
                key="device"
              >
                <div style={{ padding: '16px 0' }}>
                  {/* 设备基本信息卡片 */}
                  <Card title="基本信息" style={{ marginBottom: 16 }} size="small">
                    <Row gutter={[24, 16]}>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>设备ID</div>
                        <div style={{ fontWeight: 500 }}>{selectedTicket.Device.deviceId}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>设备名称</div>
                        <div style={{ fontWeight: 500 }}>{selectedTicket.Device.name}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>状态</div>
                        <Tag
                          color={
                            selectedTicket.Device.status === 'running'
                              ? 'green'
                              : selectedTicket.Device.status === 'maintenance'
                                ? 'orange'
                                : selectedTicket.Device.status === 'fault'
                                  ? 'red'
                                  : 'default'
                          }
                        >
                          {selectedTicket.Device.status === 'running'
                            ? '运行中'
                            : selectedTicket.Device.status === 'maintenance'
                              ? '维护中'
                              : selectedTicket.Device.status === 'fault'
                                ? '故障'
                                : selectedTicket.Device.status === 'offline'
                                  ? '离线'
                                  : selectedTicket.Device.status || '-'}
                        </Tag>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>设备类型</div>
                        <div>{selectedTicket.Device.type}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>型号</div>
                        <div>{selectedTicket.Device.model || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>序列号</div>
                        <div>{selectedTicket.Device.serialNumber || '-'}</div>
                      </Col>
                    </Row>
                  </Card>

                  {/* 位置信息卡片 */}
                  <Card title="位置信息" style={{ marginBottom: 16 }} size="small">
                    <Row gutter={[24, 16]}>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>所在机房</div>
                        <div>{selectedTicket.Device.roomName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>所在机柜</div>
                        <div>{selectedTicket.Device.rackName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>IP地址</div>
                        <div>{selectedTicket.Device.ipAddress || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>位置(U)</div>
                        <div>{selectedTicket.Device.position || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>高度(U)</div>
                        <div>{selectedTicket.Device.height || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>功耗(W)</div>
                        <div>{selectedTicket.Device.powerConsumption || '-'}</div>
                      </Col>
                    </Row>
                  </Card>

                  {/* 维保信息卡片 */}
                  <Card title="维保信息" style={{ marginBottom: 16 }} size="small">
                    <Row gutter={[24, 16]}>
                      <Col span={12}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>购买日期</div>
                        <div>
                          {selectedTicket.Device.purchaseDate
                            ? dayjs(selectedTicket.Device.purchaseDate).format('YYYY-MM-DD')
                            : '-'}
                        </div>
                      </Col>
                      <Col span={12}>
                        <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>保修到期</div>
                        <div>
                          {selectedTicket.Device.warrantyExpiry
                            ? dayjs(selectedTicket.Device.warrantyExpiry).format('YYYY-MM-DD')
                            : '-'}
                        </div>
                      </Col>
                    </Row>
                  </Card>

                  {/* 描述信息 */}
                  {selectedTicket.Device.description && (
                    <Card title="描述" style={{ marginBottom: 16 }} size="small">
                      <div style={{ whiteSpace: 'pre-wrap' }}>
                        {selectedTicket.Device.description}
                      </div>
                    </Card>
                  )}

                  {/* 自定义字段卡片 */}
                  {selectedTicket.Device.customFields &&
                    Object.keys(selectedTicket.Device.customFields).length > 0 && (
                      <Card title="自定义字段" size="small">
                        <Row gutter={[24, 16]}>
                          {Object.entries(selectedTicket.Device.customFields).map(
                            ([key, value]) => {
                              // 从 deviceFields 中查找对应的中文显示名称
                              const fieldConfig = deviceFields.find(f => f.fieldName === key);
                              const displayName = fieldConfig?.displayName || key;
                              return (
                                <Col span={8} key={key}>
                                  <div style={{ color: '#666', fontSize: 12, marginBottom: 4 }}>
                                    {displayName}
                                  </div>
                                  <div style={{ fontWeight: 500 }}>{String(value)}</div>
                                </Col>
                              );
                            }
                          )}
                        </Row>
                      </Card>
                    )}
                </div>
              </TabPane>
            )}

            <TabPane
              tab={
                <span>
                  <ClockCircleOutlined /> 操作记录 ({operationRecords.length})
                </span>
              }
              key="operations"
            >
              <div style={{ padding: '16px 0' }}>
                {operationRecords.length === 0 ? (
                  <div style={{ textAlign: 'center', padding: '40px 0', color: '#888' }}>
                    <ClockCircleOutlined style={{ fontSize: 48, marginBottom: 16 }} />
                    <p>暂无操作记录</p>
                  </div>
                ) : (
                  <div style={{ position: 'relative' }}>
                    {/* 时间线轴线 */}
                    <div
                      style={{
                        position: 'absolute',
                        left: '20px',
                        top: '0',
                        bottom: '0',
                        width: '2px',
                        backgroundColor: '#e8e8e8',
                      }}
                    />
                    {operationRecords.map((record, index) => {
                      const getOperationInfo = type => {
                        switch (type) {
                          case 'create':
                            return { color: '#52c41a', bgColor: '#f6ffed', label: '创建工单' };
                          case 'complete':
                            return { color: '#1890ff', bgColor: '#e6f7ff', label: '完成工单' };
                          case 'close':
                            return { color: '#8c8c8c', bgColor: '#f5f5f5', label: '关闭工单' };
                          case 'assign':
                            return { color: '#722ed1', bgColor: '#f9f0ff', label: '分配工单' };
                          case 'update':
                            return { color: '#fa8c16', bgColor: '#fff7e6', label: '更新工单' };
                          default:
                            return { color: '#fa8c16', bgColor: '#fff7e6', label: type };
                        }
                      };
                      const info = getOperationInfo(record.operationType);
                      return (
                        <div
                          key={index}
                          style={{
                            position: 'relative',
                            paddingLeft: '48px',
                            marginBottom: '24px',
                          }}
                        >
                          {/* 时间点圆点 */}
                          <div
                            style={{
                              position: 'absolute',
                              left: '12px',
                              top: '4px',
                              width: '16px',
                              height: '16px',
                              borderRadius: '50%',
                              backgroundColor: info.color,
                              border: '3px solid #fff',
                              boxShadow: '0 0 0 2px ' + info.color + '40',
                            }}
                          />
                          {/* 操作卡片 */}
                          <Card
                            size="small"
                            style={{
                              backgroundColor: info.bgColor,
                              border: 'none',
                              borderRadius: '8px',
                            }}
                            bodyStyle={{ padding: '12px 16px' }}
                          >
                            <div
                              style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'flex-start',
                                marginBottom: '8px',
                              }}
                            >
                              <Tag
                                color={info.color}
                                style={{
                                  fontSize: '12px',
                                  fontWeight: 500,
                                  border: 'none',
                                  margin: 0,
                                }}
                              >
                                {info.label}
                              </Tag>
                              <span style={{ color: '#666', fontSize: '12px' }}>
                                {dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss')}
                              </span>
                            </div>
                            <div style={{ marginBottom: '4px' }}>
                              <span style={{ color: '#666' }}>操作人：</span>
                              <span style={{ fontWeight: 500 }}>{record.operatorName || '-'}</span>
                            </div>
                            {record.operationDescription && (
                              <div
                                style={{
                                  marginTop: '8px',
                                  padding: '8px 12px',
                                  backgroundColor: '#fff',
                                  borderRadius: '4px',
                                  fontSize: '13px',
                                  color: '#333',
                                  lineHeight: '1.5',
                                }}
                              >
                                {record.operationDescription}
                              </div>
                            )}
                          </Card>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            </TabPane>
          </Tabs>
        )}
      </Modal>

      <TicketExportModal
        visible={exportModalVisible}
        onExport={handleExport}
        onCancel={() => setExportModalVisible(false)}
        selectedCount={selectedRowKeys.length}
        currentPageCount={tickets.length}
        totalCount={pagination.total}
      />
    </div>
  );
}

export default React.memo(TicketManagement);