<template>
  <div class="orders-page">
    <!-- 分类Tabs -->
    <el-card shadow="never" class="tabs-card">
      <div class="order-tabs">
        <div v-for="tab in tabs" :key="tab.key" class="order-tab" :class="{active: activeTab === tab.key}" @click="switchTab(tab.key)">
          <span class="tab-icon">{{ tab.icon }}</span>
          <span class="tab-label">{{ tab.label }}</span>
          <el-tag v-if="tab.count !== undefined" size="small" :type="tab.key === activeTab ? 'primary' : 'info'" class="tab-count">{{ tab.count }}</el-tag>
        </div>
      </div>
    </el-card>

    <!-- Tab 0: 订单管理 -->
    <div v-show="activeTab === 'orders'">
      <el-card shadow="never" class="filter-card">
        <el-form :model="orderFilter" inline>
          <el-form-item label="订单类型">
            <el-select v-model="orderFilter.type" placeholder="全部" clearable style="width:130px" @change="fetchOrders">
              <el-option label="全部订单" value="" />
              <el-option label="普通订单" value="normal" />
              <el-option label="秒杀订单" value="flash" />
              <el-option label="拼团订单" value="group" />
              <el-option label="预售订单" value="pre_sale" />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="orderFilter.payment" placeholder="全部" clearable style="width:130px" @change="fetchOrders">
              <el-option label="全部" value="" />
              <el-option label="微信支付" value="wechat" />
              <el-option label="支付宝" value="alipay" />
              <el-option label="余额支付" value="balance" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="orderFilter.status" placeholder="全部" clearable @change="fetchOrders" style="width:130px">
              <el-option label="全部" value="" />
              <el-option label="待付款" value="pending_pay" />
              <el-option label="待发货" value="pending_ship" />
              <el-option label="已发货" value="shipped" />
              <el-option label="已完成" value="received" />
              <el-option label="已关闭" value="closed" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期">
            <el-date-picker v-model="orderFilter.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="fetchOrders" />
          </el-form-item>
          <el-form-item label="搜索">
            <el-input v-model="orderFilter.keyword" placeholder="订单号/用户名/手机号" clearable style="width:200px" @clear="fetchOrders" @keyup.enter="fetchOrders">
              <template #append><el-button @click="fetchOrders"><el-icon><Search /></el-icon></el-button></template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card shadow="never">
        <div class="table-header">
          <span style="font-size:15px;font-weight:600">订单列表</span>
          <el-button size="small" @click="openOrderConfig"><el-icon><Setting /></el-icon>订单配置</el-button>
        </div>
        <el-table :data="orderList" border stripe v-loading="orderLoading" style="width:100%">
          <el-table-column label="订单号" width="180"><template #default="{ row }">{{ row.orderNo }}</template></el-table-column>
          <el-table-column label="买家" width="120"><template #default="{ row }">{{ row.nickname || row.consignee || '用户'+row.userId }}</template></el-table-column>
          <el-table-column label="商品" min-width="200">
            <template #default="{ row }">
              <div v-for="(item, i) in (row.items||[]).slice(0,3)" :key="i">{{ item.product_name }} x{{ item.quantity }}</div>
              <div v-if="(row.items||[]).length > 3">...</div>
            </template>
          </el-table-column>
          <el-table-column label="实付" width="110" align="center"><template #default="{ row }">¥{{ row.pay_amount }}</template></el-table-column>
          <el-table-column label="状态" width="90" align="center">
            <template #default="{ row }"><el-tag :type="orderStatusType(row.status)" size="small">{{ orderStatusLabel(row.status) }}</el-tag></template>
          </el-table-column>
          <el-table-column label="支付方式" width="90" align="center"><template #default="{ row }">{{ row.payment_method || '-' }}</template></el-table-column>
          <el-table-column label="创建时间" width="160" align="center"><template #default="{ row }">{{ row.created_at }}</template></el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template #default="{ row }">
              <el-button size="small" @click="openOrderDetail(row)">详情</el-button>
              <el-button v-if="row.status==='pending_ship'" size="small" type="primary" @click="openShipDialog(row)">发货</el-button>
              <el-button v-if="row.status==='pending_pay'" size="small" type="danger" @click="cancelOrder(row)">取消</el-button>
              <el-button v-if="row.status==='refunding'" size="small" type="warning" @click="openRefundDetail(row)">退款</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
          <el-pagination v-model:page-size="orderPageSize" v-model:current-page="orderPage" :total="orderTotal" :page-sizes="[10,20,50]" layout="total, sizes, prev, pager, next" @size-change="fetchOrders" @current-change="fetchOrders" />
        </div>
      </el-card>
    </div>

    <!-- Tab 1: 售后订单 -->
    <div v-show="activeTab === 'refunds'">
      <el-card shadow="never" class="filter-card">
        <el-form :model="refundFilter" inline>
          <el-form-item label="退款状态">
            <el-select v-model="refundFilter.status" placeholder="全部" clearable style="width:150px" @change="fetchRefunds">
              <el-option label="全部" value="" />
              <el-option label="待审核" value="pending" />
              <el-option label="已同意" value="approved" />
              <el-option label="已寄回" value="shipped_back" />
              <el-option label="已拒绝" value="rejected" />
              <el-option label="已退款" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>
          <el-form-item label="退款时间">
            <el-date-picker v-model="refundFilter.dateRange" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" @change="fetchRefunds" />
          </el-form-item>
          <el-form-item label="搜索订单号">
            <el-input v-model="refundFilter.keyword" placeholder="搜索" clearable style="width:180px" @clear="fetchRefunds" @keyup.enter="fetchRefunds" />
          </el-form-item>
          <el-form-item><el-button type="primary" @click="fetchRefunds"><el-icon><Search /></el-icon>搜索</el-button></el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="never">
        <el-table :data="refundList" border stripe v-loading="refundLoading" style="width:100%">
          <el-table-column label="退款单号" width="180"><template #default="{ row }">{{ row.refund_no }}</template></el-table-column>
          <el-table-column label="关联订单" width="180"><template #default="{ row }">{{ row.order_no || '-' }}</template></el-table-column>
          <el-table-column label="买家" width="120"><template #default="{ row }">{{ row.user_name || '用户'+row.user_id }}</template></el-table-column>
          <el-table-column label="退款类型" width="100" align="center"><template #default="{ row }"><el-tag :type="row.type==='refund_and_return'?'warning':'info'" size="small">{{ refundTypeLabel(row.type) }}</el-tag></template></el-table-column>
          <el-table-column label="退款金额" width="110" align="center"><template #default="{ row }">¥{{ row.amount }}</template></el-table-column>
          <el-table-column label="退款原因" min-width="120"><template #default="{ row }">{{ row.reason || '-' }}</template></el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="{ row }"><el-tag :type="refundStatusType(row.status)" size="small">{{ refundStatusLabel(row.status) }}</el-tag></template>
          </el-table-column>
          <el-table-column label="申请时间" width="160" align="center"><template #default="{ row }">{{ row.created_at }}</template></el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template #default="{ row }">
              <el-button size="small" @click="openRefundDetail(row)">详情</el-button>
              <el-button v-if="row.status==='pending'" size="small" type="success" @click="approveRefund(row)">同意</el-button>
              <el-button v-if="row.status==='pending'" size="small" type="danger" @click="rejectRefund(row)">拒绝</el-button>
              <el-button v-if="row.status==='shipped_back'" size="small" type="warning" @click="confirmReturnRefund(row)">确认收货</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper"><el-pagination v-model:page-size="refundPageSize" v-model:current-page="refundPage" :total="refundTotal" layout="total, prev, pager, next" @size-change="fetchRefunds" @current-change="fetchRefunds" /></div>
      </el-card>
    </div>

    <!-- Tab 2: 收银订单（预留） -->
    <div v-show="activeTab === 'cashier'">
      <el-card shadow="never">
        <el-empty description="收银订单功能开发中">
          <template #image><div style="font-size:64px">🧾</div></template>
          <p style="color:#999;font-size:13px">包含：线下收银订单管理、收银记录查询</p>
        </el-empty>
      </el-card>
    </div>

    <!-- Tab 3: 核销记录（预留） -->
    <div v-show="activeTab === 'verify'">
      <el-card shadow="never">
        <el-empty description="核销记录功能开发中">
          <template #image><div style="font-size:64px">✅</div></template>
          <p style="color:#999;font-size:13px">包含：核销码核销、核销记录查询、门店筛选</p>
        </el-empty>
      </el-card>
    </div>

    <!-- 订单详情弹窗 -->
    <el-dialog v-model="detailVisible" title="订单详情" width="750px">
      <template v-if="detailData">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号" span="2">{{ detailData.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="买家">{{ detailData.nickname || detailData.consignee || '-' }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ detailData.phone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" span="2">{{ detailData.address || '-' }}</el-descriptions-item>
          <el-descriptions-item label="订单状态"><el-tag :type="orderStatusType(detailData.status)" size="small">{{ orderStatusLabel(detailData.status) }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ detailData.payment_method || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商品金额">¥{{ detailData.total_amount }}</el-descriptions-item>
          <el-descriptions-item label="运费">¥{{ detailData.shipping_fee || 0 }}</el-descriptions-item>
          <el-descriptions-item label="实付金额" span="2"><span style="color:#f56c6c;font-weight:700;font-size:16px">¥{{ detailData.pay_amount }}</span></el-descriptions-item>
          <el-descriptions-item label="下单时间" span="2">{{ detailData.created_at }}</el-descriptions-item>
          <el-descriptions-item label="发货时间" span="2">{{ detailData.shipped_at || '-' }}</el-descriptions-item>
          <el-descriptions-item label="完成时间" span="2">{{ detailData.confirm_time || '-' }}</el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">商品明细</el-divider>
        <el-table :data="detailData.items || []" border size="small">
          <el-table-column prop="product_name" label="商品名称" min-width="150" />
          <el-table-column label="规格" width="120" align="center"><template #default="{ row }">{{ row.sku_info ? JSON.parse(row.sku_info).join('/') : '-' }}</template></el-table-column>
          <el-table-column prop="price" label="单价" width="100" align="center"><template #default="{ row }">¥{{ row.price }}</template></el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" align="center" />
          <el-table-column label="小计" width="100" align="center"><template #default="{ row }">¥{{ (row.price * row.quantity).toFixed(2) }}</template></el-table-column>
        </el-table>
      </template>
    </el-dialog>

    <!-- 发货弹窗 -->
    <el-dialog v-model="shipVisible" title="发货" width="450px">
      <el-form :model="shipForm" label-width="80px">
        <el-form-item label="物流公司" required>
          <el-select v-model="shipForm.company" placeholder="选择物流" style="width:100%">
            <el-option v-for="c in shippingCompanies" :key="c.code" :label="c.name" :value="c.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" required><el-input v-model="shipForm.trackingNo" placeholder="输入物流单号" /></el-form-item>
      </el-form>
      <template #footer><el-button @click="shipVisible=false">取消</el-button><el-button type="primary" :loading="shipLoading" @click="handleShip">确认发货</el-button></template>
    </el-dialog>

    <!-- 退款详情弹窗 -->
    <el-dialog v-model="refundDetailVisible" title="退款详情" width="500px">
      <template v-if="refundDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="退款单号" span="2">{{ refundDetail.refund_no }}</el-descriptions-item>
          <el-descriptions-item label="类型"><el-tag :type="refundDetail.type==='refund_and_return'?'warning':'info'" size="small">{{ refundTypeLabel(refundDetail.type) }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="退款金额"><span style="color:#f56c6c;font-size:16px">¥{{ refundDetail.amount }}</span></el-descriptions-item>
          <el-descriptions-item label="退款原因" span="2">{{ refundDetail.reason || '无' }}</el-descriptions-item>
          <el-descriptions-item v-if="refundDetail.shipping_company || refundDetail.shipping_no" label="退货物流" span="2">{{ refundDetail.shipping_company || '-' }} {{ refundDetail.shipping_no || '' }}</el-descriptions-item>
          <el-descriptions-item v-if="refundDetail.reject_reason" label="驳回原因" span="2"><span style="color:#f56c6c">{{ refundDetail.reject_reason }}</span></el-descriptions-item>
          <el-descriptions-item label="状态"><el-tag :type="refundStatusType(refundDetail.status)" size="small">{{ refundStatusLabel(refundDetail.status) }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ refundDetail.created_at }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-dialog>

    <!-- 订单配置弹窗 -->
    <el-dialog v-model="configVisible" title="订单配置" width="600px">
      <el-form :model="orderConfig" label-width="180px">
        <div class="config-group">
          <h4 class="config-group-title">📦 包邮设置</h4>
          <el-form-item label="包邮金额门槛">
            <el-input-number v-model="orderConfig.free_shipping_amount" :min="0" style="width:200px" />
            <span style="margin-left:8px;font-size:12px;color:#999">满X元包邮，0为全场包邮</span>
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">🧾 发票功能设置</h4>
          <el-form-item label="开启发票">
            <el-switch v-model="orderConfig.invoice_enabled" />
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">🔄 售后退款配置</h4>
          <el-form-item label="退款期限(天)">
            <el-input-number v-model="orderConfig.refund_days" :min="0" :max="365" style="width:200px" />
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">❌ 订单取消配置</h4>
          <el-form-item label="支付前可取消(分钟)">
            <el-input-number v-model="orderConfig.cancel_minutes" :min="0" :max="1440" style="width:200px" />
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">🚚 自动收货配置</h4>
          <el-form-item label="发货后自动收货(天)">
            <el-input-number v-model="orderConfig.auto_receive_days" :min="1" :max="90" style="width:200px" />
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">⭐ 自动评价配置</h4>
          <el-form-item label="自动好评(天)">
            <el-input-number v-model="orderConfig.auto_review_days" :min="1" :max="90" style="width:200px" />
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">🏪 到店自提配置</h4>
          <el-form-item label="开启到店自提">
            <el-switch v-model="orderConfig.self_pickup_enabled" />
          </el-form-item>
        </div>
        <div class="config-group">
          <h4 class="config-group-title">⚠️ 警戒库存配置</h4>
          <el-form-item label="库存预警阈值">
            <el-input-number v-model="orderConfig.stock_warning" :min="0" style="width:200px" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer><el-button @click="configVisible=false">取消</el-button><el-button type="primary" :loading="configLoading" @click="saveOrderConfig">保存配置</el-button></template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Setting } from '@element-plus/icons-vue'
import axios from 'axios'

const API = axios.create({ baseURL: '/api/admin' })
API.interceptors.request.use(c => { c.headers.Authorization = 'Bearer ' + localStorage.getItem('admin_token'); return c })

// ========== Tabs ==========
const tabs = [
  { key: 'orders', icon: '📋', label: '订单管理' },
  { key: 'refunds', icon: '🔄', label: '售后订单' },
  { key: 'cashier', icon: '🧾', label: '收银订单' },
  { key: 'verify', icon: '✅', label: '核销记录' },
]
const activeTab = ref('orders')
function switchTab(k) { activeTab.value = k }

// ========== 订单管理 ==========
const orderFilter = reactive({ type: '', payment: '', status: '', dateRange: null, keyword: '' })
const orderList = ref([])
const orderLoading = ref(false)
const orderPage = ref(1)
const orderPageSize = ref(10)
const orderTotal = ref(0)

async function fetchOrders() {
  orderLoading.value = true
  try {
    const r = await API.get('/orders', {
      params: {
        page: orderPage.value, pageSize: orderPageSize.value,
        status: orderFilter.status || undefined,
        keyword: orderFilter.keyword || undefined,
        dateStart: orderFilter.dateRange?.[0],
        dateEnd: orderFilter.dateRange?.[1]
      }
    })
    orderList.value = r.data.data?.list || []
    orderTotal.value = r.data.data?.total || 0
  } catch { orderList.value = []; orderTotal.value = 0 }
  finally { orderLoading.value = false }
}

const orderStatusMap = { pending_pay: ['warning', '待付款'], pending_ship: ['primary', '待发货'], shipped: ['', '已发货'], received: ['success', '已完成'], closed: ['info', '已关闭'], refunding: ['danger', '退款中'], cancelled: ['info', '已取消'] }
function orderStatusType(s) { return orderStatusMap[s]?.[0] || 'info' }
function orderStatusLabel(s) { return orderStatusMap[s]?.[1] || s }

// ========== 订单详情 ==========
const detailVisible = ref(false)
const detailData = ref(null)
async function openOrderDetail(row) {
  try {
    const r = await API.get('/orders/' + row.orderNo)
    detailData.value = r.data.data
  } catch { detailData.value = row }
  detailVisible.value = true
}

// ========== 发货 ==========
const shipVisible = ref(false)
const shipForm = reactive({ company: '', trackingNo: '' })
const shipLoading = ref(false)
const shipTarget = ref(null)
const shippingCompanies = ref([])

function openShipDialog(row) {
  shipTarget.value = row
  shipForm.company = ''; shipForm.trackingNo = ''
  shipVisible.value = true
}
async function handleShip() {
  if (!shipForm.company || !shipForm.trackingNo) return ElMessage.warning('请填写物流信息')
  shipLoading.value = true
  try {
    await API.post('/orders/' + shipTarget.value.id + '/ship', shipForm)
    ElMessage.success('发货成功')
    shipVisible.value = false; fetchOrders()
  } catch { ElMessage.error('发货失败') }
  finally { shipLoading.value = false }
}

async function cancelOrder(row) {
  try {
    await ElMessageBox.confirm('确认取消该订单？', '提示')
    await API.post('/orders/' + row.orderNo + '/cancel')
    ElMessage.success('已取消'); fetchOrders()
  } catch {}
}

// ========== 售后订单 ==========
const refundFilter = reactive({ status: '', dateRange: null, keyword: '' })
const refundList = ref([])
const refundLoading = ref(false)
const refundPage = ref(1)
const refundPageSize = ref(10)
const refundTotal = ref(0)

async function fetchRefunds() {
  refundLoading.value = true
  try {
    const r = await API.get('/aftersale/list', {
      params: { page: refundPage.value, pageSize: refundPageSize.value, status: refundFilter.status || undefined, keyword: refundFilter.keyword || undefined }
    })
    refundList.value = r.data.data?.list || []
    refundTotal.value = r.data.data?.total || 0
  } catch { refundList.value = []; refundTotal.value = 0 }
  finally { refundLoading.value = false }
}

const refundStatusMap = { pending: ['warning', '待审核'], approved: ['primary', '已同意'], shipped_back: ['warning', '已寄回'], received: ['primary', '已收货'], completed: ['success', '已退款'], rejected: ['danger', '已拒绝'], cancelled: ['info', '已取消'] }
const refundTypeMap = { only_refund: '仅退款', refund_and_return: '退货退款', exchange: '换货' }
function refundStatusType(s) { return refundStatusMap[s]?.[0] || 'info' }
function refundStatusLabel(s) { return refundStatusMap[s]?.[1] || s }
function refundTypeLabel(s) { return refundTypeMap[s] || s || '-' }

const refundDetailVisible = ref(false)
const refundDetail = ref(null)
function openRefundDetail(row) {
  refundDetail.value = row
  refundDetailVisible.value = true
}
async function approveRefund(row) {
  try { const r = await API.post('/aftersale/' + row.id + '/approve'); ElMessage.success(r.data.message || '已同意'); fetchRefunds() } catch { ElMessage.error('操作失败') }
}
async function rejectRefund(row) {
  try { const r = await API.post('/aftersale/' + row.id + '/reject', { reject_reason: '管理员驳回' }); ElMessage.success(r.data.message || '已拒绝'); fetchRefunds() } catch { ElMessage.error('操作失败') }
}
async function confirmReturnRefund(row) {
  try { await API.post('/aftersale/' + row.id + '/confirm-return'); ElMessage.success('已确认收货并退款'); fetchRefunds() } catch { ElMessage.error('操作失败') }
}

// ========== 订单配置 ==========
const configVisible = ref(false)
const configLoading = ref(false)
const orderConfig = reactive({
  free_shipping_amount: 0, invoice_enabled: true, refund_days: 7,
  cancel_minutes: 30, auto_receive_days: 15, auto_review_days: 30,
  self_pickup_enabled: false, stock_warning: 10
})

async function openOrderConfig() {
  try {
    const r = await API.get('/config')
    const grouped = r.data.data || {}
    const configs = grouped.order || []
    const map = {}
    configs.forEach(c => { map[c.key] = c.value })
    orderConfig.free_shipping_amount = parseInt(map.free_shipping) || 0
    orderConfig.invoice_enabled = map.invoice_enabled === '1'
    orderConfig.refund_days = parseInt(map.refund_days) || 7
    orderConfig.cancel_minutes = parseInt(map.cancel_minutes) || 30
    orderConfig.auto_receive_days = parseInt(map.auto_receive_days) || 15
    orderConfig.auto_review_days = parseInt(map.auto_review_days) || 30
    orderConfig.self_pickup_enabled = map.self_pickup_enabled === '1'
    orderConfig.stock_warning = parseInt(map.stock_warning) || 10
  } catch {}
  configVisible.value = true
}

async function saveOrderConfig() {
  configLoading.value = true
  try {
    await API.put('/config', {
      configs: [
        { key: 'free_shipping', value: String(orderConfig.free_shipping_amount) },
        { key: 'invoice_enabled', value: orderConfig.invoice_enabled ? '1' : '0' },
        { key: 'refund_days', value: String(orderConfig.refund_days) },
        { key: 'cancel_minutes', value: String(orderConfig.cancel_minutes) },
        { key: 'auto_receive_days', value: String(orderConfig.auto_receive_days) },
        { key: 'auto_review_days', value: String(orderConfig.auto_review_days) },
        { key: 'self_pickup_enabled', value: orderConfig.self_pickup_enabled ? '1' : '0' },
        { key: 'stock_warning', value: String(orderConfig.stock_warning) },
      ]
    })
    ElMessage.success('配置已保存')
    configVisible.value = false
  } catch { ElMessage.error('保存失败') }
  finally { configLoading.value = false }
}

onMounted(() => { fetchOrders(); fetchRefunds() })
</script>

<style scoped>
.orders-page { max-width: 1400px; }
.tabs-card { margin-bottom: 16px; padding: 4px 0; }
.order-tabs { display: flex; gap: 4px; }
.order-tab { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all .2s; font-size: 14px; }
.order-tab:hover { background: #f5f7fa; }
.order-tab.active { background: #ecf5ff; color: #409eff; font-weight: 600; }
.tab-icon { font-size: 18px; }
.tab-count { margin-left: 4px; }
.filter-card { margin-bottom: 16px; }
.table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pagination-wrapper { display: flex; justify-content: flex-end; padding: 16px 0 0; }
.config-group { margin-bottom: 20px; padding: 12px; background: #fafbfc; border-radius: 8px; }
.config-group-title { margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #333; }
</style>
