<template>
  <div class="admin-orders">
    <!-- 统计卡片 -->
    <div class="order-stats">
      <div class="stat-card">
        <div class="stat-icon total">
          <el-icon><ShoppingCart /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ orderStats.total }}</div>
          <div class="stat-label">{{ t('admin.orders.stats.total') }}</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon pending">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ orderStats.pending }}</div>
          <div class="stat-label">{{ t('admin.orders.stats.pending') }}</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon completed">
          <el-icon><Check /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ orderStats.completed }}</div>
          <div class="stat-label">{{ t('admin.orders.stats.completed') }}</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon revenue">
          <el-icon><Money /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-number">¥{{ orderStats.revenue.toLocaleString() }}</div>
          <div class="stat-label">{{ t('admin.orders.stats.revenue') }}</div>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="orders-filters">
      <div class="filter-group">
        <el-select 
          v-model="selectedStatus" 
          :placeholder="t('admin.orders.status')" 
          clearable
        >
          <el-option 
            :label="t('admin.orders.statusOptions.pendingConfirmation')" 
            value="pendingConfirmation" 
          />
          <el-option 
            :label="t('admin.orders.statusOptions.confirmed')" 
            value="confirmed" 
          />
          <el-option 
            :label="t('admin.orders.statusOptions.rejected')" 
            value="rejected" 
          />
          <el-option 
            :label="t('admin.orders.statusOptions.processing')" 
            value="processing" 
          />
          <el-option 
            :label="t('admin.orders.statusOptions.readyToShip')" 
            value="readyToShip" 
          />
          <el-option 
            :label="t('admin.orders.statusOptions.shipped')" 
            value="shipped" 
          />
        </el-select>
        
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          :start-placeholder="t('admin.orders.dateRange')"
          :end-placeholder="t('admin.orders.dateRange')"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          clearable
        />
      </div>
      
      <div class="search-group">
        <el-input
          v-model="searchQuery" 
          :placeholder="t('admin.orders.search')"
          prefix-icon="Search"
          clearable
        />
      </div>
      
      <div class="filter-actions">
        <el-button 
          type="primary" 
          @click="handleExportOrders"
        >
          <el-icon><Download /></el-icon>
          {{ t('admin.orders.export') }}
        </el-button>
        <el-button 
          @click="refresh"
        >
          <el-icon><Refresh /></el-icon>
          {{ t('admin.common.refresh') }}
        </el-button>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="orders-list">
      <el-table 
        :data="filteredOrdersList" 
        stripe 
        style="width: 100%"
        v-loading="loading"
        @row-click="handleOrderDetail"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="orderNumber" :label="t('admin.orders.orderNumber')" width="150" />
        <el-table-column prop="customerName" :label="t('admin.orders.customer')" width="120" />
        <el-table-column prop="totalAmount" :label="t('admin.orders.total')" width="120">
          <template #default="{ row }">
            ¥{{ row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="t('admin.orders.status')" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ t(`admin.orders.statusOptions.${row.status}`) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" :label="t('admin.orders.payment')" width="100">
          <template #default="{ row }">
            {{ t(`admin.orders.paymentOptions.${row.paymentMethod}`) }}
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" :label="t('admin.orders.date')" width="180">
          <template #default="{ row }">
            {{ formatDate(row.orderDate) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('admin.orders.actions')" width="200" fixed="right">
          <template #default="{ row }">
            <div class="actions-container">
              <!-- 待确认状态：显示"去确认"按钮 -->
              <el-button 
                v-if="row.status === 'pendingConfirmation'"
                size="small" 
                type="primary" 
                @click.stop="handleConfirmOrder(row)"
              >
                {{ t('admin.orders.confirm') }}
              </el-button>
              
              <!-- 已拒绝状态：显示退款提示 -->
              <el-tag v-if="row.status === 'rejected'" type="danger" size="small">
                {{ t('admin.orders.refundNotice') }}
              </el-tag>
              
              <!-- 待处理状态：显示"去处理"按钮 -->
              <el-button 
                v-if="row.status === 'processing'"
                size="small" 
                type="primary" 
                @click.stop="handleProcessOrder(row)"
              >
                {{ t('admin.orders.process') }}
              </el-button>
              
              <!-- 待发货状态：显示"发货"按钮 -->
              <el-button 
                v-if="row.status === 'readyToShip'"
                size="small" 
                type="primary" 
                @click.stop="handleShipOrder(row)"
              >
                {{ t('admin.orders.ship') }}
              </el-button>
              
              <!-- 已发货状态：显示"查看物流"按钮 -->
              <el-button 
                v-if="row.status === 'shipped'"
                size="small" 
                type="success" 
                @click.stop="handleViewLogistics(row)"
              >
                {{ t('admin.orders.viewLogistics') }}
              </el-button>
              
              <!-- 所有状态都显示"查看"按钮 -->
              <el-button size="small" @click.stop="handleViewOrder(row)">
                {{ t('admin.orders.view') }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalOrders"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 订单详情对话框 -->
    <el-dialog 
      :title="t('admin.orders.detail')" 
      v-model="detailDialogVisible"
      width="800px"
    >
      <div v-if="selectedOrder" class="order-detail">
        <div class="detail-section">
          <h4>{{ t('admin.orders.basicInfo') }}</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item :label="t('admin.orders.orderNumber')">
              {{ selectedOrder.orderNumber }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('admin.orders.customer')">
              {{ selectedOrder.customerName }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('admin.orders.total')">
              ¥{{ selectedOrder.totalAmount.toFixed(2) }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('admin.orders.status')">
              <el-tag :type="getStatusTagType(selectedOrder.status)">
                {{ t(`admin.orders.statusOptions.${selectedOrder.status}`) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="detail-section">
          <h4>{{ t('admin.orders.items') }}</h4>
          <el-table :data="selectedOrder.items" stripe>
            <el-table-column prop="name" :label="t('admin.orders.itemName')" />
            <el-table-column prop="quantity" :label="t('admin.orders.quantity')" width="100" />
            <el-table-column prop="price" :label="t('admin.orders.price')" width="120">
              <template #default="{ row }">
                ¥{{ row.price.toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 更新状态对话框 -->
    <el-dialog 
      :title="t('admin.orders.updateStatus')" 
      v-model="statusDialogVisible"
      width="400px"
    >
      <el-form v-if="selectedOrderForStatus" :model="statusForm" label-width="100px">
        <el-form-item :label="t('admin.orders.currentStatus')">
          <el-tag :type="getStatusTagType(selectedOrderForStatus.status)">
            {{ t(`admin.orders.statusOptions.${selectedOrderForStatus.status}`) }}
          </el-tag>
        </el-form-item>
        <el-form-item :label="t('admin.orders.newStatus')" prop="status">
          <el-select v-model="statusForm.status" :placeholder="t('admin.orders.selectStatus')">
            <el-option 
              v-for="status in availableStatuses" 
              :key="status.value" 
              :label="status.label" 
              :value="status.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="statusDialogVisible = false">{{ t('common.cancel') }}</el-button>
        <el-button type="primary" @click="handleStatusUpdate">{{ t('common.confirm') }}</el-button>
      </template>
    </el-dialog>
    
    <!-- 发货对话框 -->
    <el-dialog 
      v-model="shippingDialogVisible" 
      :title="t('admin.orders.ship')" 
      width="40%"
    >
      <div v-if="selectedOrder">
        <el-form :model="shippingForm" label-width="120px">
          <el-form-item :label="t('admin.orders.trackingNumber')" required>
            <el-input v-model="shippingForm.trackingNumber" placeholder="请输入物流单号"></el-input>
          </el-form-item>
          <el-form-item :label="t('admin.orders.carrier')" required>
            <el-select v-model="shippingForm.carrier" placeholder="请选择物流公司">
              <el-option label="顺丰速运" value="sf"></el-option>
              <el-option label="圆通速递" value="yto"></el-option>
              <el-option label="中通快递" value="zto"></el-option>
              <el-option label="申通快递" value="sto"></el-option>
              <el-option label="韵达速递" value="yd"></el-option>
              <el-option label="邮政EMS" value="ems"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="t('admin.orders.shippingNote')">
            <el-input 
              v-model="shippingForm.note" 
              type="textarea" 
              rows="3" 
              placeholder="发货备注（可选）">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="shippingDialogVisible = false">{{ t('common.cancel') }}</el-button>
        <el-button type="primary" @click="confirmShipOrder">{{ t('common.confirm') }}</el-button>
      </template>
    </el-dialog>
    
    <!-- 物流对话框 -->
    <el-dialog 
      v-model="logisticsDialogVisible" 
      :title="t('admin.orders.viewLogistics')" 
      width="50%"
    >
      <div v-if="selectedOrder">
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="t('admin.orders.trackingNumber')">
            {{ selectedOrder.trackingNumber || 'SF1234567890' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('admin.orders.carrier')">
            {{ selectedOrder.carrier || '顺丰速运' }}
          </el-descriptions-item>
        </el-descriptions>
        
        <el-divider>{{ t('admin.orders.logisticsTimeline') }}</el-divider>
        
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in logisticsActivities"
            :key="index"
            :timestamp="activity.timestamp"
            :type="activity.type"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <template #footer>
        <el-button @click="logisticsDialogVisible = false">{{ t('common.close') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { 
  Download, 
  ShoppingCart, 
  Clock, 
  Check, 
  Money, 
  Search, 
  Refresh 
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'AdminOrders',
  components: {
    Download,
    ShoppingCart,
    Clock,
    Check,
    Money,
    Search,
    Refresh
  },
  setup() {
    const { t } = useI18n()
    const router = useRouter()
    
    // 响应式数据
    const loading = ref(false)
    const searchQuery = ref('')
    const selectedStatus = ref('')
    const dateRange = ref([])
    const currentPage = ref(1)
    const pageSize = ref(20)
    const totalOrders = ref(0)
    const detailDialogVisible = ref(false)
    const statusDialogVisible = ref(false)
    const shippingDialogVisible = ref(false)
    const logisticsDialogVisible = ref(false)
    const selectedOrder = ref(null)
    const selectedOrderForStatus = ref(null)
    const selectedOrders = ref([]) // 多选选中的订单
    
    const statusForm = reactive({
      status: ''
    })
    
    // 发货表单
    const shippingForm = reactive({
      trackingNumber: '',
      carrier: '',
      note: ''
    })
    
    // 物流活动时间线
    const logisticsActivities = ref([
      {
        content: '您的订单已发货',
        timestamp: '2023-12-01 10:00:00',
        type: 'primary'
      },
      {
        content: '您的订单已到达【北京转运中心】',
        timestamp: '2023-12-01 14:30:00',
        type: 'success'
      },
      {
        content: '您的订单正在派送中',
        timestamp: '2023-12-02 09:00:00',
        type: 'warning'
      },
      {
        content: '您的订单已签收',
        timestamp: '2023-12-02 16:30:00',
        type: 'success'
      }
    ])

    // 模拟订单数据
    const ordersList = ref([
      {
        id: 1,
        orderNumber: 'ORD-2024-001',
        customerName: '张三',
        totalAmount: 1299.00,
        status: 'shipped',
        paymentMethod: 'alipay',
        orderDate: '2024-01-15 10:30:00',
        items: [
          { name: 'AI智能音箱', quantity: 1, price: 799.00 },
          { name: '智能插座', quantity: 2, price: 250.00 }
        ]
      },
      {
        id: 2,
        orderNumber: 'ORD-2024-002',
        customerName: '李四',
        totalAmount: 2599.00,
        status: 'readyToShip',
        paymentMethod: 'wechat',
        orderDate: '2024-01-14 16:20:00',
        items: [
          { name: '智能门锁', quantity: 1, price: 1999.00 },
          { name: '智能摄像头', quantity: 1, price: 600.00 }
        ]
      },
      {
        id: 3,
        orderNumber: 'ORD-2024-003',
        customerName: '王五',
        totalAmount: 899.00,
        status: 'processing',
        paymentMethod: 'credit',
        orderDate: '2024-01-13 09:15:00',
        items: [
          { name: '智能灯泡', quantity: 3, price: 299.00 }
        ]
      },
      {
        id: 4,
        orderNumber: 'ORD-2024-004',
        customerName: '赵六',
        totalAmount: 1599.00,
        status: 'pendingConfirmation',
        paymentMethod: 'alipay',
        orderDate: '2024-01-12 14:45:00',
        items: [
          { name: '智能扫地机器人', quantity: 1, price: 1599.00 }
        ]
      },
      {
        id: 5,
        orderNumber: 'ORD-2024-005',
        customerName: '孙七',
        totalAmount: 799.00,
        status: 'processing',
        paymentMethod: 'wechat',
        orderDate: '2024-01-11 11:30:00',
        items: [
          { name: '智能体重秤', quantity: 1, price: 799.00 }
        ]
      },
      {
        id: 6,
        orderNumber: 'ORD-2024-006',
        customerName: '周八',
        totalAmount: 1299.00,
        status: 'rejected',
        paymentMethod: 'credit',
        orderDate: '2024-01-10 15:20:00',
        items: [
          { name: '智能手环', quantity: 1, price: 1299.00 }
        ]
      }
    ])

    // 统计数据
    const orderStats = ref({
      total: 156,
      pending: 23,
      completed: 128,
      revenue: 156789
    })

    // 计算属性
    const filteredOrdersList = computed(() => {
      let result = ordersList.value
      
      if (searchQuery.value) {
        result = result.filter(item => 
          item.orderNumber.includes(searchQuery.value) || 
          item.customerName.includes(searchQuery.value)
        )
      }
      
      if (selectedStatus.value) {
        result = result.filter(item => item.status === selectedStatus.value)
      }
      
      if (dateRange.value && dateRange.value.length === 2) {
        result = result.filter(item => {
          const orderDate = new Date(item.orderDate)
          const startDate = new Date(dateRange.value[0])
          const endDate = new Date(dateRange.value[1])
          return orderDate >= startDate && orderDate <= endDate
        })
      }
      
      return result
    })

    const availableStatuses = computed(() => {
      const allStatuses = [
        { value: 'pendingConfirmation', label: t('admin.orders.statusOptions.pendingConfirmation') },
        { value: 'rejected', label: t('admin.orders.statusOptions.rejected') },
        { value: 'processing', label: t('admin.orders.statusOptions.processing') },
        { value: 'readyToShip', label: t('admin.orders.statusOptions.readyToShip') },
        { value: 'shipped', label: t('admin.orders.statusOptions.shipped') }
      ]
      return allStatuses
    })

    // 方法
    const getStatusTagType = (status) => {
      const statusMap = {
        pendingConfirmation: 'info',     // 待确认 - 蓝色
        rejected: 'danger',              // 已拒绝 - 红色
        processing: 'warning',           // 待处理 - 橙色
        readyToShip: 'primary',          // 待发货 - 主色调
        shipped: 'success'               // 已发货 - 绿色
      }
      return statusMap[status] || 'info'
    }

    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }

    const handleExportOrders = () => {
  ElMessage.success('Orders exported successfully')
}

const refresh = () => {
  console.log('Refresh data')
  ElMessage.success('Data refreshed successfully')
}

    const handleOrderDetail = (row) => {
      selectedOrder.value = row
      detailDialogVisible.value = true
    }

    const handleViewOrder = (row) => {
      selectedOrder.value = row
      detailDialogVisible.value = true
    }

    const handleUpdateStatus = (row) => {
      selectedOrderForStatus.value = row
      statusForm.value.status = row.status
      statusDialogVisible.value = true
    }

    const handleStatusUpdate = async () => {
      try {
        await ElMessageBox.confirm(
          '确定要更新订单状态吗？',
          '确认更新',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        ElMessage.success('订单状态更新成功')
        statusDialogVisible.value = false
      } catch {
        // 用户取消更新
      }
    }

    // 确认订单
    const handleConfirmOrder = (row) => {
      // 跳转到订单审核页面
      router.push('/admin/content-review')
    }
    
    // 处理订单
    const handleProcessOrder = (row) => {
      // 跳转到拆解订单页面
      router.push('/admin/disassembly-orders')
    }
    
    // 发货订单
    const handleShipOrder = (row) => {
      selectedOrder.value = row
      shippingDialogVisible.value = true
    }
    
    // 查看物流
    const handleViewLogistics = (row) => {
      selectedOrder.value = row
      logisticsDialogVisible.value = true
    }
    
    // 确认发货
    const confirmShipOrder = () => {
      if (!shippingForm.trackingNumber || !shippingForm.carrier) {
        ElMessage.warning('请填写必要的发货信息')
        return
      }
      
      // 更新订单状态
      const orderIndex = orders.value.findIndex(order => order.id === selectedOrder.value.id)
      if (orderIndex !== -1) {
        orders.value[orderIndex].status = 'shipped'
        orders.value[orderIndex].trackingNumber = shippingForm.trackingNumber
        orders.value[orderIndex].carrier = shippingForm.carrier
      }
      
      ElMessage.success('发货成功')
      shippingDialogVisible.value = false
      
      // 重置表单
      shippingForm.trackingNumber = ''
      shippingForm.carrier = ''
      shippingForm.note = ''
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      currentPage.value = 1
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    // 多选处理函数
    const handleSelectionChange = (selection) => {
      selectedOrders.value = selection
    }



    // 生命周期
    onMounted(() => {
      totalOrders.value = ordersList.value.length
    })

    return {
      t,
      loading,
      searchQuery,
      selectedStatus,
      dateRange,
      currentPage,
      pageSize,
      totalOrders,
      detailDialogVisible,
      statusDialogVisible,
      shippingDialogVisible,
      logisticsDialogVisible,
      selectedOrder,
      selectedOrderForStatus,
      selectedOrders,
      statusForm,
      shippingForm,
      logisticsActivities,
      ordersList,
      orderStats,
      filteredOrdersList,
      availableStatuses,
      getStatusTagType,
      formatDate,
      handleExportOrders,
      refresh,
      handleOrderDetail,
      handleViewOrder,
      handleUpdateStatus,
      handleStatusUpdate,
      handleConfirmOrder,
      handleProcessOrder,
      handleShipOrder,
      handleViewLogistics,
      confirmShipOrder,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange
    }
  }
}
</script>

<style scoped>
.admin-orders {
  padding: 20px;
  background-color: #f8fafc;
  min-height: calc(100vh - 60px);
}

/* 统计卡片样式 */
.order-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.pending {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.revenue {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
}

/* 筛选器样式 */
.orders-filters {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: flex-end;
  overflow-x: auto;
  white-space: nowrap;
}

.filter-group {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

.search-group {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  flex-shrink: 0;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 8px;
}

/* 订单列表样式 */
.orders-list {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

/* 表格样式优化 */
.orders-list :deep(.el-table) {
  width: 100% !important;
  table-layout: auto;
}

.orders-list :deep(.el-table__header) {
  width: 100% !important;
}

.orders-list :deep(.el-table__body) {
  width: 100% !important;
}

.orders-list :deep(.el-table__cell) {
  padding: 8px 12px;
  white-space: nowrap;
}

.orders-list :deep(.el-table__header-wrapper) {
  background-color: #f8fafc;
}

.orders-list :deep(.el-table__header th) {
  background-color: #f8fafc;
  color: #374151;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
}

/* 操作按钮容器 */
.actions-container {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.actions-container .el-button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

/* 订单详情样式 */
.order-detail {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .order-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .orders-filters {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .admin-orders {
    padding: 16px;
  }
  
  .order-stats {
    grid-template-columns: 1fr;
  }
  
  .orders-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-group {
    min-width: auto;
    max-width: none;
  }
  
  .filter-actions {
    justify-content: center;
  }
  
  /* 移动端表格优化 */
  .orders-list {
    overflow-x: auto;
  }
  
  .orders-list :deep(.el-table) {
    min-width: 800px;
  }
  
  .actions-container {
    flex-direction: column;
    gap: 6px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .order-stats {
    flex-wrap: wrap;
  }
  
  .stat-card {
    min-width: calc(50% - 8px);
  }
  
  .orders-filters {
    flex-wrap: wrap;
  }
}
</style>