yunrui_asset/frontend/src/pages/TicketManagement.jsx

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,
} from '@ant-design/icons';
import axios from 'axios';
import dayjs from 'dayjs';
import { useSearchParams } from 'react-router-dom';
import { debounce, getUserFromStorage } from '../utils/common';

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: '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 [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 [deviceSource, setDeviceSource] = useState('select');
  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 = { pageSize: 50 };
      if (keyword && keyword.trim()) {
        params.keyword = keyword.trim();
      }
      const response = await axios.get('/api/devices', { 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 sortedFields = response.data.sort((a, b) => a.order - b.order);
      setTicketFields(sortedFields);
    } 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);
      setDeviceSource('select');
      setModalVisible(true);

      // 填充设备信息 - 使用 setTimeout 确保弹窗打开后再设置表单值
      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}`} />;
          break;
        case 'number':
          formItem = (
            <InputNumber
              placeholder={placeholder || `请输入${displayName}`}
              style={{ width: '100%' }}
            />
          );
          break;
        case 'textarea':
          formItem = (
            <Input.TextArea rows={3} placeholder={placeholder || `请输入${displayName}`} />
          );
          break;
        case 'boolean':
          formItem = <Switch />;
          break;
        case 'date':
          formItem = <DatePicker style={{ width: '100%' }} />;
          break;
        case 'datetime':
          formItem = <DatePicker showTime style={{ width: '100%' }} />;
          break;
        case 'select':
          const selectOptions = options && Array.isArray(options) ? options : [];
          formItem = (
            <Select placeholder={placeholder || `请选择${displayName}`}>
              {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();
                }
              }}
            >
              {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}`} />;
      }

      return (
        <Form.Item key={fieldName} name={fieldName} label={displayName} rules={rules}>
          {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) {
      const ticketData = { ...ticket };
      if (ticketData.expectedCompletionDate) {
        ticketData.expectedCompletionDate = dayjs(ticketData.expectedCompletionDate);
      }
      if (ticketData.completionDate) {
        ticketData.completionDate = dayjs(ticketData.completionDate);
      }
      if (ticket.deviceId) {
        setDeviceSource('select');
        ticketData.deviceId = ticket.deviceId;
      } else {
        setDeviceSource('manual');
        ticketData.deviceName = ticket.deviceName;
        ticketData.serialNumber = ticket.serialNumber;
      }
      if (ticket.metadata && typeof ticket.metadata === 'object') {
        Object.entries(ticket.metadata).forEach(([key, value]) => {
          ticketData[key] = value;
        });
      }
      form.setFieldsValue(ticketData);
    } else {
      form.resetFields();
      setDeviceSource('select');
      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 (deviceSource === 'manual') {
          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 || localStorage.getItem('userId') || 'USER001';
          ticketData.reporterName = user.username || '系统用户';
          await axios.post('/api/tickets', ticketData);
          message.success('工单创建成功');
        }

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

  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: localStorage.getItem('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: localStorage.getItem('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 handleTableChange = useCallback(
    paginationInfo => {
      setPagination(paginationInfo);
      fetchTickets(paginationInfo.current, paginationInfo.pageSize, searchFilters);
    },
    [fetchTickets, searchFilters]
  );

  const handleDeviceSourceChange = useCallback(value => {
    setDeviceSource(value);
  }, []);

  const renderDeviceFormItems = useCallback(() => {
    if (deviceSource === 'select') {
      return (
        <Form.Item name="deviceId" label="关联设备" rules={[{ required: false }]}>
          <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>
      );
    }
    return (
      <>
        <Form.Item
          name="deviceName"
          label="设备名称"
          rules={[{ required: true, message: '请输入设备名称' }]}
        >
          <Input placeholder="请输入设备名称" />
        </Form.Item>
        <Form.Item
          name="serialNumber"
          label="设备序列号"
          rules={[{ required: true, message: '请输入设备序列号' }]}
        >
          <Input placeholder="请输入设备序列号" />
        </Form.Item>
      </>
    );
  }, [deviceSource, devices, deviceSearching, handleDeviceSearch, fetchDevices]);

  const renderFormItems = useCallback(() => {
    const items = [];
    if (!editingTicket) {
      items.push(
        <Form.Item key="ticketId" name="ticketId" label="工单编号">
          <Input placeholder="自动生成" disabled style={{ background: '#f5f5f5' }} />
        </Form.Item>
      );
    }
    
    // 检查 ticketFields 是否包含 deviceId
    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={deviceSource}
                onChange={handleDeviceSourceChange}
                style={{ width: 200 }}
              >
                <Option value="select">从设备管理选择</Option>
                <Option value="manual">手动输入</Option>
              </Select>
            </Form.Item>
            {renderDeviceFormItems()}
          </React.Fragment>
        );
      } else if (field.fieldName === 'deviceName' || field.fieldName === 'serialNumber') {
        // 如果存在 deviceId 字段，这些字段会在 renderDeviceFormItems 中处理
        // 如果不存在 deviceId 字段但存在 deviceName，则显示手动输入模式
        if (!hasDeviceIdField && field.fieldName === 'deviceName') {
          items.push(
            <React.Fragment key="deviceSource">
              <Form.Item label="设备来源" required>
                <Select
                  value={deviceSource}
                  onChange={handleDeviceSourceChange}
                  style={{ width: 200 }}
                >
                  <Option value="select">从设备管理选择</Option>
                  <Option value="manual">手动输入</Option>
                </Select>
              </Form.Item>
              {renderDeviceFormItems()}
            </React.Fragment>
          );
        }
      } else {
        items.push(renderFormItem(field));
      }
    });
    
    // 如果 ticketFields 中既没有 deviceId 也没有 deviceName，则手动添加设备选择器
    if (!hasDeviceIdField && !hasDeviceNameField) {
      items.push(
        <React.Fragment key="deviceSource">
          <Form.Item label="设备来源" required>
            <Select
              value={deviceSource}
              onChange={handleDeviceSourceChange}
              style={{ width: 200 }}
            >
              <Option value="select">从设备管理选择</Option>
              <Option value="manual">手动输入</Option>
            </Select>
          </Form.Item>
          {renderDeviceFormItems()}
        </React.Fragment>
      );
    }
    
    return items;
  }, [
    ticketFields,
    deviceSource,
    devices,
    handleDeviceSourceChange,
    renderDeviceFormItems,
    renderFormItem,
    editingTicket,
  ]);

  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={
          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
            创建工单
          </Button>
        }
      >
        <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 }}
          columnsState={{
            onChange: ({ visibleColumns }) => {
              localStorage.setItem('ticketVisibleColumns', JSON.stringify(visibleColumns));
            },
          }}
        />
      </Card>

      <Modal
        title={editingTicket ? '编辑工单' : '创建工单'}
        open={modalVisible}
        onCancel={handleCancel}
        footer={null}
        width={700}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          {renderFormItems()}
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                {editingTicket ? '更新' : '创建'}
              </Button>
              <Button onClick={handleCancel}>取消</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="处理工单"
        open={processingModalVisible}
        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}
        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>
    </div>
  );
}

export default React.memo(TicketManagement);