<template>
  <div class="orders-page">
    <!-- Header -->
    <div class="orders-header">
      <div class="header-left">
        <div class="data-title">📦 订单跟进</div>
        <p class="header-desc">全程追踪订单状态，智能预警交付风险</p>
      </div>
      <div class="header-actions">
        <button class="btn btn-secondary" @click="showImportModal = true">
          <i class="fas fa-file-import"></i> 导入订单
        </button>
        <button class="btn btn-secondary" @click="exportOrders">
          <i class="fas fa-download"></i> 导出
        </button>
        <button class="btn btn-secondary" @click="showTimelineModal = true">
          <i class="fas fa-stream"></i> 时间线
        </button>
        <button class="btn btn-primary" @click="openCreateModal">
          <i class="fas fa-plus"></i> 创建订单
        </button>
      </div>
    </div>

    <!-- Stats Row -->
    <div class="stats-row">
      <div class="stat-card-lg" @click="filterByStatus('active')">
        <div class="stat-icon-lg blue"><i class="fas fa-box"></i></div>
        <div class="stat-content-lg">
          <h3>{{ orderStats.active }}</h3>
          <p>进行中</p>
        </div>
        <div class="stat-trend up">
          <i class="fas fa-arrow-up"></i> 12%
        </div>
      </div>
      <div class="stat-card-lg" @click="filterByStatus('pending')">
        <div class="stat-icon-lg purple"><i class="fas fa-clock"></i></div>
        <div class="stat-content-lg">
          <h3>{{ orderStats.pending }}</h3>
          <p>待确认</p>
        </div>
        <div class="stat-badge">需处理</div>
      </div>
      <div class="stat-card-lg" @click="filterByStatus('production')">
        <div class="stat-icon-lg cyan"><i class="fas fa-industry"></i></div>
        <div class="stat-content-lg">
          <h3>{{ orderStats.production }}</h3>
          <p>生产中</p>
        </div>
      </div>
      <div class="stat-card-lg" @click="filterByStatus('shipping')">
        <div class="stat-icon-lg info"><i class="fas fa-shipping-fast"></i></div>
        <div class="stat-content-lg">
          <h3>{{ orderStats.shipping }}</h3>
          <p>发货中</p>
        </div>
      </div>
      <div class="stat-card-lg" @click="filterByStatus('completed')">
        <div class="stat-icon-lg green"><i class="fas fa-check-circle"></i></div>
        <div class="stat-content-lg">
          <h3>{{ orderStats.completed }}</h3>
          <p>已完成</p>
        </div>
        <div class="stat-trend up">
          <i class="fas fa-arrow-up"></i> 8%
        </div>
      </div>
      <div class="stat-card-lg alert" @click="filterByStatus('alert')">
        <div class="stat-icon-lg red"><i class="fas fa-exclamation-triangle"></i></div>
        <div class="stat-content-lg">
          <h3>{{ orderStats.alert }}</h3>
          <p>风险预警</p>
        </div>
        <div class="stat-badge danger">紧急</div>
      </div>
    </div>

    <!-- Revenue Overview -->
    <div class="revenue-overview">
      <div class="revenue-card">
        <div class="revenue-header">
          <span class="revenue-label">本月订单总额</span>
          <span class="revenue-trend up"><i class="fas fa-arrow-up"></i> 15.2%</span>
        </div>
        <div class="revenue-value">¥{{ formatNumber(monthRevenue) }}</div>
        <div class="revenue-breakdown">
          <span>已完成: ¥{{ formatNumber(completedRevenue) }}</span>
          <span>进行中: ¥{{ formatNumber(activeRevenue) }}</span>
        </div>
      </div>
      <div class="delivery-stats">
        <div class="delivery-item">
          <div class="delivery-icon success"><i class="fas fa-check"></i></div>
          <div class="delivery-info">
            <div class="delivery-value">{{ deliveryStats.onTime }}</div>
            <div class="delivery-label">按时交付</div>
          </div>
        </div>
        <div class="delivery-item">
          <div class="delivery-icon warning"><i class="fas fa-clock"></i></div>
          <div class="delivery-info">
            <div class="delivery-value">{{ deliveryStats.delayed }}</div>
            <div class="delivery-label">延期交付</div>
          </div>
        </div>
        <div class="delivery-item">
          <div class="delivery-icon primary"><i class="fas fa-percentage"></i></div>
          <div class="delivery-info">
            <div class="delivery-value">{{ deliveryStats.onTimeRate }}%</div>
            <div class="delivery-label">准时率</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tabs & Filters -->
    <div class="tabs-row">
      <div class="tabs">
        <div v-for="tab in tabs" :key="tab.key" 
             class="tab-item" :class="{ active: filterTab === tab.key }"
             @click="filterTab = tab.key">
          {{ tab.label }}
          <span class="tab-count">{{ tab.count }}</span>
        </div>
      </div>
      <div class="filter-actions">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" v-model="searchQuery" placeholder="搜索订单号、客户...">
        </div>
        <select class="filter-select" v-model="filterCountry">
          <option value="">全部地区</option>
          <option value="middle-east">中东</option>
          <option value="europe">欧洲</option>
          <option value="asia">亚洲</option>
          <option value="america">美洲</option>
        </select>
        <select class="filter-select" v-model="sortBy">
          <option value="date">按日期</option>
          <option value="amount">按金额</option>
          <option value="delivery">按交付期</option>
        </select>
      </div>
    </div>

    <!-- Orders List -->
    <div class="orders-list">
      <div v-for="order in filteredOrders" :key="order.id" 
           class="order-card"
           :class="{ alert: order.status === 'alert', completed: order.status === 'completed' }"
           @click="openOrderDetail(order)">
        <!-- Progress Circle -->
        <div class="order-progress-circle">
          <svg viewBox="0 0 36 36">
            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="var(--bg-hover)" stroke-width="3"/>
            <path class="circle-fill" fill="none" stroke-width="3" stroke-linecap="round"
                  :stroke="getStatusColor(order.status)"
                  :stroke-dasharray="order.progress + ', 100'"
                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
          </svg>
          <div class="progress-text">
            <template v-if="order.status === 'completed'">
              <i class="fas fa-check"></i>
            </template>
            <template v-else-if="order.status === 'alert'">
              <i class="fas fa-exclamation"></i>
            </template>
            <template v-else>
              {{ order.progress }}%
            </template>
          </div>
        </div>

        <!-- Order Info -->
        <div class="order-info">
          <div class="order-header">
            <span class="order-no">{{ order.orderNo }}</span>
            <span class="status-badge" :class="order.status">{{ getStatusLabel(order.status) }}</span>
            <span class="priority-badge" :class="order.priority" v-if="order.priority">{{ getPriorityLabel(order.priority) }}</span>
          </div>
          <div class="order-customer">
            <i class="fas fa-building"></i>
            <span>{{ order.customer }}</span>
            <span class="country-flag">{{ order.country }}</span>
          </div>
          <div class="order-meta">
            <span class="meta-item">
              <i class="fas fa-coins"></i>
              ¥{{ formatNumber(order.amount) }}
            </span>
            <span class="meta-item">
              <i class="fas fa-calendar-alt"></i>
              订单: {{ order.orderDate }}
            </span>
            <span class="meta-item">
              <i class="fas fa-truck"></i>
              交付: {{ order.deliveryDate }}
            </span>
          </div>
          <div class="order-products">
            <span v-for="product in order.products.slice(0, 3)" :key="product" class="product-tag">
              {{ product }}
            </span>
            <span v-if="order.products.length > 3" class="product-tag more">
              +{{ order.products.length - 3 }}
            </span>
          </div>
          <!-- Order Timeline Mini -->
          <div class="order-timeline-mini">
            <div class="timeline-step" :class="{ completed: order.progress >= 20, current: order.progress < 20 && order.progress >= 10 }">
              <div class="step-dot"></div>
              <span>确认</span>
            </div>
            <div class="timeline-line" :class="{ completed: order.progress >= 40 }"></div>
            <div class="timeline-step" :class="{ completed: order.progress >= 40, current: order.progress < 40 && order.progress >= 20 }">
              <div class="step-dot"></div>
              <span>生产</span>
            </div>
            <div class="timeline-line" :class="{ completed: order.progress >= 60 }"></div>
            <div class="timeline-step" :class="{ completed: order.progress >= 60, current: order.progress < 60 && order.progress >= 40 }">
              <div class="step-dot"></div>
              <span>质检</span>
            </div>
            <div class="timeline-line" :class="{ completed: order.progress >= 80 }"></div>
            <div class="timeline-step" :class="{ completed: order.progress >= 80, current: order.progress < 80 && order.progress >= 60 }">
              <div class="step-dot"></div>
              <span>发货</span>
            </div>
            <div class="timeline-line" :class="{ completed: order.progress >= 95 }"></div>
            <div class="timeline-step" :class="{ completed: order.progress >= 95 }">
              <div class="step-dot"></div>
              <span>签收</span>
            </div>
          </div>
        </div>

        <!-- Days Left / Alert -->
        <div class="order-deadline">
          <template v-if="order.status === 'completed'">
            <div class="deadline-completed">
              <i class="fas fa-check-circle"></i>
              <span>已完成</span>
            </div>
            <div class="completed-date">{{ order.completedDate || order.deliveryDate }}</div>
          </template>
          <template v-else-if="order.status === 'alert'">
            <div class="deadline-alert">
              <i class="fas fa-exclamation-triangle"></i>
              <span>延期 {{ order.delayDays }} 天</span>
            </div>
            <div class="alert-reason">{{ order.alertReason || '交付延迟' }}</div>
          </template>
          <template v-else>
            <div class="deadline-normal" :class="{ urgent: order.daysLeft <= 7, warning: order.daysLeft <= 14 && order.daysLeft > 7 }">
              <i class="fas fa-clock"></i>
              <span>剩 {{ order.daysLeft }} 天</span>
            </div>
            <div class="delivery-date">{{ order.deliveryDate }}</div>
          </template>
        </div>

        <!-- Actions -->
        <div class="order-actions" @click.stop>
          <button class="btn btn-secondary btn-sm" @click="updateOrderStatus(order)" v-if="order.status !== 'completed'">
            <i class="fas fa-sync"></i> 更新
          </button>
          <button class="btn btn-secondary btn-sm" @click="openOrderDetail(order)">
            <i class="fas fa-eye"></i> 详情
          </button>
          <button class="btn btn-secondary btn-sm" @click="sendMessage(order)">
            <i class="fas fa-comment"></i>
          </button>
          <div class="more-actions">
            <button class="btn btn-secondary btn-sm" @click="toggleMoreMenu(order)">
              <i class="fas fa-ellipsis-v"></i>
            </button>
            <div class="more-menu" v-if="order.showMoreMenu">
              <div class="menu-item" @click="editOrder(order)">
                <i class="fas fa-edit"></i> 编辑订单
              </div>
              <div class="menu-item" @click="copyOrder(order)">
                <i class="fas fa-copy"></i> 复制订单
              </div>
              <div class="menu-item" @click="createInvoice(order)">
                <i class="fas fa-file-invoice"></i> 生成发票
              </div>
              <div class="menu-item" @click="viewHistory(order)">
                <i class="fas fa-history"></i> 操作历史
              </div>
              <div class="menu-divider"></div>
              <div class="menu-item danger" @click="cancelOrder(order)">
                <i class="fas fa-times"></i> 取消订单
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Create Order Modal -->
    <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
      <div class="modal create-order-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-plus-circle"></i> 创建新订单</div>
          <button class="modal-close" @click="showCreateModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- Step Indicator -->
          <div class="step-indicator">
            <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
              <div class="step-number">1</div>
              <div class="step-label">基本信息</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 1 }"></div>
            <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
              <div class="step-number">2</div>
              <div class="step-label">产品明细</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 2 }"></div>
            <div class="step" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
              <div class="step-number">3</div>
              <div class="step-label">交付信息</div>
            </div>
            <div class="step-line" :class="{ active: currentStep > 3 }"></div>
            <div class="step" :class="{ active: currentStep >= 4 }">
              <div class="step-number">4</div>
              <div class="step-label">确认提交</div>
            </div>
          </div>

          <!-- Step 1: Basic Info -->
          <div v-if="currentStep === 1" class="step-content">
            <h4><i class="fas fa-info-circle"></i> 订单基本信息</h4>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">订单编号 <span class="required">*</span></label>
                <input type="text" class="form-input" v-model="newOrder.orderNo" placeholder="系统自动生成" disabled>
              </div>
              <div class="form-group">
                <label class="form-label">订单日期</label>
                <input type="date" class="form-input" v-model="newOrder.orderDate">
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">客户 <span class="required">*</span></label>
              <div class="customer-selector">
                <input type="text" class="form-input" v-model="newOrder.customerSearch" placeholder="搜索客户名称..." @input="searchCustomers">
                <div class="customer-suggestions" v-if="customerSuggestions.length > 0">
                  <div v-for="customer in customerSuggestions" :key="customer.id" 
                       class="customer-suggestion" @click="selectCustomer(customer)">
                    <div class="customer-name">{{ customer.name }}</div>
                    <div class="customer-info">{{ customer.country }} · {{ customer.industry }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-row" v-if="newOrder.selectedCustomer">
              <div class="form-group">
                <label class="form-label">客户国家</label>
                <input type="text" class="form-input" :value="newOrder.selectedCustomer.country" disabled>
              </div>
              <div class="form-group">
                <label class="form-label">联系人</label>
                <input type="text" class="form-input" :value="newOrder.selectedCustomer.contact" disabled>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">订单类型</label>
                <select class="form-select" v-model="newOrder.type">
                  <option value="standard">标准订单</option>
                  <option value="sample">样品订单</option>
                  <option value="replenishment">补货订单</option>
                  <option value="custom">定制订单</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">优先级</label>
                <select class="form-select" v-model="newOrder.priority">
                  <option value="urgent">紧急</option>
                  <option value="high">高</option>
                  <option value="normal">普通</option>
                  <option value="low">低</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">关联商机</label>
              <select class="form-select" v-model="newOrder.opportunity">
                <option value="">不关联</option>
                <option v-for="opp in opportunities" :key="opp.id" :value="opp.id">{{ opp.name }} - {{ opp.amount }}</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">备注</label>
              <textarea class="form-textarea" v-model="newOrder.remarks" rows="3" placeholder="订单备注信息..."></textarea>
            </div>
          </div>

          <!-- Step 2: Products -->
          <div v-if="currentStep === 2" class="step-content">
            <h4><i class="fas fa-boxes"></i> 产品明细</h4>
            <div class="products-table">
              <div class="table-header">
                <span class="col-product">产品</span>
                <span class="col-spec">规格</span>
                <span class="col-qty">数量</span>
                <span class="col-price">单价</span>
                <span class="col-total">小计</span>
                <span class="col-action"></span>
              </div>
              <div v-for="(item, index) in newOrder.items" :key="index" class="table-row">
                <span class="col-product">
                  <select class="inline-select" v-model="item.product">
                    <option value="">选择产品</option>
                    <option v-for="p in productList" :key="p.id" :value="p.id">{{ p.name }}</option>
                  </select>
                </span>
                <span class="col-spec">
                  <select class="inline-select" v-model="item.spec">
                    <option value="">规格</option>
                    <option v-for="s in getProductSpecs(item.product)" :key="s" :value="s">{{ s }}</option>
                  </select>
                </span>
                <span class="col-qty">
                  <input type="number" class="inline-input" v-model="item.qty" min="1" @input="calculateItemTotal(index)">
                </span>
                <span class="col-price">
                  <input type="number" class="inline-input" v-model="item.price" @input="calculateItemTotal(index)">
                </span>
                <span class="col-total">¥{{ formatNumber(item.total) }}</span>
                <span class="col-action">
                  <button class="btn-icon-sm danger" @click="removeItem(index)" v-if="newOrder.items.length > 1">
                    <i class="fas fa-trash"></i>
                  </button>
                </span>
              </div>
            </div>
            <button class="btn btn-secondary btn-sm" @click="addItem">
              <i class="fas fa-plus"></i> 添加产品
            </button>
            <div class="order-summary">
              <div class="summary-row">
                <span>产品数量</span>
                <span>{{ newOrder.items.length }} 种</span>
              </div>
              <div class="summary-row">
                <span>总数量</span>
                <span>{{ getTotalQty }} 件</span>
              </div>
              <div class="summary-row total">
                <span>订单金额</span>
                <span class="highlight">¥{{ formatNumber(getTotalAmount) }}</span>
              </div>
            </div>
          </div>

          <!-- Step 3: Delivery -->
          <div v-if="currentStep === 3" class="step-content">
            <h4><i class="fas fa-truck"></i> 交付信息</h4>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">交付日期 <span class="required">*</span></label>
                <input type="date" class="form-input" v-model="newOrder.deliveryDate">
              </div>
              <div class="form-group">
                <label class="form-label">贸易条款</label>
                <select class="form-select" v-model="newOrder.incoterms">
                  <option value="FOB">FOB - 离岸价</option>
                  <option value="CIF">CIF - 成本加保险费加运费</option>
                  <option value="DDP">DDP - 完税后交货</option>
                  <option value="EXW">EXW - 工厂交货</option>
                  <option value="DAP">DAP - 目的地交货</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">付款方式</label>
                <select class="form-select" v-model="newOrder.paymentTerms">
                  <option value="T/T">T/T - 电汇</option>
                  <option value="L/C">L/C - 信用证</option>
                  <option value="D/P">D/P - 付款交单</option>
                  <option value="D/A">D/A - 承兑交单</option>
                  <option value="Western Union">Western Union</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">付款比例</label>
                <div class="payment-stages">
                  <div class="stage">
                    <input type="number" class="stage-input" v-model="newOrder.depositRatio" min="0" max="100">
                    <span>% 定金</span>
                  </div>
                  <div class="stage">
                    <span>{{ 100 - newOrder.depositRatio }}%</span>
                    <span>尾款</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">收货地址</label>
              <textarea class="form-textarea" v-model="newOrder.shippingAddress" rows="2" placeholder="详细收货地址..."></textarea>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">目的港口</label>
                <input type="text" class="form-input" v-model="newOrder.destinationPort" placeholder="如: Jeddah Port">
              </div>
              <div class="form-group">
                <label class="form-label">运输方式</label>
                <select class="form-select" v-model="newOrder.shippingMethod">
                  <option value="sea">海运</option>
                  <option value="air">空运</option>
                  <option value="express">快递</option>
                  <option value="land">陆运</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">特殊要求</label>
              <textarea class="form-textarea" v-model="newOrder.specialRequirements" rows="2" placeholder="包装要求、标签要求、认证要求等..."></textarea>
            </div>
            <!-- Production Time Estimate -->
            <div class="ai-estimate">
              <div class="estimate-header">
                <i class="fas fa-robot"></i>
                <span>AI 交付预估</span>
              </div>
              <div class="estimate-content">
                <div class="estimate-item">
                  <span class="label">预计生产时间</span>
                  <span class="value">{{ estimatedProductionDays }} 天</span>
                </div>
                <div class="estimate-item">
                  <span class="label">预计运输时间</span>
                  <span class="value">{{ estimatedShippingDays }} 天</span>
                </div>
                <div class="estimate-item highlight">
                  <span class="label">建议交付日期</span>
                  <span class="value">{{ suggestedDeliveryDate }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Step 4: Confirm -->
          <div v-if="currentStep === 4" class="step-content">
            <h4><i class="fas fa-check-double"></i> 确认订单信息</h4>
            <div class="confirm-section">
              <div class="confirm-header">
                <span>基本信息</span>
                <button class="btn-link" @click="goToStep(1)">修改</button>
              </div>
              <div class="confirm-grid">
                <div class="confirm-item">
                  <label>订单编号</label>
                  <span>{{ newOrder.orderNo }}</span>
                </div>
                <div class="confirm-item">
                  <label>客户</label>
                  <span>{{ newOrder.selectedCustomer?.name || newOrder.customerSearch }}</span>
                </div>
                <div class="confirm-item">
                  <label>订单类型</label>
                  <span>{{ getOrderTypeLabel(newOrder.type) }}</span>
                </div>
                <div class="confirm-item">
                  <label>优先级</label>
                  <span>{{ getPriorityLabel(newOrder.priority) }}</span>
                </div>
              </div>
            </div>
            <div class="confirm-section">
              <div class="confirm-header">
                <span>产品明细</span>
                <button class="btn-link" @click="goToStep(2)">修改</button>
              </div>
              <div class="confirm-products">
                <div v-for="(item, index) in newOrder.items" :key="index" class="confirm-product-item">
                  <span class="product-name">{{ getProductName(item.product) }}</span>
                  <span class="product-spec">{{ item.spec }}</span>
                  <span class="product-qty">× {{ item.qty }}</span>
                  <span class="product-price">¥{{ formatNumber(item.total) }}</span>
                </div>
                <div class="confirm-total">
                  <span>订单总额</span>
                  <span class="total-amount">¥{{ formatNumber(getTotalAmount) }}</span>
                </div>
              </div>
            </div>
            <div class="confirm-section">
              <div class="confirm-header">
                <span>交付信息</span>
                <button class="btn-link" @click="goToStep(3)">修改</button>
              </div>
              <div class="confirm-grid">
                <div class="confirm-item">
                  <label>交付日期</label>
                  <span>{{ newOrder.deliveryDate }}</span>
                </div>
                <div class="confirm-item">
                  <label>贸易条款</label>
                  <span>{{ newOrder.incoterms }}</span>
                </div>
                <div class="confirm-item">
                  <label>付款方式</label>
                  <span>{{ newOrder.paymentTerms }}</span>
                </div>
                <div class="confirm-item">
                  <label>运输方式</label>
                  <span>{{ getShippingMethodLabel(newOrder.shippingMethod) }}</span>
                </div>
              </div>
            </div>
            <div class="confirm-checkboxes">
              <label class="checkbox-item">
                <input type="checkbox" v-model="confirmChecks.customer">
                <span class="checkmark"></span>
                <span>客户信息已确认</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="confirmChecks.products">
                <span class="checkmark"></span>
                <span>产品明细已确认</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="confirmChecks.delivery">
                <span class="checkmark"></span>
                <span>交付信息已确认</span>
              </label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="prevStep" v-if="currentStep > 1">
            <i class="fas fa-arrow-left"></i> 上一步
          </button>
          <button class="btn btn-secondary" @click="showCreateModal = false" v-if="currentStep === 1">取消</button>
          <button class="btn btn-primary" @click="nextStep" v-if="currentStep < 4">
            下一步 <i class="fas fa-arrow-right"></i>
          </button>
          <button class="btn btn-primary" @click="createOrder" v-if="currentStep === 4" :disabled="!canCreate">
            <i class="fas fa-check"></i> 创建订单
          </button>
        </div>
      </div>
    </div>

    <!-- Order Detail Modal -->
    <div v-if="showDetailModal" class="modal-overlay" @click.self="showDetailModal = false">
      <div class="modal order-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <span class="order-no-lg">{{ selectedOrder?.orderNo }}</span>
            <span class="status-badge" :class="selectedOrder?.status">{{ getStatusLabel(selectedOrder?.status) }}</span>
          </div>
          <button class="modal-close" @click="showDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedOrder">
          <!-- Order Progress -->
          <div class="detail-progress-section">
            <div class="progress-timeline">
              <div class="progress-step" :class="{ completed: true, current: selectedOrder.currentStep === 'confirm' }">
                <div class="step-icon"><i class="fas fa-file-alt"></i></div>
                <div class="step-info">
                  <div class="step-name">订单确认</div>
                  <div class="step-date">{{ selectedOrder.confirmDate || selectedOrder.orderDate }}</div>
                </div>
              </div>
              <div class="progress-connector" :class="{ completed: selectedOrder.progress >= 40 }"></div>
              <div class="progress-step" :class="{ completed: selectedOrder.progress >= 40, current: selectedOrder.currentStep === 'production' }">
                <div class="step-icon"><i class="fas fa-industry"></i></div>
                <div class="step-info">
                  <div class="step-name">生产中</div>
                  <div class="step-date" v-if="selectedOrder.progress >= 40">{{ selectedOrder.productionDate || '进行中' }}</div>
                  <div class="step-date" v-else>待开始</div>
                </div>
              </div>
              <div class="progress-connector" :class="{ completed: selectedOrder.progress >= 60 }"></div>
              <div class="progress-step" :class="{ completed: selectedOrder.progress >= 60, current: selectedOrder.currentStep === 'qc' }">
                <div class="step-icon"><i class="fas fa-clipboard-check"></i></div>
                <div class="step-info">
                  <div class="step-name">质检完成</div>
                  <div class="step-date" v-if="selectedOrder.progress >= 60">{{ selectedOrder.qcDate || '已通过' }}</div>
                  <div class="step-date" v-else>待质检</div>
                </div>
              </div>
              <div class="progress-connector" :class="{ completed: selectedOrder.progress >= 80 }"></div>
              <div class="progress-step" :class="{ completed: selectedOrder.progress >= 80, current: selectedOrder.currentStep === 'shipping' }">
                <div class="step-icon"><i class="fas fa-shipping-fast"></i></div>
                <div class="step-info">
                  <div class="step-name">发货运输</div>
                  <div class="step-date" v-if="selectedOrder.progress >= 80">{{ selectedOrder.shippingDate || '运输中' }}</div>
                  <div class="step-date" v-else>待发货</div>
                </div>
              </div>
              <div class="progress-connector" :class="{ completed: selectedOrder.progress >= 95 }"></div>
              <div class="progress-step" :class="{ completed: selectedOrder.progress >= 95 }">
                <div class="step-icon"><i class="fas fa-check-circle"></i></div>
                <div class="step-info">
                  <div class="step-name">客户签收</div>
                  <div class="step-date" v-if="selectedOrder.progress >= 95">{{ selectedOrder.deliveryDate }}</div>
                  <div class="step-date" v-else>待签收</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Basic Info -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-info-circle"></i> 基本信息</h4>
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>订单编号</label>
                <span>{{ selectedOrder.orderNo }}</span>
              </div>
              <div class="detail-item">
                <label>客户名称</label>
                <span>{{ selectedOrder.customer }}</span>
              </div>
              <div class="detail-item">
                <label>国家/地区</label>
                <span>{{ selectedOrder.country }}</span>
              </div>
              <div class="detail-item">
                <label>订单日期</label>
                <span>{{ selectedOrder.orderDate }}</span>
              </div>
              <div class="detail-item">
                <label>交付日期</label>
                <span>{{ selectedOrder.deliveryDate }}</span>
              </div>
              <div class="detail-item">
                <label>订单金额</label>
                <span class="highlight">¥{{ formatNumber(selectedOrder.amount) }}</span>
              </div>
            </div>
          </div>

          <!-- Products -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-boxes"></i> 产品明细</h4>
            </div>
            <div class="products-detail-table">
              <div class="table-head">
                <span>产品名称</span>
                <span>规格</span>
                <span>数量</span>
                <span>单价</span>
                <span>小计</span>
              </div>
              <div v-for="(product, index) in selectedOrder.productDetails" :key="index" class="table-row-detail">
                <span>{{ product.name }}</span>
                <span>{{ product.spec }}</span>
                <span>{{ product.qty }}</span>
                <span>¥{{ formatNumber(product.price) }}</span>
                <span>¥{{ formatNumber(product.total) }}</span>
              </div>
              <div class="table-footer">
                <span colspan="4">订单总额</span>
                <span class="total-highlight">¥{{ formatNumber(selectedOrder.amount) }}</span>
              </div>
            </div>
          </div>

          <!-- Delivery Info -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-truck"></i> 交付信息</h4>
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>贸易条款</label>
                <span>{{ selectedOrder.incoterms || 'FOB' }}</span>
              </div>
              <div class="detail-item">
                <label>付款方式</label>
                <span>{{ selectedOrder.paymentTerms || 'T/T' }}</span>
              </div>
              <div class="detail-item">
                <label>运输方式</label>
                <span>{{ getShippingMethodLabel(selectedOrder.shippingMethod) || '海运' }}</span>
              </div>
              <div class="detail-item">
                <label>目的港口</label>
                <span>{{ selectedOrder.destinationPort || '-' }}</span>
              </div>
            </div>
          </div>

          <!-- Tracking Info -->
          <div class="detail-section" v-if="selectedOrder.tracking">
            <div class="section-header">
              <h4><i class="fas fa-map-marker-alt"></i> 物流追踪</h4>
            </div>
            <div class="tracking-info">
              <div class="tracking-header">
                <div class="tracking-no">
                  <label>运单号</label>
                  <span>{{ selectedOrder.tracking.number }}</span>
                </div>
                <div class="tracking-carrier">
                  <label>承运商</label>
                  <span>{{ selectedOrder.tracking.carrier }}</span>
                </div>
              </div>
              <div class="tracking-timeline">
                <div v-for="(event, index) in selectedOrder.tracking.events" :key="index" 
                     class="tracking-event" :class="{ latest: index === 0 }">
                  <div class="event-dot"></div>
                  <div class="event-content">
                    <div class="event-status">{{ event.status }}</div>
                    <div class="event-location">{{ event.location }}</div>
                    <div class="event-time">{{ event.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- AI Suggestions -->
          <div class="detail-section ai-section" v-if="selectedOrder.aiSuggestions">
            <div class="section-header">
              <h4><i class="fas fa-robot"></i> AI 建议</h4>
            </div>
            <div class="ai-suggestions">
              <div class="ai-suggestion-item" v-for="(suggestion, index) in selectedOrder.aiSuggestions" :key="index">
                <div class="suggestion-icon" :class="suggestion.type">
                  <i :class="getSuggestionIcon(suggestion.type)"></i>
                </div>
                <div class="suggestion-content">
                  <div class="suggestion-title">{{ suggestion.title }}</div>
                  <div class="suggestion-desc">{{ suggestion.description }}</div>
                </div>
                <button class="btn btn-sm btn-outline" @click="handleSuggestion(suggestion)">处理</button>
              </div>
            </div>
          </div>

          <!-- History -->
          <div class="detail-section">
            <div class="section-header">
              <h4><i class="fas fa-history"></i> 操作记录</h4>
            </div>
            <div class="history-list">
              <div v-for="(record, index) in selectedOrder.history" :key="index" class="history-record">
                <div class="record-time">{{ record.time }}</div>
                <div class="record-content">
                  <span class="record-action">{{ record.action }}</span>
                  <span class="record-user">by {{ record.user }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="editOrder(selectedOrder)">
            <i class="fas fa-edit"></i> 编辑
          </button>
          <button class="btn btn-secondary" @click="createInvoice(selectedOrder)">
            <i class="fas fa-file-invoice"></i> 发票
          </button>
          <button class="btn btn-secondary" @click="showDetailModal = false">关闭</button>
          <button class="btn btn-primary" @click="updateOrderStatus(selectedOrder)" v-if="selectedOrder?.status !== 'completed'">
            <i class="fas fa-sync"></i> 更新状态
          </button>
        </div>
      </div>
    </div>

    <!-- Update Status Modal -->
    <div v-if="showUpdateModal" class="modal-overlay" @click.self="showUpdateModal = false">
      <div class="modal update-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-sync"></i> 更新订单状态</div>
          <button class="modal-close" @click="showUpdateModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="updatingOrder">
          <div class="current-status">
            <label>当前状态</label>
            <span class="status-badge" :class="updatingOrder.status">{{ getStatusLabel(updatingOrder.status) }}</span>
          </div>
          <div class="form-group">
            <label class="form-label">新状态</label>
            <select class="form-select" v-model="newStatus">
              <option value="pending">待确认</option>
              <option value="production">生产中</option>
              <option value="shipping">发货中</option>
              <option value="completed">已完成</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">进度百分比</label>
            <div class="progress-slider">
              <input type="range" min="0" max="100" v-model="newProgress">
              <span class="progress-value">{{ newProgress }}%</span>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">备注</label>
            <textarea class="form-textarea" v-model="updateNote" rows="3" placeholder="更新说明..."></textarea>
          </div>
          <div class="form-group" v-if="newStatus === 'shipping'">
            <label class="form-label">物流信息</label>
            <div class="form-row">
              <input type="text" class="form-input" v-model="trackingNumber" placeholder="运单号">
            </div>
            <div class="form-row">
              <input type="text" class="form-input" v-model="trackingCarrier" placeholder="承运商">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showUpdateModal = false">取消</button>
          <button class="btn btn-primary" @click="confirmUpdate">确认更新</button>
        </div>
      </div>
    </div>

    <!-- Timeline Modal -->
    <div v-if="showTimelineModal" class="modal-overlay" @click.self="showTimelineModal = false">
      <div class="modal timeline-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-stream"></i> 订单时间线</div>
          <button class="modal-close" @click="showTimelineModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="timeline-filters">
            <select class="filter-select-sm" v-model="timelineFilter">
              <option value="all">全部订单</option>
              <option value="today">今日</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
            </select>
          </div>
          <div class="timeline-events">
            <div v-for="event in timelineEvents" :key="event.id" class="timeline-event-item">
              <div class="event-date">{{ event.date }}</div>
              <div class="event-dot" :class="event.type"></div>
              <div class="event-card">
                <div class="event-header">
                  <span class="event-type" :class="event.type">{{ getEventLabel(event.type) }}</span>
                  <span class="event-order">{{ event.orderNo }}</span>
                </div>
                <div class="event-title">{{ event.title }}</div>
                <div class="event-meta">
                  <span><i class="fas fa-building"></i> {{ event.customer }}</span>
                  <span><i class="fas fa-coins"></i> ¥{{ formatNumber(event.amount) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showTimelineModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Toast -->
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-info-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

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

const filterTab = ref('all')
const searchQuery = ref('')
const filterCountry = ref('')
const sortBy = ref('date')
const showCreateModal = ref(false)
const showDetailModal = ref(false)
const showUpdateModal = ref(false)
const showTimelineModal = ref(false)
const showImportModal = ref(false)
const selectedOrder = ref(null)
const updatingOrder = ref(null)
const currentStep = ref(1)
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

// Update modal
const newStatus = ref('')
const newProgress = ref(0)
const updateNote = ref('')
const trackingNumber = ref('')
const trackingCarrier = ref('')
const timelineFilter = ref('all')

// Confirm checks
const confirmChecks = ref({ customer: false, products: false, delivery: false })

// New order form
const newOrder = ref({
  orderNo: 'SO-2026-' + String(Math.floor(Math.random() * 9000) + 1000),
  orderDate: new Date().toISOString().split('T')[0],
  customerSearch: '',
  selectedCustomer: null,
  type: 'standard',
  priority: 'normal',
  opportunity: '',
  remarks: '',
  items: [{ product: '', spec: '', qty: 1, price: 0, total: 0 }],
  deliveryDate: '',
  incoterms: 'FOB',
  paymentTerms: 'T/T',
  depositRatio: 30,
  shippingAddress: '',
  destinationPort: '',
  shippingMethod: 'sea',
  specialRequirements: ''
})

const orderStats = {
  active: 15,
  pending: 5,
  production: 7,
  shipping: 3,
  completed: 89,
  alert: 2
}

const monthRevenue = 12850000
const completedRevenue = 8900000
const activeRevenue = 3950000

const deliveryStats = {
  onTime: 82,
  delayed: 7,
  onTimeRate: 92
}

const tabs = [
  { key: 'all', label: '全部订单', count: 114 },
  { key: 'pending', label: '待确认', count: 5 },
  { key: 'production', label: '生产中', count: 7 },
  { key: 'shipping', label: '发货中', count: 3 },
  { key: 'completed', label: '已完成', count: 89 },
  { key: 'alert', label: '需关注', count: 2 }
]

const orders = ref([
  { 
    id: 1, 
    orderNo: 'SO-2026-0318', 
    status: 'production', 
    currentStep: 'production',
    customer: 'Riyadh Tech Distribution', 
    country: '🇸🇦 沙特', 
    amount: 850000, 
    orderDate: '2026-03-18', 
    deliveryDate: '2026-04-10', 
    progress: 65, 
    daysLeft: 22, 
    priority: 'high',
    products: ['NVMe SSD 2TB × 200', 'SATA SSD 1TB × 150'],
    productDetails: [
      { name: 'NVMe SSD 2TB', spec: 'M.2 2280', qty: 200, price: 2800, total: 560000 },
      { name: 'SATA SSD 1TB', spec: '2.5英寸', qty: 150, price: 1933, total: 290000 }
    ],
    incoterms: 'FOB',
    paymentTerms: 'T/T',
    shippingMethod: 'sea',
    destinationPort: 'Jeddah Port',
    history: [
      { time: '2026-03-20 14:30', action: '生产进度更新至65%', user: '系统' },
      { time: '2026-03-19 09:00', action: '开始生产', user: '生产部' },
      { time: '2026-03-18 15:00', action: '订单确认', user: '销售部' },
      { time: '2026-03-18 10:30', action: '创建订单', user: '张经理' }
    ],
    aiSuggestions: [
      { type: 'warning', title: '生产进度提醒', description: '当前进度65%，建议加快生产节奏以确保按时交付' },
      { type: 'info', title: '付款提醒', description: '尾款70%预计在发货前收取' }
    ],
    showMoreMenu: false
  },
  { 
    id: 2, 
    orderNo: 'SO-2026-0315', 
    status: 'pending', 
    currentStep: 'confirm',
    customer: 'Berlin Tech GmbH', 
    country: '🇩🇪 德国', 
    amount: 1200000, 
    orderDate: '2026-03-15', 
    deliveryDate: '2026-04-20', 
    progress: 10, 
    daysLeft: 32, 
    priority: 'urgent',
    products: ['企业级SSD 4TB × 100'],
    productDetails: [
      { name: '企业级SSD 4TB', spec: 'U.2', qty: 100, price: 12000, total: 1200000 }
    ],
    incoterms: 'CIF',
    paymentTerms: 'L/C',
    shippingMethod: 'sea',
    destinationPort: 'Hamburg Port',
    history: [
      { time: '2026-03-15 14:00', action: '创建订单', user: '李主管' }
    ],
    aiSuggestions: [
      { type: 'info', title: 'L/C开证提醒', description: '信用证需在7天内开立，请跟进客户银行' }
    ],
    showMoreMenu: false
  },
  { 
    id: 3, 
    orderNo: 'SO-2026-0301', 
    status: 'shipping', 
    currentStep: 'shipping',
    customer: 'Paris Storage Solutions', 
    country: '🇫🇷 法国', 
    amount: 680000, 
    orderDate: '2026-03-01', 
    deliveryDate: '2026-03-28', 
    progress: 85, 
    daysLeft: 9, 
    priority: 'normal',
    products: ['NVMe SSD 1TB × 300', 'SAS SSD 2TB × 50'],
    productDetails: [
      { name: 'NVMe SSD 1TB', spec: 'M.2 2280', qty: 300, price: 1600, total: 480000 },
      { name: 'SAS SSD 2TB', spec: '2.5英寸', qty: 50, price: 4000, total: 200000 }
    ],
    incoterms: 'DDP',
    paymentTerms: 'T/T',
    shippingMethod: 'air',
    destinationPort: 'Paris CDG',
    tracking: {
      number: 'FX-89238472',
      carrier: 'FedEx International',
      events: [
        { status: '航班起飞', location: '深圳 → 巴黎', time: '2026-03-23 18:00' },
        { status: '清关完成', location: '深圳机场', time: '2026-03-23 14:30' },
        { status: '货物入库', location: '深圳仓库', time: '2026-03-22 16:00' }
      ]
    },
    history: [
      { time: '2026-03-23 18:00', action: '航班起飞', user: '系统' },
      { time: '2026-03-22 14:00', action: '发货', user: '物流部' },
      { time: '2026-03-20 10:00', action: '质检通过', user: '质检部' }
    ],
    showMoreMenu: false
  },
  { 
    id: 4, 
    orderNo: 'SO-2026-0225', 
    status: 'completed', 
    currentStep: 'completed',
    customer: 'Kuwait Data Systems', 
    country: '🇰🇼 科威特', 
    amount: 520000, 
    orderDate: '2026-02-25', 
    deliveryDate: '2026-03-10', 
    completedDate: '2026-03-08',
    progress: 100, 
    daysLeft: 0, 
    priority: 'normal',
    products: ['SATA SSD 2TB × 200'],
    productDetails: [
      { name: 'SATA SSD 2TB', spec: '2.5英寸', qty: 200, price: 2600, total: 520000 }
    ],
    incoterms: 'FOB',
    paymentTerms: 'T/T',
    shippingMethod: 'sea',
    destinationPort: 'Shuwaikh Port',
    history: [
      { time: '2026-03-08 11:00', action: '客户签收', user: '客户' },
      { time: '2026-03-05 08:00', action: '货物到达目的港', user: '系统' },
      { time: '2026-02-28 16:00', action: '发货', user: '物流部' }
    ],
    showMoreMenu: false
  },
  { 
    id: 5, 
    orderNo: 'SO-2026-0308', 
    status: 'alert', 
    currentStep: 'production',
    customer: 'Singapore Digital Pte Ltd', 
    country: '🇸🇬 新加坡', 
    amount: 380000, 
    orderDate: '2026-03-08', 
    deliveryDate: '2026-03-25', 
    progress: 70, 
    daysLeft: 0, 
    delayDays: 3, 
    alertReason: '原材料延迟导致生产延期',
    priority: 'urgent',
    products: ['NVMe SSD 2TB × 100'],
    productDetails: [
      { name: 'NVMe SSD 2TB', spec: 'M.2 2280', qty: 100, price: 3800, total: 380000 }
    ],
    incoterms: 'CIF',
    paymentTerms: 'T/T',
    shippingMethod: 'sea',
    destinationPort: 'Singapore Port',
    history: [
      { time: '2026-03-25 09:00', action: '标记为延期', user: '系统' },
      { time: '2026-03-20 14:00', action: '生产进度更新至70%', user: '生产部' }
    ],
    aiSuggestions: [
      { type: 'alert', title: '延期预警', description: '建议立即联系客户说明情况，并提供补偿方案' },
      { type: 'info', title: '快速通道', description: '可申请加急空运，预计额外费用¥8,000' }
    ],
    showMoreMenu: false
  },
  {
    id: 6,
    orderNo: 'SO-2026-0320',
    status: 'production',
    currentStep: 'production',
    customer: 'Dubai Electronics Trading',
    country: '🇦🇪 阿联酋',
    amount: 920000,
    orderDate: '2026-03-20',
    deliveryDate: '2026-04-15',
    progress: 35,
    daysLeft: 27,
    priority: 'high',
    products: ['NVMe SSD 4TB × 150', 'SATA SSD 2TB × 100'],
    productDetails: [
      { name: 'NVMe SSD 4TB', spec: 'M.2 2280', qty: 150, price: 4200, total: 630000 },
      { name: 'SATA SSD 2TB', spec: '2.5英寸', qty: 100, price: 2900, total: 290000 }
    ],
    incoterms: 'FOB',
    paymentTerms: 'T/T',
    shippingMethod: 'sea',
    destinationPort: 'Jebel Ali Port',
    history: [
      { time: '2026-03-21 10:00', action: '开始生产', user: '生产部' },
      { time: '2026-03-20 14:00', action: '订单确认', user: '销售部' }
    ],
    showMoreMenu: false
  }
])

const customerSuggestions = ref([
  { id: 1, name: 'Riyadh Tech Distribution', country: '🇸🇦 沙特', industry: '电子产品分销', contact: 'Mohammed Al-Rashid' },
  { id: 2, name: 'Berlin Tech GmbH', country: '🇩🇪 德国', industry: '数据中心', contact: 'Hans Mueller' },
  { id: 3, name: 'Paris Storage Solutions', country: '🇫🇷 法国', industry: '存储解决方案', contact: 'Jean Dupont' }
])

const opportunities = ref([
  { id: 'opp1', name: '中东SSD大批量采购', amount: '¥850K' },
  { id: 'opp2', name: '欧洲数据中心项目', amount: '¥1.2M' },
  { id: 'opp3', name: '东南亚分销商订单', amount: '¥680K' }
])

const productList = ref([
  { id: 'p1', name: 'NVMe SSD 1TB', specs: ['M.2 2280', 'M.2 2242'] },
  { id: 'p2', name: 'NVMe SSD 2TB', specs: ['M.2 2280', 'U.2'] },
  { id: 'p3', name: 'NVMe SSD 4TB', specs: ['M.2 2280', 'U.2', 'AIC'] },
  { id: 'p4', name: 'SATA SSD 1TB', specs: ['2.5英寸', 'M.2 2280'] },
  { id: 'p5', name: 'SATA SSD 2TB', specs: ['2.5英寸'] },
  { id: 'p6', name: '企业级SSD 4TB', specs: ['U.2', 'AIC'] },
  { id: 'p7', name: 'SAS SSD 2TB', specs: ['2.5英寸'] }
])

const timelineEvents = ref([
  { id: 1, date: '2026-03-20', type: 'create', orderNo: 'SO-2026-0320', title: '新订单创建', customer: 'Dubai Electronics Trading', amount: 920000 },
  { id: 2, date: '2026-03-20', type: 'ship', orderNo: 'SO-2026-0301', title: '订单已发货', customer: 'Paris Storage Solutions', amount: 680000 },
  { id: 3, date: '2026-03-19', type: 'production', orderNo: 'SO-2026-0318', title: '开始生产', customer: 'Riyadh Tech Distribution', amount: 850000 },
  { id: 4, date: '2026-03-18', type: 'confirm', orderNo: 'SO-2026-0318', title: '订单确认', customer: 'Riyadh Tech Distribution', amount: 850000 },
  { id: 5, date: '2026-03-15', type: 'create', orderNo: 'SO-2026-0315', title: '新订单创建', customer: 'Berlin Tech GmbH', amount: 1200000 },
  { id: 6, date: '2026-03-08', type: 'complete', orderNo: 'SO-2026-0225', title: '订单完成', customer: 'Kuwait Data Systems', amount: 520000 }
])

// Computed
const filteredOrders = computed(() => {
  let result = orders.value
  if (filterTab.value !== 'all') {
    result = result.filter(o => o.status === filterTab.value)
  }
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(o => 
      o.orderNo.toLowerCase().includes(query) || 
      o.customer.toLowerCase().includes(query)
    )
  }
  return result
})

const getTotalQty = computed(() => {
  return newOrder.value.items.reduce((sum, item) => sum + (parseInt(item.qty) || 0), 0)
})

const getTotalAmount = computed(() => {
  return newOrder.value.items.reduce((sum, item) => sum + (item.total || 0), 0)
})

const estimatedProductionDays = computed(() => {
  const qty = getTotalQty.value
  if (qty > 500) return 25
  if (qty > 200) return 15
  return 10
})

const estimatedShippingDays = computed(() => {
  const method = newOrder.value.shippingMethod
  if (method === 'air') return 5
  if (method === 'express') return 3
  if (method === 'sea') return 20
  return 10
})

const suggestedDeliveryDate = computed(() => {
  const today = new Date()
  const days = estimatedProductionDays.value + estimatedShippingDays.value + 5
  const date = new Date(today.getTime() + days * 24 * 60 * 60 * 1000)
  return date.toISOString().split('T')[0]
})

const canCreate = computed(() => {
  return confirmChecks.value.customer && confirmChecks.value.products && confirmChecks.value.delivery
})

// Methods
const formatNumber = (num) => num.toLocaleString()

const getStatusBg = (status) => {
  const map = {
    pending: 'rgba(139, 92, 246, 0.2)',
    production: 'rgba(99, 102, 241, 0.2)',
    shipping: 'rgba(6, 182, 212, 0.2)',
    completed: 'rgba(16, 185, 129, 0.2)',
    alert: 'rgba(239, 68, 68, 0.2)'
  }
  return map[status] || 'var(--bg-hover)'
}

const getStatusColor = (status) => {
  const map = {
    pending: '#8B5CF6',
    production: '#6366F1',
    shipping: '#06B6D4',
    completed: '#10B981',
    alert: '#EF4444'
  }
  return map[status] || 'var(--text-secondary)'
}

const getStatusLabel = (status) => {
  const map = {
    pending: '待确认',
    production: '生产中',
    shipping: '发货中',
    completed: '已完成',
    alert: '需关注'
  }
  return map[status] || status
}

const getPriorityLabel = (priority) => {
  const map = {
    urgent: '紧急',
    high: '高优',
    normal: '普通',
    low: '低'
  }
  return map[priority] || priority
}

const getShippingMethodLabel = (method) => {
  const map = {
    sea: '海运',
    air: '空运',
    express: '快递',
    land: '陆运'
  }
  return map[method] || method
}

const getOrderTypeLabel = (type) => {
  const map = {
    standard: '标准订单',
    sample: '样品订单',
    replenishment: '补货订单',
    custom: '定制订单'
  }
  return map[type] || type
}

const getProductSpecs = (productId) => {
  const product = productList.value.find(p => p.id === productId)
  return product ? product.specs : []
}

const getProductName = (productId) => {
  const product = productList.value.find(p => p.id === productId)
  return product ? product.name : ''
}

const getSuggestionIcon = (type) => {
  const map = {
    warning: 'fas fa-exclamation-triangle',
    info: 'fas fa-info-circle',
    alert: 'fas fa-bell'
  }
  return map[type] || 'fas fa-lightbulb'
}

const getEventLabel = (type) => {
  const map = {
    create: '创建',
    confirm: '确认',
    production: '生产',
    ship: '发货',
    complete: '完成'
  }
  return map[type] || type
}

// Actions
const filterByStatus = (status) => {
  filterTab.value = status
}

const openCreateModal = () => {
  currentStep.value = 1
  newOrder.value = {
    orderNo: 'SO-2026-' + String(Math.floor(Math.random() * 9000) + 1000),
    orderDate: new Date().toISOString().split('T')[0],
    customerSearch: '',
    selectedCustomer: null,
    type: 'standard',
    priority: 'normal',
    opportunity: '',
    remarks: '',
    items: [{ product: '', spec: '', qty: 1, price: 0, total: 0 }],
    deliveryDate: '',
    incoterms: 'FOB',
    paymentTerms: 'T/T',
    depositRatio: 30,
    shippingAddress: '',
    destinationPort: '',
    shippingMethod: 'sea',
    specialRequirements: ''
  }
  confirmChecks.value = { customer: false, products: false, delivery: false }
  showCreateModal.value = true
}

const openOrderDetail = (order) => {
  selectedOrder.value = order
  showDetailModal.value = true
}

const goToStep = (step) => {
  currentStep.value = step
}

const prevStep = () => {
  if (currentStep.value > 1) currentStep.value--
}

const nextStep = () => {
  if (currentStep.value < 4) currentStep.value++
}

const searchCustomers = () => {
  // Simulated search
}

const selectCustomer = (customer) => {
  newOrder.value.selectedCustomer = customer
  newOrder.value.customerSearch = customer.name
  customerSuggestions.value = []
}

const calculateItemTotal = (index) => {
  const item = newOrder.value.items[index]
  item.total = (item.qty || 0) * (item.price || 0)
}

const addItem = () => {
  newOrder.value.items.push({ product: '', spec: '', qty: 1, price: 0, total: 0 })
}

const removeItem = (index) => {
  newOrder.value.items.splice(index, 1)
}

const createOrder = () => {
  showCreateModal.value = false
  toast('订单创建成功', 'success')
}

const updateOrderStatus = (order) => {
  updatingOrder.value = order
  newStatus.value = order.status
  newProgress.value = order.progress
  updateNote.value = ''
  trackingNumber.value = ''
  trackingCarrier.value = ''
  showUpdateModal.value = true
}

const confirmUpdate = () => {
  if (updatingOrder.value) {
    updatingOrder.value.status = newStatus.value
    updatingOrder.value.progress = parseInt(newProgress.value)
    // Add history record
    updatingOrder.value.history.unshift({
      time: new Date().toLocaleString(),
      action: `状态更新为${getStatusLabel(newStatus.value)}`,
      user: '当前用户'
    })
  }
  showUpdateModal.value = false
  toast('订单状态已更新', 'success')
}

const toggleMoreMenu = (order) => {
  order.showMoreMenu = !order.showMoreMenu
}

const editOrder = (order) => {
  toast('编辑订单功能开发中', 'info')
}

const copyOrder = (order) => {
  toast('订单已复制', 'success')
}

const createInvoice = (order) => {
  toast('发票生成中...', 'info')
}

const viewHistory = (order) => {
  toast('查看操作历史', 'info')
}

const cancelOrder = (order) => {
  toast('订单已取消', 'success')
}

const sendMessage = (order) => {
  toast('发送消息功能开发中', 'info')
}

const handleSuggestion = (suggestion) => {
  toast(`处理建议: ${suggestion.title}`, 'info')
}

const exportOrders = () => {
  toast('订单导出中...', 'success')
}

const toast = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => { showToast.value = false }, 3000)
}
</script>

<style scoped>
.orders-page { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--bg-dark); }
.orders-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.header-left { display: flex; flex-direction: column; gap: 4px; }
.data-title { font-size: 20px; font-weight: 600; }
.header-desc { font-size: 13px; color: var(--text-secondary); }
.header-actions { display: flex; gap: 8px; }

/* Stats Row */
.stats-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card-lg { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; position: relative; }
.stat-card-lg:hover { border-color: var(--primary); transform: translateY(-2px); }
.stat-card-lg.alert { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }
.stat-icon-lg { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.stat-icon-lg.blue { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.stat-icon-lg.purple { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.stat-icon-lg.cyan { background: rgba(6, 182, 212, 0.2); color: #06B6D4; }
.stat-icon-lg.info { background: rgba(59, 130, 246, 0.2); color: #3B82F6; }
.stat-icon-lg.green { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.stat-icon-lg.red { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.stat-content-lg h3 { font-size: 22px; font-weight: 700; }
.stat-content-lg p { font-size: 11px; color: var(--text-muted); }
.stat-trend { font-size: 10px; padding: 2px 6px; border-radius: 8px; }
.stat-trend.up { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.stat-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.stat-badge.danger { background: rgba(239, 68, 68, 0.2); color: #EF4444; }

/* Revenue Overview */
.revenue-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.revenue-card { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); border-radius: 14px; padding: 20px; border: 1px solid rgba(99, 102, 241, 0.3); }
.revenue-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
.revenue-label { font-size: 13px; color: var(--text-secondary); }
.revenue-trend { font-size: 12px; color: var(--success); }
.revenue-value { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.revenue-breakdown { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.delivery-stats { display: flex; gap: 12px; background: var(--bg-card); border-radius: 14px; padding: 16px; border: 1px solid var(--border); }
.delivery-item { display: flex; align-items: center; gap: 12px; flex: 1; }
.delivery-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.delivery-icon.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.delivery-icon.warning { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.delivery-icon.primary { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.delivery-value { font-size: 18px; font-weight: 700; }
.delivery-label { font-size: 11px; color: var(--text-muted); }

/* Tabs */
.tabs-row { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tabs { display: flex; gap: 4px; }
.tab-item { padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.tab-item:hover { background: var(--bg-hover); }
.tab-item.active { background: var(--bg-hover); color: var(--text-primary); font-weight: 600; }
.tab-count { font-size: 11px; padding: 2px 6px; background: var(--bg-dark); border-radius: 10px; }
.tab-item.active .tab-count { background: var(--primary); color: white; }
.filter-actions { display: flex; gap: 8px; }
.search-box { position: relative; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
.search-box input { padding: 8px 12px 8px 32px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; width: 200px; }
.filter-select { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }

/* Order Card */
.orders-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.order-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px; background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.order-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.order-card.alert { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }
.order-card.completed { opacity: 0.8; }

/* Progress Circle */
.order-progress-circle { width: 60px; height: 60px; position: relative; flex-shrink: 0; }
.order-progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.circle-bg { stroke: var(--bg-hover); }
.circle-fill { transition: stroke-dasharray 0.3s; }
.progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 600; }
.progress-text i { font-size: 14px; }

/* Order Info */
.order-info { flex: 1; min-width: 0; }
.order-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.order-no { font-size: 15px; font-weight: 600; }
.status-badge { font-size: 10px; padding: 3px 10px; border-radius: 10px; }
.status-badge.pending { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.status-badge.production { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.status-badge.shipping { background: rgba(6, 182, 212, 0.2); color: #06B6D4; }
.status-badge.completed { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.status-badge.alert { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.priority-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.priority-badge.urgent { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.priority-badge.high { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.priority-badge.normal { background: var(--bg-hover); color: var(--text-muted); }
.order-customer { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.country-flag { font-size: 14px; }
.order-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.meta-item { display: flex; align-items: center; gap: 4px; }
.order-products { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.product-tag { font-size: 10px; padding: 3px 10px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }
.product-tag.more { background: rgba(99, 102, 241, 0.2); color: var(--primary); }

/* Timeline Mini */
.order-timeline-mini { display: flex; align-items: center; gap: 0; margin-top: 10px; }
.timeline-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.timeline-step .step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.timeline-step.completed .step-dot { background: var(--success); }
.timeline-step.current .step-dot { background: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
.timeline-step span { font-size: 9px; color: var(--text-muted); }
.timeline-step.completed span { color: var(--success); }
.timeline-step.current span { color: var(--primary); font-weight: 600; }
.timeline-line { flex: 1; height: 2px; background: var(--border); margin: 0 2px; }
.timeline-line.completed { background: var(--success); }

/* Deadline */
.order-deadline { text-align: center; margin-right: 16px; flex-shrink: 0; }
.deadline-normal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 12px; background: var(--bg-hover); }
.deadline-normal i { font-size: 14px; color: var(--text-muted); }
.deadline-normal span { font-size: 12px; font-weight: 600; }
.deadline-normal.urgent { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.deadline-normal.urgent i { color: #EF4444; }
.deadline-normal.warning { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.deadline-normal.warning i { color: #F59E0B; }
.delivery-date { font-size: 10px; color: var(--text-muted); }
.deadline-completed { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 12px; background: rgba(16, 185, 129, 0.2); color: #10B981; }
.deadline-alert { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 12px; background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.alert-reason { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* Actions */
.order-actions { display: flex; gap: 6px; flex-shrink: 0; position: relative; }
.more-actions { position: relative; }
.more-menu { position: absolute; top: 100%; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 0; min-width: 150px; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.menu-item { padding: 8px 16px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.menu-item:hover { background: var(--bg-hover); }
.menu-item.danger { color: var(--danger); }
.menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.btn-icon-sm { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.btn-icon-sm:hover { border-color: var(--primary); color: var(--primary); }
.btn-icon-sm.danger:hover { border-color: var(--danger); color: var(--danger); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.create-order-modal { max-width: 700px; }
.order-detail-modal { max-width: 800px; }
.update-modal { max-width: 500px; }
.timeline-modal { max-width: 600px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.order-no-lg { font-size: 18px; font-weight: 700; }
.modal-close { width: 32px; height: 32px; background: var(--bg-hover); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--border); }

/* Step Indicator */
.step-indicator { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.step { display: flex; flex-direction: column; align-items: center; }
.step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.step.active .step-number { background: var(--primary); color: white; }
.step.completed .step-number { background: var(--success); color: white; }
.step-label { font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.step.active .step-label { color: var(--text-primary); font-weight: 500; }
.step-line { width: 60px; height: 2px; background: var(--border); }
.step-line.active { background: var(--primary); }

/* Form */
.step-content h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.required { color: var(--danger); }

/* Products Table */
.products-table { margin-bottom: 16px; }
.table-header { display: grid; grid-template-columns: 2fr 1fr 80px 100px 100px 40px; gap: 8px; padding: 10px 12px; background: var(--bg-hover); border-radius: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.table-row { display: grid; grid-template-columns: 2fr 1fr 80px 100px 100px 40px; gap: 8px; padding: 10px 12px; background: var(--bg-hover); border-radius: 8px; align-items: center; }
.inline-select, .inline-input { width: 100%; padding: 8px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; }
.col-total { font-size: 13px; font-weight: 600; text-align: right; }

/* Order Summary */
.order-summary { padding: 16px; background: var(--bg-hover); border-radius: 10px; margin-top: 16px; }
.summary-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.summary-row.total { font-weight: 600; font-size: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.summary-row .highlight { color: var(--primary); font-size: 16px; }

/* Payment Stages */
.payment-stages { display: flex; gap: 16px; }
.stage { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.stage-input { width: 60px; padding: 8px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; text-align: center; }

/* AI Estimate */
.ai-estimate { padding: 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 12px; margin-top: 16px; }
.estimate-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 12px; }
.estimate-content { display: flex; gap: 24px; }
.estimate-item { display: flex; flex-direction: column; }
.estimate-item .label { font-size: 11px; color: var(--text-muted); }
.estimate-item .value { font-size: 14px; font-weight: 600; }
.estimate-item.highlight .value { color: var(--success); }

/* Confirm Section */
.confirm-section { margin-bottom: 20px; padding: 16px; background: var(--bg-hover); border-radius: 12px; }
.confirm-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.confirm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.confirm-item { display: flex; flex-direction: column; gap: 4px; }
.confirm-item label { font-size: 11px; color: var(--text-muted); }
.confirm-item span { font-size: 13px; }
.confirm-products { display: flex; flex-direction: column; gap: 8px; }
.confirm-product-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border-radius: 8px; font-size: 12px; }
.confirm-product-item .product-name { flex: 1; font-weight: 500; }
.confirm-product-item .product-price { font-weight: 600; }
.confirm-total { display: flex; justify-content: space-between; padding: 12px; background: rgba(99, 102, 241, 0.1); border-radius: 8px; margin-top: 8px; font-weight: 600; }
.total-amount { font-size: 16px; color: var(--primary); }
.confirm-checkboxes { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.checkbox-item { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.checkbox-item input { width: 16px; height: 16px; }

/* Detail Modal */
.detail-progress-section { margin-bottom: 24px; }
.progress-timeline { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px; background: var(--bg-hover); border-radius: 12px; }
.progress-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
.progress-step .step-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-muted); }
.progress-step.completed .step-icon { background: var(--success); color: white; }
.progress-step.current .step-icon { background: var(--primary); color: white; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
.step-info { text-align: center; margin-top: 8px; }
.step-name { font-size: 12px; font-weight: 500; }
.step-date { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.progress-connector { flex: 1; height: 2px; background: var(--border); margin: 20px 8px 0; }
.progress-connector.completed { background: var(--success); }

/* Detail Section */
.detail-section { margin-bottom: 24px; }
.section-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
.section-header h4 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin: 0; }
.section-header h4 i { color: var(--primary); }
.btn-link { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-item label { font-size: 11px; color: var(--text-muted); }
.detail-item span { font-size: 13px; }
.detail-item .highlight { color: var(--primary); font-weight: 600; font-size: 15px; }

/* Products Detail Table */
.products-detail-table { background: var(--bg-hover); border-radius: 10px; overflow: hidden; }
.table-head { display: grid; grid-template-columns: 2fr 1fr 80px 100px 100px; padding: 12px 16px; background: var(--bg-dark); font-size: 11px; color: var(--text-muted); }
.table-row-detail { display: grid; grid-template-columns: 2fr 1fr 80px 100px 100px; padding: 12px 16px; font-size: 12px; border-top: 1px solid var(--border); }
.table-footer { display: grid; grid-template-columns: 4fr 1fr; padding: 12px 16px; background: rgba(99, 102, 241, 0.1); font-size: 13px; font-weight: 600; }
.total-highlight { color: var(--primary); font-size: 15px; }

/* Tracking */
.tracking-info { background: var(--bg-hover); border-radius: 10px; padding: 16px; }
.tracking-header { display: flex; gap: 24px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tracking-no, .tracking-carrier { display: flex; flex-direction: column; gap: 4px; }
.tracking-no label, .tracking-carrier label { font-size: 11px; color: var(--text-muted); }
.tracking-no span, .tracking-carrier span { font-size: 13px; font-weight: 500; }
.tracking-timeline { display: flex; flex-direction: column; gap: 12px; }
.tracking-event { display: flex; gap: 12px; padding: 10px; border-radius: 8px; }
.tracking-event.latest { background: rgba(99, 102, 241, 0.1); }
.event-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); margin-top: 4px; }
.tracking-event.latest .event-dot { background: var(--primary); }
.event-content { flex: 1; }
.event-status { font-size: 13px; font-weight: 500; }
.event-location { font-size: 11px; color: var(--text-secondary); }
.event-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* AI Section */
.ai-section { background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(99, 102, 241, 0.2); }
.ai-suggestions { display: flex; flex-direction: column; gap: 12px; }
.ai-suggestion-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-card); border-radius: 10px; }
.suggestion-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.suggestion-icon.warning { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.suggestion-icon.info { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.suggestion-icon.alert { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.suggestion-content { flex: 1; }
.suggestion-title { font-size: 13px; font-weight: 500; }
.suggestion-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* History */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-record { display: flex; gap: 12px; padding: 10px 12px; background: var(--bg-hover); border-radius: 8px; }
.record-time { font-size: 11px; color: var(--text-muted); width: 120px; }
.record-content { flex: 1; display: flex; justify-content: space-between; }
.record-action { font-size: 12px; }
.record-user { font-size: 11px; color: var(--text-muted); }

/* Update Modal */
.current-status { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.current-status label { font-size: 12px; color: var(--text-muted); }
.progress-slider { display: flex; align-items: center; gap: 12px; }
.progress-slider input { flex: 1; }
.progress-value { font-size: 14px; font-weight: 600; min-width: 50px; text-align: right; }

/* Timeline Modal */
.timeline-filters { margin-bottom: 16px; }
.filter-select-sm { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 12px; }
.timeline-events { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; }
.timeline-event-item { display: flex; gap: 12px; }
.event-date { width: 80px; font-size: 12px; color: var(--text-muted); text-align: right; flex-shrink: 0; }
.event-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.event-dot.create { background: var(--primary); }
.event-dot.confirm { background: var(--success); }
.event-dot.production { background: #6366F1; }
.event-dot.ship { background: #06B6D4; }
.event-dot.complete { background: #10B981; }
.event-card { flex: 1; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.event-card .event-header { display: flex; gap: 8px; margin-bottom: 6px; }
.event-type { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.event-type.create { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.event-type.confirm { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.event-type.production { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.event-type.ship { background: rgba(6, 182, 212, 0.2); color: #06B6D4; }
.event-type.complete { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.event-order { font-size: 12px; font-weight: 600; }
.event-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.event-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }

/* Customer Selector */
.customer-selector { position: relative; }
.customer-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 10; }
.customer-suggestion { padding: 10px 14px; cursor: pointer; }
.customer-suggestion:hover { background: var(--bg-hover); }
.customer-suggestion .customer-name { font-size: 13px; font-weight: 500; }
.customer-suggestion .customer-info { font-size: 11px; color: var(--text-muted); }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 2000; }
.toast.success { border-color: var(--success); }
.toast.success i { color: var(--success); }
.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(20px); }

/* Responsive */
@media (max-width: 1400px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .revenue-overview { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>