<!--工单处置-->
<template>
  <div class="prototype-container">
    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <h2>🔧 故障工单处理系统</h2>
        <p>工单处理 · 故障记录 · 附件上传 · 闭环管理</p>
      </div>
      <div class="header-stats">
        <div class="stat-card pending">
          <span class="stat-value">{{ pendingCount }}</span>
          <span class="stat-label">待处理</span>
        </div>
        <div class="stat-card processing">
          <span class="stat-value">{{ processingCount }}</span>
          <span class="stat-label">处理中</span>
        </div>
        <div class="stat-card completed">
          <span class="stat-value">{{ completedCount }}</span>
          <span class="stat-label">已完成</span>
        </div>
      </div>
    </div>

    <div class="main-layout">
      <!-- 左侧：工单列表 -->
      <div class="left-panel">
        <div class="card">
          <div class="card-header">
            📋 我的工单列表
            <div class="filter-bar">
              <select v-model="filterStatus" class="filter-select">
                <option value="">全部状态</option>
                <option value="pending">待处理</option>
                <option value="processing">处理中</option>
                <option value="completed">已完成</option>
              </select>
              <input type="text" v-model="searchKeyword" class="search-input" placeholder="搜索工单号/设备">
              <button @click="searchOrders" class="btn-primary btn-sm">查询</button>
            </div>
          </div>
          <div class="card-body">
            <div class="order-list">
              <div v-for="order in paginatedOrders" :key="order.id" class="order-item" :class="order.status">
                <div class="order-header">
                  <div class="order-id">
                    <span class="order-no">{{ order.orderNo }}</span>
                    <span class="order-type" :class="order.priority === 'urgent' ? 'type-urgent' : 'type-normal'">
                      {{ order.priority === 'urgent' ? '紧急' : '普通' }}
                    </span>
                  </div>
                  <div class="order-status" :class="getStatusClass(order.status)">
                    {{ getStatusText(order.status) }}
                  </div>
                </div>
                <div class="order-device">
                  <span class="label">设备：</span>
                  <span class="value">{{ order.deviceName }}</span>
                  <span class="label">位置：</span>
                  <span class="value">{{ order.location }}</span>
                </div>
                <div class="order-desc">
                  <span class="label">故障描述：</span>
                  <span class="value">{{ order.description }}</span>
                </div>
                <div class="order-time">
                  <span class="label">故障时间：</span>
                  <span class="value">{{ order.faultTime }}</span>
                </div>
                <div class="order-actions">
                  <button v-if="order.status === 'pending'" @click="startProcess(order)" class="btn-start">开始处理</button>
                  <button v-if="order.status === 'processing'" @click="openProcessModal(order)" class="btn-process">处理反馈</button>
                  <button @click="viewOrderDetail(order)" class="btn-view">查看详情</button>
                </div>
              </div>
              <div v-if="filteredOrders.length === 0" class="empty-order">
                暂无工单数据
              </div>
            </div>
            <div class="pagination" v-if="totalPages > 1">
              <button v-for="page in totalPages" :key="page" class="page-btn" :class="{ active: currentPage === page }"
                      @click="currentPage = page">{{ page }}</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：工单处理面板 -->
      <div class="right-panel">
        <div class="card" v-if="currentProcessingOrder">
          <div class="card-header">
            🔧 工单处理
            <span class="order-badge">{{ currentProcessingOrder.orderNo }}</span>
          </div>
          <div class="card-body">
            <div class="process-info">
              <div class="info-row"><span class="label">设备名称：</span>{{ currentProcessingOrder.deviceName }}</div>
              <div class="info-row"><span class="label">设备位置：</span>{{ currentProcessingOrder.location }}</div>
              <div class="info-row"><span class="label">故障描述：</span>{{ currentProcessingOrder.description }}</div>
              <div class="info-row"><span class="label">故障时间：</span>{{ currentProcessingOrder.faultTime }}</div>
            </div>

            <div class="process-form">
              <div class="form-title">处理反馈信息</div>
              <div class="form-row">
                <div class="form-group half">
                  <label class="form-label">故障类型 *</label>
                  <select v-model="processData.faultType" class="form-select">
                    <option value="">请选择</option>
                    <option value="硬件故障">硬件故障</option>
                    <option value="软件故障">软件故障</option>
                    <option value="通信故障">通信故障</option>
                    <option value="电源故障">电源故障</option>
                    <option value="传感器故障">传感器故障</option>
                    <option value="线路故障">线路故障</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
                <div class="form-group half">
                  <label class="form-label">处理时间 *</label>
                  <input type="datetime-local" v-model="processData.processTime" class="form-input">
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">故障原因 *</label>
                <textarea v-model="processData.faultReason" class="form-textarea" rows="2" placeholder="请详细描述故障原因..."></textarea>
              </div>
              <div class="form-row">
                <div class="form-group half">
                  <label class="form-label">处理人员 *</label>
                  <input v-model="processData.handler" class="form-input" placeholder="处理人员姓名">
                </div>
                <div class="form-group half">
                  <label class="form-label">联系方式 *</label>
                  <input v-model="processData.contact" class="form-input" placeholder="联系电话">
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">处理措施</label>
                <textarea v-model="processData.processMeasure" class="form-textarea" rows="2" placeholder="请描述处理措施..."></textarea>
              </div>
              <div class="form-group">
                <label class="form-label">附件上传</label>
                <div class="upload-area">
                  <label class="upload-btn">
                    📎 选择图片/文件
                    <input type="file" @change="handleFileUpload" accept="image/*,.pdf,.doc" hidden multiple>
                  </label>
                  <div class="file-list">
                    <div v-for="(file, idx) in uploadedFiles" :key="idx" class="file-item">
                      <img v-if="file.type?.startsWith('image/')" :src="file.preview" class="file-preview">
                      <span class="file-name">{{ file.name }}</span>
                      <button @click="removeFile(idx)" class="remove-file">✖</button>
                    </div>
                  </div>
                  <div class="upload-hint">支持上传图片、PDF、Word文档，最多5个文件</div>
                </div>
              </div>
              <div class="form-actions">
                <button @click="cancelProcess" class="btn-outline">取消</button>
                <button @click="submitProcess" class="btn-primary">提交处理</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 未选择工单时的提示 -->
        <div class="card" v-else>
          <div class="card-header">
            🔧 工单处理
          </div>
          <div class="card-body">
            <div class="empty-process">
              <div class="empty-icon">🔧</div>
              <div>请从左侧选择待处理的工单</div>
              <div class="empty-hint">点击「开始处理」或「处理反馈」按钮</div>
            </div>
          </div>
        </div>

        <!-- 已完成工单详情展示 -->
        <div class="card" v-if="selectedCompletedOrder">
          <div class="card-header">
            ✅ 已完成工单详情
            <span class="order-badge">{{ selectedCompletedOrder.orderNo }}</span>
          </div>
          <div class="card-body">
            <div class="completed-info">
              <div class="info-group">
                <div class="group-title">基本信息</div>
                <div class="info-row"><span class="label">设备名称：</span>{{ selectedCompletedOrder.deviceName }}</div>
                <div class="info-row"><span class="label">设备位置：</span>{{ selectedCompletedOrder.location }}</div>
                <div class="info-row"><span class="label">故障描述：</span>{{ selectedCompletedOrder.description }}</div>
              </div>
              <div class="info-group">
                <div class="group-title">处理信息</div>
                <div class="info-row"><span class="label">故障类型：</span>{{ selectedCompletedOrder.faultType || '-' }}</div>
                <div class="info-row"><span class="label">故障原因：</span>{{ selectedCompletedOrder.faultReason || '-' }}</div>
                <div class="info-row"><span class="label">处理措施：</span>{{ selectedCompletedOrder.processMeasure || '-' }}</div>
                <div class="info-row"><span class="label">处理人员：</span>{{ selectedCompletedOrder.handler }}</div>
                <div class="info-row"><span class="label">联系方式：</span>{{ selectedCompletedOrder.contact }}</div>
                <div class="info-row"><span class="label">处理时间：</span>{{ selectedCompletedOrder.processTime }}</div>
                <div class="info-row"><span class="label">完成时间：</span>{{ selectedCompletedOrder.completeTime }}</div>
              </div>
              <div class="info-group" v-if="selectedCompletedOrder.attachments?.length">
                <div class="group-title">附件资料</div>
                <div class="attachment-list">
                  <div v-for="(att, idx) in selectedCompletedOrder.attachments" :key="idx" class="attachment-item">
                    <img v-if="att.type?.startsWith('image/')" :src="att.preview" class="attachment-img">
                    <span class="attachment-name">{{ att.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理反馈模态框（备用） -->
    <div v-if="processModalVisible" class="modal-overlay" @click.self="closeProcessModal">
      <div class="modal-content" style="width:600px;">
        <h3>🔧 工单处理反馈</h3>
        <div class="order-summary">
          <div><span class="label">工单号：</span>{{ currentOrder?.orderNo }}</div>
          <div><span class="label">设备：</span>{{ currentOrder?.deviceName }}</div>
        </div>
        <div class="process-form-modal">
          <div class="form-row">
            <div class="form-group half">
              <label class="form-label">故障类型 *</label>
              <select v-model="modalProcessData.faultType" class="form-select">
                <option value="">请选择</option>
                <option value="硬件故障">硬件故障</option>
                <option value="软件故障">软件故障</option>
                <option value="通信故障">通信故障</option>
                <option value="电源故障">电源故障</option>
                <option value="传感器故障">传感器故障</option>
                <option value="线路故障">线路故障</option>
              </select>
            </div>
            <div class="form-group half">
              <label class="form-label">处理时间 *</label>
              <input type="datetime-local" v-model="modalProcessData.processTime" class="form-input">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">故障原因 *</label>
            <textarea v-model="modalProcessData.faultReason" class="form-textarea" rows="2" placeholder="请详细描述故障原因..."></textarea>
          </div>
          <div class="form-row">
            <div class="form-group half">
              <label class="form-label">处理人员 *</label>
              <input v-model="modalProcessData.handler" class="form-input">
            </div>
            <div class="form-group half">
              <label class="form-label">联系方式 *</label>
              <input v-model="modalProcessData.contact" class="form-input">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">处理措施</label>
            <textarea v-model="modalProcessData.processMeasure" class="form-textarea" rows="2"></textarea>
          </div>
          <div class="form-group">
            <label class="form-label">附件上传</label>
            <div class="upload-area">
              <label class="upload-btn">
                📎 上传文件
                <input type="file" @change="handleModalFileUpload" accept="image/*,.pdf" hidden multiple>
              </label>
              <div class="file-list">
                <span v-for="(file, idx) in modalUploadedFiles" :key="idx" class="file-tag">
                  {{ file.name }}
                  <button @click="removeModalFile(idx)" class="remove-file">✖</button>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="form-actions">
          <button @click="closeProcessModal" class="btn-outline">取消</button>
          <button @click="submitModalProcess" class="btn-primary">提交处理</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// ==================== 工单数据 ====================
const orders = ref([
  {
    id: 1, orderNo: 'WO-20250508-001', priority: 'urgent', deviceName: '压力传感器-PS001', location: '城东泵站',
    description: '设备离线，数据上报异常，超过30分钟未回传', faultTime: '2025-05-08 09:23:15',
    status: 'pending', assignedTo: '张工'
  },
  {
    id: 2, orderNo: 'WO-20250508-002', priority: 'normal', deviceName: '泄漏检测仪-LD005', location: '化工园区',
    description: '可燃气浓度超阈值报警，需现场核查', faultTime: '2025-05-08 07:30:22',
    status: 'processing', assignedTo: '李工',
    faultType: '传感器故障', faultReason: '传感器灵敏度漂移', processMeasure: '已重新校准传感器',
    handler: '李工', contact: '13800002222', processTime: '2025-05-08 10:30:00'
  },
  {
    id: 3, orderNo: 'WO-20250507-003', priority: 'normal', deviceName: '水位监测仪-WL006', location: '东区排水口',
    description: '水位数据异常波动，需校准', faultTime: '2025-05-07 14:20:33',
    status: 'completed', assignedTo: '王工',
    faultType: '硬件故障', faultReason: '传感器进水导致读数异常', processMeasure: '更换传感器，已恢复正常',
    handler: '王工', contact: '13800003333', processTime: '2025-05-07 16:30:00', completeTime: '2025-05-07 17:00:00',
    attachments: [{ name: '维修现场.jpg', type: 'image/jpeg', preview: null }]
  },
  {
    id: 4, orderNo: 'WO-20250508-004', priority: 'normal', deviceName: '流量传感器-FL002', location: '城南枢纽',
    description: '流量数据中断，设备可能离线', faultTime: '2025-05-08 06:15:00',
    status: 'pending', assignedTo: '张工'
  }
])

// 当前正在处理的工单
const currentProcessingOrder = ref(null)
const selectedCompletedOrder = ref(null)

// 处理表单数据
const processData = ref({
  faultType: '',
  processTime: '',
  faultReason: '',
  handler: '',
  contact: '',
  processMeasure: ''
})
const uploadedFiles = ref([])

// 模态框相关
const processModalVisible = ref(false)
const currentOrder = ref(null)
const modalProcessData = ref({
  faultType: '',
  processTime: '',
  faultReason: '',
  handler: '',
  contact: '',
  processMeasure: ''
})
const modalUploadedFiles = ref([])

// 筛选参数
const filterStatus = ref('')
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = 5

// 过滤后的工单
const filteredOrders = computed(() => {
  let result = [...orders.value]
  if (filterStatus.value) {
    result = result.filter(o => o.status === filterStatus.value)
  }
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase()
    result = result.filter(o => o.orderNo.toLowerCase().includes(kw) || o.deviceName.toLowerCase().includes(kw))
  }
  // 按故障时间倒序
  return result.sort((a, b) => new Date(b.faultTime) - new Date(a.faultTime))
})

const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return filteredOrders.value.slice(start, start + pageSize)
})

const totalPages = computed(() => Math.ceil(filteredOrders.value.length / pageSize))

// 统计数据
const pendingCount = computed(() => orders.value.filter(o => o.status === 'pending').length)
const processingCount = computed(() => orders.value.filter(o => o.status === 'processing').length)
const completedCount = computed(() => orders.value.filter(o => o.status === 'completed').length)

// ==================== 辅助函数 ====================
const getStatusText = (status) => {
  const map = { pending: '待处理', processing: '处理中', completed: '已完成' }
  return map[status] || status
}

const getStatusClass = (status) => {
  const map = { pending: 'status-pending', processing: 'status-processing', completed: 'status-completed' }
  return map[status] || ''
}

// ==================== 工单操作 ====================
const startProcess = (order) => {
  order.status = 'processing'
  currentProcessingOrder.value = order
  // 预填处理人员信息
  processData.value = {
    faultType: '',
    processTime: new Date().toISOString().slice(0, 16),
    faultReason: '',
    handler: order.assignedTo || '',
    contact: '',
    processMeasure: ''
  }
  uploadedFiles.value = []
  selectedCompletedOrder.value = null
}

const openProcessModal = (order) => {
  currentOrder.value = order
  currentProcessingOrder.value = order
  modalProcessData.value = {
    faultType: order.faultType || '',
    processTime: new Date().toISOString().slice(0, 16),
    faultReason: order.faultReason || '',
    handler: order.assignedTo || '',
    contact: order.contact || '',
    processMeasure: order.processMeasure || ''
  }
  modalUploadedFiles.value = order.attachments || []
  processModalVisible.value = true
  selectedCompletedOrder.value = null
}

const closeProcessModal = () => {
  processModalVisible.value = false
  currentOrder.value = null
}

// 处理附件上传（右侧面板）
const handleFileUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    const reader = new FileReader()
    reader.onload = (e) => {
      uploadedFiles.value.push({
        name: file.name,
        size: file.size,
        type: file.type,
        preview: file.type.startsWith('image/') ? e.target.result : null,
        file: file
      })
    }
    reader.readAsDataURL(file)
  })
}

const removeFile = (idx) => {
  uploadedFiles.value.splice(idx, 1)
}

// 处理附件上传（模态框）
const handleModalFileUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    modalUploadedFiles.value.push({
      name: file.name,
      size: file.size,
      type: file.type,
      file: file
    })
  })
}

const removeModalFile = (idx) => {
  modalUploadedFiles.value.splice(idx, 1)
}

// 提交处理（右侧面板）
const submitProcess = () => {
  if (!processData.value.faultType) {
    alert('请选择故障类型')
    return
  }
  if (!processData.value.processTime) {
    alert('请填写处理时间')
    return
  }
  if (!processData.value.faultReason) {
    alert('请填写故障原因')
    return
  }
  if (!processData.value.handler) {
    alert('请填写处理人员')
    return
  }
  if (!processData.value.contact) {
    alert('请填写联系方式')
    return
  }

  const order = currentProcessingOrder.value
  order.status = 'completed'
  order.faultType = processData.value.faultType
  order.faultReason = processData.value.faultReason
  order.processMeasure = processData.value.processMeasure
  order.handler = processData.value.handler
  order.contact = processData.value.contact
  order.processTime = processData.value.processTime.replace('T', ' ')
  order.completeTime = new Date().toLocaleString()
  order.attachments = [...uploadedFiles.value]

  alert(`工单 ${order.orderNo} 处理完成！`)
  currentProcessingOrder.value = null
  selectedCompletedOrder.value = order
}

// 提交处理（模态框）
const submitModalProcess = () => {
  if (!modalProcessData.value.faultType) {
    alert('请选择故障类型')
    return
  }
  if (!modalProcessData.value.processTime) {
    alert('请填写处理时间')
    return
  }
  if (!modalProcessData.value.faultReason) {
    alert('请填写故障原因')
    return
  }
  if (!modalProcessData.value.handler) {
    alert('请填写处理人员')
    return
  }
  if (!modalProcessData.value.contact) {
    alert('请填写联系方式')
    return
  }

  const order = currentOrder.value
  order.status = 'completed'
  order.faultType = modalProcessData.value.faultType
  order.faultReason = modalProcessData.value.faultReason
  order.processMeasure = modalProcessData.value.processMeasure
  order.handler = modalProcessData.value.handler
  order.contact = modalProcessData.value.contact
  order.processTime = modalProcessData.value.processTime.replace('T', ' ')
  order.completeTime = new Date().toLocaleString()
  order.attachments = [...modalUploadedFiles.value]

  alert(`工单 ${order.orderNo} 处理完成！`)
  closeProcessModal()
  currentProcessingOrder.value = null
  selectedCompletedOrder.value = order
}

const cancelProcess = () => {
  currentProcessingOrder.value = null
}

// 查看工单详情
const viewOrderDetail = (order) => {
  if (order.status === 'completed') {
    selectedCompletedOrder.value = order
    currentProcessingOrder.value = null
  } else {
    alert(`工单状态：${getStatusText(order.status)}`)
  }
}

// 搜索
const searchOrders = () => {
  currentPage.value = 1
}

// 初始化默认选中第一个待处理工单
onMounted(() => {
  const pendingOrder = orders.value.find(o => o.status === 'pending')
  if (pendingOrder) {
    // 不自动开始处理，只是展示
  }
})
</script>

<style scoped>
* { margin: 0; padding: 0; box-sizing: border-box; }

.prototype-container {
  max-width: 1600px;
  margin: 0 auto;
  background: #f0f4f8;
  border-radius: 28px;
  box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 头部 */
.header {
  background: #0a2b3c;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 3px solid #e67e22;
}

.logo h2 { color: white; font-weight: 600; font-size: 1.3rem; }
.logo p { color: #bdd8e8; font-size: 0.7rem; }

.header-stats { display: flex; gap: 12px; }
.stat-card { background: rgba(255,255,255,0.15); padding: 6px 14px; border-radius: 40px; text-align: center; color: white; }
.stat-card.pending { background: #f39c12; }
.stat-card.processing { background: #3498db; }
.stat-card.completed { background: #27ae60; }
.stat-value { font-weight: 700; font-size: 1.2rem; margin-right: 6px; }
.stat-label { font-size: 0.65rem; opacity: 0.9; }

/* 布局 */
.main-layout { display: flex; flex-wrap: wrap; }
.left-panel { width: 500px; background: #f9fbfd; padding: 20px; }
.right-panel { flex: 1; background: #ffffff; padding: 20px; min-width: 480px; }

/* 卡片 */
.card { background: white; border-radius: 20px; border: 1px solid #e6edf3; margin-bottom: 20px; overflow: hidden; }
.card-header { background: #f9fafc; padding: 14px 18px; border-bottom: 1px solid #eef2f6; font-weight: 700; font-size: 0.85rem; color: #1d5a78; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.card-body { padding: 16px; }

/* 筛选栏 */
.filter-bar { display: flex; gap: 10px; align-items: center; }
.filter-select, .search-input { padding: 6px 12px; border-radius: 20px; border: 1px solid #cbdde6; font-size: 0.7rem; }
.search-input { width: 150px; }
.btn-primary, .btn-outline, .btn-sm { padding: 5px 12px; border-radius: 30px; font-size: 0.7rem; cursor: pointer; }
.btn-primary { background: #e67e22; border: none; color: white; }
.btn-primary:hover { background: #d35400; }
.btn-outline { background: white; border: 1px solid #e67e22; color: #e67e22; }

/* 工单列表 */
.order-list { max-height: 550px; overflow-y: auto; }
.order-item { background: white; border-radius: 16px; padding: 14px; margin-bottom: 12px; border: 1px solid #eef2f6; transition: 0.2s; }
.order-item.pending { border-left: 4px solid #f39c12; }
.order-item.processing { border-left: 4px solid #3498db; background: #f0f8ff; }
.order-item.completed { border-left: 4px solid #27ae60; background: #f0fff4; }
.order-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.order-id { display: flex; gap: 10px; align-items: center; }
.order-no { font-family: monospace; font-weight: 700; font-size: 0.8rem; color: #e67e22; }
.order-type { font-size: 0.6rem; padding: 2px 8px; border-radius: 20px; }
.type-urgent { background: #fee2e2; color: #e74c3c; }
.type-normal { background: #e3f2fd; color: #3498db; }
.order-status { font-size: 0.65rem; padding: 2px 10px; border-radius: 20px; }
.status-pending { background: #fef3c7; color: #f39c12; }
.status-processing { background: #e3f2fd; color: #3498db; }
.status-completed { background: #d5f5e3; color: #27ae60; }
.order-device, .order-desc, .order-time { font-size: 0.7rem; margin-bottom: 6px; }
.label { color: #6f8ea8; margin-right: 4px; }
.value { color: #2c5a72; }
.order-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-start { background: #27ae60; color: white; border: none; padding: 4px 12px; border-radius: 20px; font-size: 0.65rem; cursor: pointer; }
.btn-process { background: #3498db; color: white; border: none; padding: 4px 12px; border-radius: 20px; font-size: 0.65rem; cursor: pointer; }
.btn-view { background: #95a5a6; color: white; border: none; padding: 4px 12px; border-radius: 20px; font-size: 0.65rem; cursor: pointer; }
.empty-order { text-align: center; padding: 40px; color: #8aaec2; }

/* 分页 */
.pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.page-btn { background: white; border: 1px solid #cbdde6; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; cursor: pointer; }
.page-btn.active { background: #e67e22; color: white; border-color: #e67e22; }

/* 处理面板 */
.process-info { background: #f8fafc; border-radius: 16px; padding: 12px; margin-bottom: 20px; }
.process-info .info-row { font-size: 0.75rem; margin-bottom: 6px; }
.process-info .label { font-weight: 600; width: 80px; display: inline-block; }
.process-form { margin-top: 8px; }
.form-title { font-weight: 600; font-size: 0.8rem; color: #2c5a72; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #eef2f6; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.form-group { margin-bottom: 12px; }
.form-group.half { flex: 1; }
.form-label { font-size: 0.7rem; font-weight: 600; margin-bottom: 4px; display: block; color: #2c5a72; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid #cbdde6; font-size: 0.75rem; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* 上传区域 */
.upload-area { border: 1px dashed #cbdde6; border-radius: 12px; padding: 12px; background: #fafcfd; }
.upload-btn { background: #3498db; color: white; padding: 6px 14px; border-radius: 30px; font-size: 0.7rem; cursor: pointer; display: inline-block; }
.file-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.file-item { display: flex; flex-direction: column; align-items: center; width: 80px; background: #f8fafc; border-radius: 8px; padding: 8px; position: relative; }
.file-preview { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.file-name { font-size: 0.6rem; color: #2c5a72; text-align: center; word-break: break-all; }
.remove-file { position: absolute; top: -6px; right: -6px; background: #e74c3c; color: white; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; cursor: pointer; }
.upload-hint { font-size: 0.6rem; color: #8aaec2; margin-top: 8px; }
.file-tag { background: #eef2fa; padding: 4px 8px; border-radius: 20px; font-size: 0.65rem; display: inline-flex; align-items: center; gap: 6px; }

/* 已完成工单详情 */
.completed-info { padding: 8px; }
.info-group { margin-bottom: 20px; }
.group-title { font-weight: 600; font-size: 0.75rem; color: #2c5a72; margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid #eef2f6; }
.info-row { font-size: 0.7rem; margin-bottom: 8px; }
.info-row .label { font-weight: 600; width: 80px; display: inline-block; color: #6f8ea8; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 12px; }
.attachment-item { display: flex; flex-direction: column; align-items: center; width: 80px; }
.attachment-img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid #eef2f6; }
.attachment-name { font-size: 0.6rem; color: #6f8ea8; margin-top: 4px; text-align: center; }

.empty-process { text-align: center; padding: 60px 20px; color: #8aaec2; }
.empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty-hint { font-size: 0.65rem; margin-top: 8px; }
.order-badge { font-size: 0.65rem; background: #eef2fa; padding: 2px 10px; border-radius: 20px; font-weight: normal; }

/* 模态框 */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; border-radius: 24px; width: 550px; max-width: 90%; padding: 24px; max-height: 85vh; overflow-y: auto; }
.order-summary { background: #f8fafc; border-radius: 12px; padding: 12px; margin-bottom: 16px; font-size: 0.7rem; }
.process-form-modal { margin-top: 8px; }
</style>