<!--工单列表-->
<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">
            🚨 实时故障监控
            <span class="live-badge">● 自动监测中</span>
          </div>
          <div class="card-body">
            <div class="fault-monitor">
              <div class="monitor-list">
                <div v-for="fault in recentFaults" :key="fault.id" class="fault-item" :class="{ new: fault.isNew }">
                  <div class="fault-time">{{ fault.time }}</div>
                  <div class="fault-device">{{ fault.deviceName }}</div>
                  <div class="fault-message">{{ fault.message }}</div>
                  <div class="fault-order-status">
                    <span v-if="fault.orderCreated" class="order-created">✅ 工单已生成</span>
                    <span v-else class="order-creating">⏳ 正在生成工单...</span>
                  </div>
                </div>
                <div v-if="recentFaults.length === 0" class="empty-fault">
                  暂无实时故障，系统运行正常
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 手动新增工单 -->
        <div class="card">
          <div class="card-header">
            ➕ 手动新增故障工单
            <button @click="openAddModal" class="btn-primary btn-sm">+ 新增工单</button>
          </div>
          <div class="card-body" v-if="showAddForm">
            <div class="add-form">
              <div class="form-row">
                <div class="form-group half">
                  <label class="form-label">设备类型 *</label>
                  <select v-model="newOrder.deviceType" class="form-select">
                    <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">设备ID *</label>
                  <input v-model="newOrder.deviceId" class="form-input" placeholder="如: PS-001">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group half">
                  <label class="form-label">设备位置 *</label>
                  <input v-model="newOrder.location" class="form-input" placeholder="设备安装位置">
                </div>
                <div class="form-group half">
                  <label class="form-label">设备厂家</label>
                  <input v-model="newOrder.manufacturer" class="form-input" placeholder="设备生产厂家">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group half">
                  <label class="form-label">维护人员 *</label>
                  <select v-model="newOrder.maintainer" class="form-select">
                    <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 v-model="newOrder.contact" class="form-input" placeholder="维护人员电话">
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">故障时间 *</label>
                <input type="datetime-local" v-model="newOrder.faultTime" class="form-input">
              </div>
              <div class="form-group">
                <label class="form-label">故障描述 *</label>
                <textarea v-model="newOrder.description" class="form-textarea" rows="2" placeholder="请描述故障现象..."></textarea>
              </div>
              <div class="form-actions">
                <button @click="cancelAdd" class="btn-outline">取消</button>
                <button @click="submitManualOrder" class="btn-primary">提交工单</button>
              </div>
            </div>
          </div>
          <div class="card-body" v-else>
            <div class="empty-add" @click="openAddModal">
              <span class="add-icon">+</span>
              <span>点击新增故障工单</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：工单列表 -->
      <div class="right-panel">
        <div class="card">
          <div class="card-header">
            📋 设备故障工单列表
            <span class="list-count">共 {{ filteredOrders.length }} 条记录</span>
          </div>
          <div class="card-body">
            <!-- 查询筛选栏 -->
            <div class="filter-bar">
              <select v-model="queryParams.deviceType" class="filter-select">
                <option value="">设备类型</option>
                <option value="压力传感器">压力传感器</option>
                <option value="流量传感器">流量传感器</option>
                <option value="温度传感器">温度传感器</option>
                <option value="泄漏检测仪">泄漏检测仪</option>
              </select>
              <input type="text" v-model="queryParams.deviceId" class="filter-input" placeholder="设备ID">
              <input type="date" v-model="queryParams.startDate" class="filter-input" placeholder="开始日期">
              <span class="filter-sep">至</span>
              <input type="date" v-model="queryParams.endDate" class="filter-input" placeholder="结束日期">
              <button @click="searchOrders" class="btn-primary btn-sm">查询</button>
              <button @click="resetQuery" class="btn-outline btn-sm">重置</button>
            </div>

            <!-- 工单表格 -->
            <div class="order-table-wrapper">
              <table class="data-table">
                <thead>
                <tr>
                  <th>工单编号</th>
                  <th>设备类型</th>
                  <th>设备ID</th>
                  <th>设备位置</th>
                  <th>故障描述</th>
                  <th>故障时间</th>
                  <th>维护人员</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="order in paginatedOrders" :key="order.id">
                  <td class="order-no">{{ order.orderNo }}</td>
                  <td>{{ order.deviceType }}</td>
                  <td>{{ order.deviceId }}</td>
                  <td>{{ order.location }}</td>
                  <td class="desc-cell">{{ order.description }}</td>
                  <td class="time-cell">{{ order.faultTime }}</td>
                  <td>{{ order.maintainer }}</td>
                  <td>
                      <span class="status-badge" :class="getStatusClass(order.status)">
                        {{ getStatusText(order.status) }}
                      </span>
                  </td>
                  <td class="action-cell">
                    <button @click="viewOrderDetail(order)" class="btn-view">查看</button>
                    <button v-if="order.status === 'pending'" @click="updateStatus(order, 'processing')" class="btn-start">开始处理</button>
                    <button v-if="order.status === 'processing'" @click="completeOrder(order)" class="btn-complete">完成</button>
                  </td>
                </tr>
                <tr v-if="filteredOrders.length === 0">
                  <td colspan="9" class="empty-row">暂无工单数据</td>
                </tr>
                </tbody>
              </table>
            </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>

    <!-- 工单详情模态框 -->
    <div v-if="detailModalVisible" class="modal-overlay" @click.self="closeDetailModal">
      <div class="modal-content">
        <h3>📋 工单详细信息</h3>
        <div class="detail-info">
          <div class="info-row"><span class="label">工单编号：</span>{{ currentOrder?.orderNo }}</div>
          <div class="info-row"><span class="label">设备类型：</span>{{ currentOrder?.deviceType }}</div>
          <div class="info-row"><span class="label">设备ID：</span>{{ currentOrder?.deviceId }}</div>
          <div class="info-row"><span class="label">设备位置：</span>{{ currentOrder?.location }}</div>
          <div class="info-row"><span class="label">设备厂家：</span>{{ currentOrder?.manufacturer || '-' }}</div>
          <div class="info-row"><span class="label">维护人员：</span>{{ currentOrder?.maintainer }}</div>
          <div class="info-row"><span class="label">联系方式：</span>{{ currentOrder?.contact || '-' }}</div>
          <div class="info-row"><span class="label">故障时间：</span>{{ currentOrder?.faultTime }}</div>
          <div class="info-row"><span class="label">故障描述：</span>{{ currentOrder?.description }}</div>
          <div class="info-row"><span class="label">创建时间：</span>{{ currentOrder?.createTime }}</div>
          <div class="info-row" v-if="currentOrder?.startTime"><span class="label">开始处理：</span>{{ currentOrder?.startTime }}</div>
          <div class="info-row" v-if="currentOrder?.completeTime"><span class="label">完成时间：</span>{{ currentOrder?.completeTime }}</div>
          <div class="info-row" v-if="currentOrder?.processResult"><span class="label">处理结果：</span>{{ currentOrder?.processResult }}</div>
        </div>
        <div class="form-actions">
          <button @click="closeDetailModal" class="btn-primary">关闭</button>
        </div>
      </div>
    </div>

    <!-- 完成工单模态框 -->
    <div v-if="completeModalVisible" class="modal-overlay" @click.self="closeCompleteModal">
      <div class="modal-content" style="width:450px;">
        <h3>✅ 工单完成反馈</h3>
        <div class="order-info-summary">
          <div><span class="label">工单号：</span>{{ currentOrder?.orderNo }}</div>
          <div><span class="label">设备：</span>{{ currentOrder?.deviceId }} - {{ currentOrder?.deviceType }}</div>
        </div>
        <div class="form-group">
          <label class="form-label">处理结果</label>
          <textarea v-model="processResult" class="form-textarea" rows="3" placeholder="请描述处理过程及结果..."></textarea>
        </div>
        <div class="form-actions">
          <button @click="closeCompleteModal" class="btn-outline">取消</button>
          <button @click="submitComplete" class="btn-primary">提交完成</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

// ==================== 工单数据 ====================
const orders = ref([
  { id: 1, orderNo: 'WO-20250508-001', deviceType: '压力传感器', deviceId: 'PS-001', location: '城东泵站', manufacturer: '华仪科技', maintainer: '张工', contact: '13800001111', faultTime: '2025-05-08 09:23:15', description: '设备离线，数据上报异常，超过30分钟未回传', createTime: '2025-05-08 09:23:18', status: 'pending', startTime: null, completeTime: null, processResult: null },
  { id: 2, orderNo: 'WO-20250508-002', deviceType: '泄漏检测仪', deviceId: 'LD-005', location: '化工园区', manufacturer: '安防科技', maintainer: '李工', contact: '13800002222', faultTime: '2025-05-08 07:30:22', description: '可燃气浓度超阈值报警，需现场核查', createTime: '2025-05-08 07:30:25', status: 'processing', startTime: '2025-05-08 08:15:00', completeTime: null, processResult: null },
  { id: 3, orderNo: 'WO-20250507-003', deviceType: '水位监测仪', deviceId: 'WL-006', location: '东区排水口', manufacturer: '水文科技', maintainer: '王工', contact: '13800003333', faultTime: '2025-05-07 14:20:33', description: '水位数据异常波动，需校准', createTime: '2025-05-07 14:20:36', status: 'completed', startTime: '2025-05-07 14:35:00', completeTime: '2025-05-07 15:20:00', processResult: '已校准传感器，数据恢复正常' },
  { id: 4, orderNo: 'WO-20250508-004', deviceType: '流量传感器', deviceId: 'FL-002', location: '城南枢纽', manufacturer: '水测智能', maintainer: '张工', contact: '13800001111', faultTime: '2025-05-08 06:15:00', description: '流量数据中断，设备可能离线', createTime: '2025-05-08 06:15:03', status: 'pending', startTime: null, completeTime: null, processResult: null }
])

// 实时故障监控模拟数据
const recentFaults = ref([
  { id: 101, time: '09:23:15', deviceName: '压力传感器 PS-001', message: '设备离线，数据上报异常', orderCreated: true, isNew: false },
  { id: 102, time: '07:30:22', deviceName: '泄漏检测仪 LD-005', message: '可燃气浓度超阈值报警', orderCreated: true, isNew: false },
  { id: 103, time: '06:15:00', deviceName: '流量传感器 FL-002', message: '流量数据中断', orderCreated: true, isNew: false }
])

// ==================== 查询参数 ====================
const queryParams = ref({
  deviceType: '',
  deviceId: '',
  startDate: '',
  endDate: ''
})
const currentPage = ref(1)
const pageSize = 8

// 过滤后的工单（时间倒序）
const filteredOrders = computed(() => {
  let result = [...orders.value]
  if (queryParams.value.deviceType) {
    result = result.filter(o => o.deviceType === queryParams.value.deviceType)
  }
  if (queryParams.value.deviceId) {
    result = result.filter(o => o.deviceId.toLowerCase().includes(queryParams.value.deviceId.toLowerCase()))
  }
  if (queryParams.value.startDate) {
    result = result.filter(o => o.faultTime >= queryParams.value.startDate)
  }
  if (queryParams.value.endDate) {
    result = result.filter(o => o.faultTime <= queryParams.value.endDate + ' 23:59:59')
  }
  // 时间倒序排列
  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 generateOrderNo = () => {
  const today = new Date()
  const dateStr = today.toISOString().slice(0, 10).replace(/-/g, '')
  const count = orders.value.length + 1
  return `WO-${dateStr}-${String(count).padStart(3, '0')}`
}

// ==================== 自动生成故障工单 ====================
let faultInterval = null
let faultIdCounter = 200

// 模拟接收设备故障并自动生成工单
const simulateFaultReceive = () => {
  if (Math.random() < 0.02) { // 约5%概率触发新故障
    const faultsList = [
      { deviceType: '压力传感器', deviceId: 'PS-008', location: '北环加压站', manufacturer: '华仪科技', message: '压力波动异常，超出预警范围' },
      { deviceType: '温度传感器', deviceId: 'TP-010', location: '城西换热站', manufacturer: '北方仪表', message: '温度超过85℃警戒线' },
      { deviceType: '泄漏检测仪', deviceId: 'LD-012', location: '南站调压站', manufacturer: '安防科技', message: '可燃气浓度异常波动' }
    ]
    const randomFault = faultsList[Math.floor(Math.random() * faultsList.length)]
    const now = new Date()
    const timeStr = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`
    const timeDisplay = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`

    // 添加到实时监控
    const newFault = {
      id: faultIdCounter++,
      time: timeDisplay,
      deviceName: `${randomFault.deviceType} ${randomFault.deviceId}`,
      message: randomFault.message,
      orderCreated: false,
      isNew: true
    }
    recentFaults.value.unshift(newFault)
    if (recentFaults.value.length > 10) recentFaults.value.pop()

    // 自动生成工单
    setTimeout(() => {
      createFaultOrder(randomFault.deviceType, randomFault.deviceId, randomFault.location, randomFault.manufacturer, randomFault.message, timeStr)
      newFault.orderCreated = true
      newFault.isNew = false
    }, 1500)
  }
}

// 创建故障工单并自动派发
const createFaultOrder = (deviceType, deviceId, location, manufacturer, message, faultTime) => {
  // 根据设备类型自动分配维护人员
  const maintainerMap = {
    '压力传感器': '张工',
    '温度传感器': '李工',
    '泄漏检测仪': '王工',
    '流量传感器': '张工',
    '水位监测仪': '赵工'
  }
  const maintainer = maintainerMap[deviceType] || '张工'
  const contactMap = { '张工': '13800001111', '李工': '13800002222', '王工': '13800003333', '赵工': '13800004444' }

  const newOrder = {
    id: orders.value.length + 1,
    orderNo: generateOrderNo(),
    deviceType: deviceType,
    deviceId: deviceId,
    location: location,
    manufacturer: manufacturer,
    maintainer: maintainer,
    contact: contactMap[maintainer],
    faultTime: faultTime,
    description: message,
    createTime: new Date().toLocaleString(),
    status: 'pending',
    startTime: null,
    completeTime: null,
    processResult: null
  }

  orders.value.unshift(newOrder)
  console.log(`自动生成工单 ${newOrder.orderNo} 并派发给 ${maintainer}`)
}

// ==================== 手动新增工单 ====================
const showAddForm = ref(false)
const newOrder = ref({
  deviceType: '',
  deviceId: '',
  location: '',
  manufacturer: '',
  maintainer: '',
  contact: '',
  faultTime: '',
  description: ''
})

const openAddModal = () => {
  showAddForm.value = true
  newOrder.value = {
    deviceType: '',
    deviceId: '',
    location: '',
    manufacturer: '',
    maintainer: '',
    contact: '',
    faultTime: new Date().toISOString().slice(0, 16),
    description: ''
  }
}

const cancelAdd = () => {
  showAddForm.value = false
}

const submitManualOrder = () => {
  if (!newOrder.value.deviceType || !newOrder.value.deviceId || !newOrder.value.location || !newOrder.value.maintainer || !newOrder.value.faultTime || !newOrder.value.description) {
    alert('请填写所有必填项')
    return
  }

  const contactMap = { '张工': '13800001111', '李工': '13800002222', '王工': '13800003333', '赵工': '13800004444' }
  const faultTimeFormatted = newOrder.value.faultTime.replace('T', ' ')

  const newOrderData = {
    id: orders.value.length + 1,
    orderNo: generateOrderNo(),
    deviceType: newOrder.value.deviceType,
    deviceId: newOrder.value.deviceId,
    location: newOrder.value.location,
    manufacturer: newOrder.value.manufacturer || '',
    maintainer: newOrder.value.maintainer,
    contact: newOrder.value.contact || contactMap[newOrder.value.maintainer] || '',
    faultTime: faultTimeFormatted,
    description: newOrder.value.description,
    createTime: new Date().toLocaleString(),
    status: 'pending',
    startTime: null,
    completeTime: null,
    processResult: null
  }

  orders.value.unshift(newOrderData)
  alert(`工单 ${newOrderData.orderNo} 已创建并派发给 ${newOrder.value.maintainer}`)
  showAddForm.value = false
}

// ==================== 工单操作 ====================
const detailModalVisible = ref(false)
const completeModalVisible = ref(false)
const currentOrder = ref(null)
const processResult = ref('')

const viewOrderDetail = (order) => {
  currentOrder.value = order
  detailModalVisible.value = true
}

const closeDetailModal = () => {
  detailModalVisible.value = false
  currentOrder.value = null
}

const updateStatus = (order, status) => {
  order.status = status
  if (status === 'processing') {
    order.startTime = new Date().toLocaleString()
  }
  alert(`工单 ${order.orderNo} 状态已更新为${getStatusText(status)}`)
}

const completeOrder = (order) => {
  currentOrder.value = order
  processResult.value = ''
  completeModalVisible.value = true
}

const closeCompleteModal = () => {
  completeModalVisible.value = false
  currentOrder.value = null
  processResult.value = ''
}

const submitComplete = () => {
  if (currentOrder.value) {
    currentOrder.value.status = 'completed'
    currentOrder.value.completeTime = new Date().toLocaleString()
    currentOrder.value.processResult = processResult.value || '处理完成'
    alert(`工单 ${currentOrder.value.orderNo} 已完成`)
    closeCompleteModal()
  }
}

// ==================== 查询相关 ====================
const searchOrders = () => {
  currentPage.value = 1
}

const resetQuery = () => {
  queryParams.value = { deviceType: '', deviceId: '', startDate: '', endDate: '' }
  currentPage.value = 1
}

// ==================== 生命周期 ====================
onMounted(() => {
  faultInterval = setInterval(simulateFaultReceive, 20000)
})

onUnmounted(() => {
  if (faultInterval) clearInterval(faultInterval)
})
</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: 380px; background: #f9fbfd; padding: 20px; }
.right-panel { flex: 1; background: #ffffff; padding: 20px; min-width: 550px; }

/* 卡片 */
.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; }
.card-body { padding: 16px; }

/* 实时故障监控 */
.fault-monitor { max-height: 280px; overflow-y: auto; }
.fault-item { background: #fef9e8; border-radius: 12px; padding: 10px; margin-bottom: 8px; border-left: 3px solid #e74c3c; }
.fault-item.new { animation: highlight 1s ease; background: #fff3e0; }
.fault-time { font-size: 0.6rem; color: #6f8ea8; font-family: monospace; }
.fault-device { font-weight: 700; font-size: 0.75rem; margin: 4px 0; }
.fault-message { font-size: 0.7rem; color: #e74c3c; }
.fault-order-status { margin-top: 6px; font-size: 0.65rem; }
.order-created { color: #27ae60; }
.order-creating { color: #f39c12; }
.empty-fault { text-align: center; padding: 30px; color: #8aaec2; }
.live-badge { font-size: 0.65rem; background: #e74c3c; color: white; padding: 2px 10px; border-radius: 20px; animation: blink 1s infinite; }

/* 手动新增表单 */
.add-form { margin-top: 8px; }
.empty-add { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: #8aaec2; cursor: pointer; border: 1px dashed #cbdde6; border-radius: 16px; }
.empty-add:hover { border-color: #e67e22; color: #e67e22; }
.add-icon { font-size: 2rem; margin-bottom: 8px; }
.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: 16px; }
.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; }

/* 筛选栏 */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filter-select, .filter-input { padding: 6px 12px; border-radius: 20px; border: 1px solid #cbdde6; font-size: 0.7rem; }
.filter-input { width: 130px; }
.filter-sep { font-size: 0.7rem; color: #6f8ea8; }
.list-count { font-size: 0.65rem; font-weight: normal; color: #6f8ea8; }

/* 表格 */
.order-table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.data-table th { background: #f8fafc; padding: 10px 8px; text-align: left; font-weight: 600; color: #2c5a72; border-bottom: 1px solid #e2edf2; }
.data-table td { padding: 10px 8px; border-bottom: 1px solid #f0f4f7; vertical-align: middle; }
.order-no { font-family: monospace; color: #e67e22; }
.time-cell { white-space: nowrap; font-family: monospace; }
.desc-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-cell { white-space: nowrap; display: flex; gap: 6px; }
.empty-row { text-align: center; padding: 30px; color: #8aaec2; }

/* 状态标签 */
.status-badge { padding: 2px 10px; border-radius: 20px; font-size: 0.65rem; }
.status-pending { background: #fef3c7; color: #f39c12; }
.status-processing { background: #e3f2fd; color: #3498db; }
.status-completed { background: #d5f5e3; color: #27ae60; }

/* 操作按钮 */
.btn-view { background: #95a5a6; color: white; border: none; padding: 4px 10px; border-radius: 20px; font-size: 0.65rem; cursor: pointer; }
.btn-start { background: #3498db; color: white; border: none; padding: 4px 10px; border-radius: 20px; font-size: 0.65rem; cursor: pointer; }
.btn-complete { background: #27ae60; color: white; border: none; padding: 4px 10px; border-radius: 20px; font-size: 0.65rem; cursor: pointer; }

/* 分页 */
.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; }

/* 模态框 */
.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: 480px; max-width: 90%; padding: 24px; max-height: 85vh; overflow-y: auto; }
.detail-info { background: #f8fafc; border-radius: 16px; padding: 16px; margin-top: 8px; }
.info-row { margin-bottom: 10px; font-size: 0.75rem; }
.info-row .label { font-weight: 600; width: 100px; display: inline-block; color: #2c5a72; }
.order-info-summary { background: #f8fafc; border-radius: 12px; padding: 12px; margin-bottom: 16px; font-size: 0.7rem; }

@keyframes highlight { 0% { background: #fff3e0; } 100% { background: #fef9e8; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
</style>