<template>
  <div class="order-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>订单编号:</label>
          <input 
            v-model="searchParams.orderNo" 
            class="search-input" 
            placeholder="请输入订单编号"
          />
        </div>
        <div class="search-item">
          <label>经销商编码:</label>
          <input 
            v-model="searchParams.dealerCode" 
            class="search-input" 
            placeholder="请输入经销商编码"
          />
        </div>
        <div class="search-item">
          <label>经销商名称:</label>
          <input 
            v-model="searchParams.dealerName" 
            class="search-input" 
            placeholder="请输入经销商名称"
          />
        </div>
        <div class="search-item">
          <label>出库状态:</label>
          <select v-model="searchParams.deliveryStatus" class="search-select">
            <option value="">所有</option>
            <option value="0">未出库</option>
            <option value="1">已出库</option>
          </select>
        </div>
      </div>
      <div class="search-row">
        <div class="search-item">
          <label>开票状态:</label>
          <select v-model="searchParams.invoiceStatus" class="search-select">
            <option value="">所有</option>
            <option value="0">未开票</option>
            <option value="1">已开票</option>
          </select>
        </div>
        <div class="search-item">
          <label>返利计算状态:</label>
          <select v-model="searchParams.rebateCalcFlag" class="search-select">
            <option value="">所有</option>
            <option value="0">未计算</option>
            <option value="1">已计算</option>
          </select>
        </div>
        <div class="search-item">
          <label>数据验证状态:</label>
          <select v-model="searchParams.verifyStatus" class="search-select">
            <option value="">所有</option>
            <option value="0">待验证</option>
            <option value="1">验证通过</option>
            <option value="2">验证失败</option>
          </select>
        </div>
        <div class="search-actions">
          <button @click="handleSearch" class="search-btn">🔍 搜索</button>
          <button @click="handleReset" class="reset-btn">🔄 重置</button>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <div class="action-buttons">
        <button @click="handleAdd" class="action-btn primary">✨ 新增</button>
        <button @click="handleBatchDelete" class="action-btn danger">🗑️ 删除</button>
        <button @click="handleExport" class="action-btn secondary">📋 导出</button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <div class="table-header">
        <div class="table-controls">
          <button @click="handleTableSearch" class="control-btn">🔍</button>
          <button @click="handleTableRefresh" class="control-btn">🔄</button>
          <button @click="handleTableExport" class="control-btn">📋</button>
          <button @click="handleTableViewToggle" class="control-btn">⊞</button>
        </div>
      </div>
      
      <div class="table-container">
        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner">加载中...</div>
        </div>
        <table class="data-table">
          <thead>
            <tr>
              <th>
                <input 
                  type="checkbox" 
                  class="select-all" 
                  v-model="selectAll"
                  @change="handleSelectAll"
                />
              </th>
              <th>订单ID</th>
              <th class="sortable">订单编号 ↕️</th>
              <th>经销商编码</th>
              <th>经销商名称</th>
              <th>订单日期</th>
              <th>订单金额</th>
              <th>返利金额</th>
              <th>出库状态</th>
              <th>开票状态</th>
              <th>返利计算</th>
              <th>验证状态</th>
              <th class="sortable">创建时间 ↕️</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orderList" :key="order.orderId">
              <td>
                <input 
                  type="checkbox" 
                  class="row-checkbox" 
                  :value="order.orderId"
                  v-model="selectedOrders"
                />
              </td>
              <td>{{ order.orderId }}</td>
              <td>{{ order.orderNo }}</td>
              <td>{{ order.dealerCode }}</td>
              <td>{{ order.dealerName }}</td>
              <td>{{ formatDate(order.orderDate) }}</td>
              <td>{{ formatCurrency(order.totalAmount) }}</td>
              <td>{{ formatCurrency(order.rebateAmount || 0) }}</td>
              <td>
                <span :class="getDeliveryStatusClass(order.deliveryStatus)">
                  {{ getDeliveryStatusText(order.deliveryStatus) }}
                </span>
              </td>
              <td>
                <span :class="getInvoiceStatusClass(order.invoiceStatus)">
                  {{ getInvoiceStatusText(order.invoiceStatus) }}
                </span>
              </td>
              <td>
                <span :class="getRebateCalcClass(order.rebateCalcFlag)">
                  {{ getRebateCalcText(order.rebateCalcFlag) }}
                </span>
              </td>
              <td>
                <span :class="getVerifyStatusClass(order.verifyStatus)">
                  {{ getVerifyStatusText(order.verifyStatus) }}
                </span>
              </td>
              <td>{{ formatTime(order.createTime || '') }}</td>
              <td class="action-col">
                <button @click="handleView(order)" class="view-btn">👁️ 查看</button>
                <button @click="handleEdit(order)" class="edit-btn">✏️ 编辑</button>
                <button @click="handleDelete(order)" class="delete-btn">🗑️ 删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页信息 -->
      <div class="table-footer">
        <div class="pagination-left">
          <div class="pagination-info">
            共 {{ total }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页
          </div>
          <div class="page-size-selector">
            <label>每页显示:</label>
            <select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
              <option value="10">10条</option>
              <option value="20">20条</option>
              <option value="50">50条</option>
              <option value="100">100条</option>
            </select>
          </div>
        </div>
        <div class="pagination-container">
           <button 
             @click="handlePageChange(currentPage - 1)" 
             :disabled="currentPage <= 1"
             class="pagination-btn prev-btn"
           >
             上一页
           </button>
          <div class="pagination-pages">
            <button 
              v-for="page in getPageNumbers()" 
              :key="page"
              @click="handlePageChange(page)"
              :class="['page-number', { active: page === currentPage }]"
            >
              {{ page }}
            </button>
          </div>
           <button 
             @click="handlePageChange(currentPage + 1)" 
             :disabled="currentPage >= totalPages"
             class="pagination-btn next-btn"
           >
             下一页
           </button>
        </div>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <div v-if="showDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog-content large-dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ isEdit ? '编辑订单' : '新增订单' }}</h3>
          <button @click="closeDialog" class="close-btn">×</button>
        </div>
        <div class="dialog-body">
          <form @submit.prevent="handleSubmit">
            <!-- 订单基本信息 -->
            <div class="form-section">
              <h4>订单基本信息</h4>
              <div class="form-row">
                <div class="form-item">
                  <label class="required">订单编号:</label>
                  <input 
                    v-model="formData.orderNo" 
                    class="form-input" 
                    placeholder="请输入订单编号"
                    required
                  />
                </div>
                <div class="form-item">
                  <label class="required">经销商名称:</label>
                  <select 
                    v-model="formData.dealerName" 
                    class="form-select" 
                    @change="handleDealerChange"
                    required
                  >
                    <option value="">请选择经销商</option>
                    <option 
                      v-for="dealer in dealerList" 
                      :key="dealer.dealerId" 
                      :value="dealer.dealerName"
                    >
                      {{ dealer.dealerName }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label class="required">订单日期:</label>
                  <input 
                    v-model="formData.orderDate" 
                    class="form-input" 
                    type="datetime-local"
                    required
                  />
                </div>
                <div class="form-item">
                  <label>订单总金额:</label>
                  <input 
                    v-model.number="formData.totalAmount" 
                    class="form-input readonly" 
                    type="number"
                    step="0.01"
                    placeholder="自动计算"
                    readonly
                  />
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label>返利金额:</label>
                  <input 
                    v-model.number="formData.rebateAmount" 
                    class="form-input" 
                    type="number"
                    step="0.01"
                    placeholder="请输入返利金额"
                  />
                </div>
                <!-- 经销商编码字段隐藏，通过选择经销商名称自动填充 -->
                <input 
                  v-model="formData.dealerCode" 
                  type="hidden"
                />
              </div>
            </div>

            <!-- 订单明细 -->
            <div class="form-section">
              <h4>订单明细</h4>
              <div class="order-items-header">
                <button type="button" @click="addOrderItem" class="add-item-btn">+ 添加明细</button>
              </div>
              <div class="order-items-container">
                <div v-for="(item, index) in formData.orderItems" :key="index" class="order-item">
                   <div class="item-row-single">
                     <div class="form-item">
                       <label class="required">产品名称:</label>
                       <select 
                         v-model="item.productName" 
                         class="form-select" 
                         @change="handleProductChange(index)"
                         required
                       >
                         <option value="">请选择产品</option>
                         <option 
                           v-for="product in productList" 
                           :key="product.productId" 
                           :value="product.productName"
                         >
                           {{ product.productName }}
                         </option>
                       </select>
                     </div>
                     <div class="form-item">
                       <label class="required">产品编码:</label>
                       <input 
                         v-model="item.productCode" 
                         class="form-input readonly" 
                         placeholder="自动填充"
                         readonly
                       />
                     </div>
                    <div class="form-item">
                      <label class="required">商品数量:</label>
                      <input 
                        v-model.number="item.productQty" 
                        class="form-input" 
                        type="number"
                        placeholder="请输入商品数量"
                        @input="calculateItemTotal(index)"
                        required
                      />
                    </div>
                    <div class="form-item">
                      <label class="required">单价:</label>
                      <input 
                        v-model.number="item.unitPrice" 
                        class="form-input" 
                        type="number"
                        step="0.01"
                        placeholder="请输入单价"
                        @input="calculateItemTotal(index)"
                        required
                      />
                    </div>
                    <div class="form-item">
                      <label>明细金额:</label>
                      <input 
                        v-model.number="item.itemAmount" 
                        class="form-input readonly" 
                        type="number"
                        step="0.01"
                        placeholder="自动计算"
                        readonly
                      />
                    </div>
                    <button type="button" @click="removeOrderItem(index)" class="remove-item-btn">删除</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-actions">
              <button type="button" @click="closeDialog" class="cancel-btn">取消</button>
              <button type="submit" class="submit-btn">确定</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 订单详情对话框 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="closeDetailDialog">
      <div class="dialog-content large-dialog" @click.stop>
        <div class="dialog-header">
          <h3>订单详情</h3>
          <button @click="closeDetailDialog" class="close-btn">×</button>
        </div>
        <div class="dialog-body">
          <div v-if="orderDetail" class="detail-content">
            <div class="detail-section">
              <h4>订单基本信息</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <label>订单编号:</label>
                  <span>{{ orderDetail.orderNo }}</span>
                </div>
                <div class="detail-item">
                  <label>经销商编码:</label>
                  <span>{{ orderDetail.dealerCode }}</span>
                </div>
                <div class="detail-item">
                  <label>经销商名称:</label>
                  <span>{{ orderDetail.dealerName }}</span>
                </div>
                <div class="detail-item">
                  <label>订单日期:</label>
                  <span>{{ formatDate(orderDetail.orderDate) }}</span>
                </div>
                <div class="detail-item">
                  <label>订单总金额:</label>
                  <span>{{ formatCurrency(orderDetail.totalAmount) }}</span>
                </div>
                <div class="detail-item">
                  <label>返利金额:</label>
                  <span>{{ formatCurrency(orderDetail.rebateAmount || 0) }}</span>
                </div>
                <div class="detail-item">
                  <label>出库状态:</label>
                  <span :class="getDeliveryStatusClass(orderDetail.deliveryStatus)">
                    {{ getDeliveryStatusText(orderDetail.deliveryStatus) }}
                  </span>
                </div>
                <div class="detail-item">
                  <label>开票状态:</label>
                  <span :class="getInvoiceStatusClass(orderDetail.invoiceStatus)">
                    {{ getInvoiceStatusText(orderDetail.invoiceStatus) }}
                  </span>
                </div>
              </div>
            </div>

            <div class="detail-section" v-if="orderDetail.orderItems && orderDetail.orderItems.length > 0">
              <h4>订单明细</h4>
              <table class="detail-table">
                <thead>
                  <tr>
                    <th>产品名称</th>
                    <th>产品编码</th>
                    <th>商品数量</th>
                    <th>单价</th>
                    <th>明细金额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in orderDetail.orderItems" :key="item.itemId">
                    <td>{{ item.productName }}</td>
                    <td>{{ item.productCode }}</td>
                    <td>{{ item.productQty }}</td>
                    <td>{{ formatCurrency(item.unitPrice) }}</td>
                    <td>{{ formatCurrency(item.itemAmount) }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { orderApi, type OrderInfo, type OrderQueryReq, type OrderAddReq, type OrderUpdateReq, type OrderItemAddReq } from '../../api/order'
import { dealerApi, type DealerInfo } from '../../api/dealer'
import { productApi } from '../../api/product'
import type { ProductSimpleRes } from '../../api/product'

// 响应式数据
const loading = ref(false)
const orderList = ref<OrderInfo[]>([])
const selectedOrders = ref<number[]>([])
const showDialog = ref(false)
const showDetailDialog = ref(false)
const isEdit = ref(false)
const orderDetail = ref<OrderInfo | null>(null)
const dealerList = ref<DealerInfo[]>([])
const productList = ref<ProductSimpleRes[]>([])

// 搜索参数
const searchParams = reactive<OrderQueryReq>({
  orderNo: '',
  dealerCode: '',
  dealerName: '',
  deliveryStatus: undefined,
  invoiceStatus: undefined,
  rebateCalcFlag: undefined,
  verifyStatus: undefined,
  minAmount: undefined,
  maxAmount: undefined,
  pageNum: 1,
  pageSize: 10
})

// 分页信息
const pagination = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10
})

// 分页计算属性
const total = computed(() => pagination.total)
const currentPage = computed(() => pagination.pageNum)
const pageSize = computed({
  get: () => pagination.pageSize,
  set: (value: number) => {
    pagination.pageSize = value
  }
})
const totalPages = computed(() => Math.ceil(pagination.total / pagination.pageSize))

// 表单数据
const formData = reactive<OrderAddReq & { orderId?: number }>({
  orderNo: '',
  dealerCode: '',
  dealerName: '',
  orderDate: '',
  totalAmount: 0,
  rebateAmount: 0,
  deliveryStatus: 0,
  invoiceStatus: 0,
  rebateCalcFlag: 0,
  dataSource: '',
  verifyStatus: 0,
  orderItems: []
})

// 计算属性
const selectAll = computed({
  get: () => selectedOrders.value.length === orderList.value.length && orderList.value.length > 0,
  set: (value: boolean) => {
    if (value) {
      selectedOrders.value = orderList.value.map(order => order.orderId)
    } else {
      selectedOrders.value = []
    }
  }
})

// 获取页码数组
const getPageNumbers = () => {
  const totalPages = Math.ceil(pagination.total / pagination.pageSize)
  const currentPage = pagination.pageNum
  const maxVisible = 5
  const start = Math.max(1, currentPage - Math.floor(maxVisible / 2))
  const end = Math.min(totalPages, start + maxVisible - 1)
  const pages = []
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
}

// 状态相关方法
const getDeliveryStatusText = (status: number) => {
  return status === 1 ? '已出库' : '未出库'
}

const getDeliveryStatusClass = (status: number) => {
  return status === 1 ? 'status-active' : 'status-inactive'
}

const getInvoiceStatusText = (status: number) => {
  return status === 1 ? '已开票' : '未开票'
}

const getInvoiceStatusClass = (status: number) => {
  return status === 1 ? 'status-active' : 'status-inactive'
}

const getRebateCalcText = (status: number) => {
  return status === 1 ? '已计算' : '未计算'
}

const getRebateCalcClass = (status: number) => {
  return status === 1 ? 'status-active' : 'status-inactive'
}

const getVerifyStatusText = (status: number) => {
  const statusMap = { 0: '待验证', 1: '验证通过', 2: '验证失败' }
  return statusMap[status as keyof typeof statusMap] || '未知'
}

const getVerifyStatusClass = (status: number) => {
  const classMap = { 0: 'status-pending', 1: 'status-active', 2: 'status-inactive' }
  return classMap[status as keyof typeof classMap] || 'status-inactive'
}

// 格式化方法
const formatDate = (date: string) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString()
}

const formatTime = (date: string) => {
  if (!date) return '-'
  return new Date(date).toLocaleString()
}

const formatCurrency = (amount: number) => {
  if (amount === null || amount === undefined) return '-'
  return '¥' + amount.toFixed(2)
}

// 消息提示
const showMessage = (message: string, type: 'success' | 'error' | 'warning' = 'success') => {
  ElMessage({
    message,
    type,
    duration: 3000,
    showClose: true
  })
}

// 方法
const fetchOrders = async () => {
  try {
    loading.value = true
    // 构造查询参数对象
    const params: OrderQueryReq = {
      orderNo: searchParams.orderNo || undefined,
      dealerCode: searchParams.dealerCode || undefined,
      dealerName: searchParams.dealerName || undefined,
      deliveryStatus: searchParams.deliveryStatus,
      invoiceStatus: searchParams.invoiceStatus,
      rebateCalcFlag: searchParams.rebateCalcFlag,
      verifyStatus: searchParams.verifyStatus,
      minAmount: searchParams.minAmount,
      maxAmount: searchParams.maxAmount,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize
    }
    const response = await orderApi.getOrderList(params) as any
    console.log('API响应:', response) // 添加调试日志
    
    // 由于request.ts的响应拦截器已经处理了code=200的情况，直接返回data
    // 所以response就是data部分，包含records、total等字段
    if (response && response.records) {
      orderList.value = response.records || []
      pagination.total = response.total || 0
      pagination.pageNum = response.current || 1
      pagination.pageSize = response.size || 10
      console.log('数据加载成功:', orderList.value.length, '条记录')
    } else {
      orderList.value = []
      pagination.total = 0
      console.error('API响应错误:', response)
      showMessage('获取订单列表失败', 'error')
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
    showMessage('获取订单列表失败, 请重试', 'error')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.pageNum = 1
  fetchOrders()
}

const handleReset = () => {
  Object.assign(searchParams, {
    orderNo: '',
    dealerCode: '',
    dealerName: '',
    deliveryStatus: undefined,
    invoiceStatus: undefined,
    rebateCalcFlag: undefined,
    verifyStatus: undefined,
    minAmount: undefined,
    maxAmount: undefined
  })
  pagination.pageNum = 1
  fetchOrders()
}

const handleAdd = () => {
  isEdit.value = false
  Object.assign(formData, {
    orderNo: '',
    dealerCode: '',
    dealerName: '',
    orderDate: '',
    totalAmount: 0,
    rebateAmount: 0,
    deliveryStatus: 0,
    invoiceStatus: 0,
    rebateCalcFlag: 0,
    dataSource: '',
    verifyStatus: 0,
    orderItems: []
  })
  showDialog.value = true
}

const handleEdit = async (order: OrderInfo) => {
  try {
    // 调用后端接口获取完整的订单详情（包括订单明细）
    const response = await orderApi.getOrderDetail(order.orderId) as any
    console.log('编辑订单API响应:', response)
    
    if (response && response.orderId) {
      isEdit.value = true
      Object.assign(formData, {
        orderId: response.orderId,
        orderNo: response.orderNo,
        dealerCode: response.dealerCode,
        dealerName: response.dealerName,
        orderDate: response.orderDate,
        totalAmount: response.totalAmount,
        rebateAmount: response.rebateAmount || 0,
        deliveryStatus: response.deliveryStatus,
        invoiceStatus: response.invoiceStatus,
        rebateCalcFlag: response.rebateCalcFlag,
        dataSource: response.dataSource || '',
        verifyStatus: response.verifyStatus,
        orderItems: response.orderItems || []
      })
      // 编辑时重新计算总金额，确保数据一致性
      calculateTotalAmount()
      // 编辑时设置经销商编码（如果经销商名称已选择）
      if (formData.dealerName) {
        const selectedDealer = dealerList.value.find(dealer => dealer.dealerName === formData.dealerName)
        if (selectedDealer) {
          formData.dealerCode = selectedDealer.dealerCode
        }
      }
      showDialog.value = true
    } else {
      showMessage('获取订单详情失败', 'error')
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    showMessage('获取订单详情失败, 请重试', 'error')
  }
}

const handleView = async (order: OrderInfo) => {
  try {
    const response = await orderApi.getOrderDetail(order.orderId) as any
    console.log('订单详情API响应:', response)
    
    // 由于request.ts的响应拦截器已经处理了code=200的情况，直接返回data
    if (response && response.orderId) {
      orderDetail.value = response
      showDetailDialog.value = true
    } else {
      showMessage('获取订单详情失败', 'error')
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    showMessage('获取订单详情失败, 请重试', 'error')
  }
}

const handleDelete = async (order: OrderInfo) => {
  if (confirm(`确定要删除订单"${order.orderNo}"吗？`)) {
    try {
      await orderApi.deleteOrder(order.orderId)
      showMessage('删除成功', 'success')
      fetchOrders()
    } catch (error) {
      console.error('删除订单失败:', error)
      showMessage('删除订单失败, 请重试', 'error')
    }
  }
}

const handleBatchDelete = async () => {
  if (selectedOrders.value.length === 0) {
    showMessage('请选择要删除的订单', 'warning')
    return
  }
  if (confirm(`确定要删除选中的 ${selectedOrders.value.length} 个订单吗？`)) {
    try {
      await orderApi.batchDeleteOrders(selectedOrders.value)
      showMessage('批量删除成功', 'success')
      selectedOrders.value = []
      fetchOrders()
    } catch (error) {
      console.error('批量删除订单失败:', error)
      showMessage('批量删除订单失败, 请重试', 'error')
    }
  }
}


const handleExport = async () => {
  try {
    // 显示确认弹窗
    await ElMessageBox.confirm(
      '确定要导出订单数据吗？导出将包含当前筛选条件下的所有数据。',
      '确认导出',
      {
        confirmButtonText: '确定导出',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }
    )
    
    // 用户确认后显示加载提示
    const loadingMessage = ElMessage({
      message: '正在导出数据，请稍候...',
      type: 'warning',
      duration: 0, // 不自动关闭
      showClose: false
    })
    
    try {
      // 准备导出参数
      const exportParams = {
        orderNo: searchParams.orderNo,
        dealerCode: searchParams.dealerCode,
        dealerName: searchParams.dealerName,
        deliveryStatus: searchParams.deliveryStatus,
        invoiceStatus: searchParams.invoiceStatus,
        rebateCalcFlag: searchParams.rebateCalcFlag,
        dataSource: searchParams.dataSource,
        verifyStatus: searchParams.verifyStatus,
        orderStartDate: searchParams.orderStartDate,
        orderEndDate: searchParams.orderEndDate,
        minAmount: searchParams.minAmount,
        maxAmount: searchParams.maxAmount
      }
      
      // 调用导出接口
      const response = await orderApi.exportOrders(exportParams)
      
      // 创建下载链接
      const blob = new Blob([response], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      
      // 生成文件名
      const timestamp = new Date().toISOString().slice(0, 19).replace(/[-:T]/g, '').slice(0, 14)
      link.download = `订单数据_${timestamp}.xlsx`
      
      // 触发下载
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
      
      // 关闭加载提示，显示成功消息
      loadingMessage.close()
      ElMessage.success('导出成功！文件已开始下载')
      
    } catch (exportError) {
      // 关闭加载提示
      loadingMessage.close()
      throw exportError
    }
    
  } catch (error) {
    if (error !== 'cancel') {
      console.error('导出失败:', error)
      ElMessage.error('导出失败，请重试')
    }
  }
}

const handleSelectAll = () => {
  // 已在计算属性中处理
}

const handlePageChange = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    pagination.pageNum = page
    fetchOrders()
  }
}

const handlePageSizeChange = () => {
  pagination.pageNum = 1
  fetchOrders()
}

const handleTableSearch = () => {
  handleSearch()
}

const handleTableRefresh = () => {
  fetchOrders()
}

const handleTableExport = () => {
  handleExport()
}

const handleTableViewToggle = () => {
  showMessage('视图切换功能开发中...', 'warning')
}

// 订单明细相关方法
const addOrderItem = () => {
  formData.orderItems.push({
    productCode: '',
    productName: '',
    productQty: 1,
    unitPrice: 0,
    itemAmount: 0
  })
  // 重新计算总金额
  calculateTotalAmount()
}

const removeOrderItem = (index: number) => {
  formData.orderItems.splice(index, 1)
  // 重新计算总金额
  calculateTotalAmount()
}

const calculateItemTotal = (index: number) => {
  const item = formData.orderItems[index]
  if (item.productQty && item.unitPrice) {
    item.itemAmount = item.productQty * item.unitPrice
  }
  // 重新计算订单总金额
  calculateTotalAmount()
}

// 计算订单总金额
const calculateTotalAmount = () => {
  const total = formData.orderItems.reduce((sum, item) => {
    return sum + (item.itemAmount || 0)
  }, 0)
  formData.totalAmount = total
}

const handleSubmit = async () => {
  try {
    if (isEdit.value) {
      const updateData: OrderUpdateReq = {
        orderId: formData.orderId!,
        orderNo: formData.orderNo,
        dealerCode: formData.dealerCode,
        dealerName: formData.dealerName,
        orderDate: formData.orderDate,
        totalAmount: formData.totalAmount,
        rebateAmount: formData.rebateAmount,
        deliveryStatus: formData.deliveryStatus,
        invoiceStatus: formData.invoiceStatus,
        rebateCalcFlag: formData.rebateCalcFlag,
        dataSource: formData.dataSource,
        verifyStatus: formData.verifyStatus,
        orderItems: formData.orderItems.map(item => ({
          itemId: (item as any).itemId,
          productCode: item.productCode,
          productName: item.productName,
          productQty: item.productQty,
          unitPrice: item.unitPrice,
          itemAmount: item.itemAmount
        }))
      }
      await orderApi.updateOrder(updateData)
      showMessage('修改订单成功', 'success')
    } else {
      const addData: OrderAddReq = {
        orderNo: formData.orderNo,
        dealerCode: formData.dealerCode,
        dealerName: formData.dealerName,
        orderDate: formData.orderDate,
        totalAmount: formData.totalAmount,
        rebateAmount: formData.rebateAmount,
        deliveryStatus: formData.deliveryStatus,
        invoiceStatus: formData.invoiceStatus,
        rebateCalcFlag: formData.rebateCalcFlag,
        dataSource: formData.dataSource,
        verifyStatus: formData.verifyStatus,
        orderItems: formData.orderItems.map(item => ({
          productCode: item.productCode,
          productName: item.productName,
          productQty: item.productQty,
          unitPrice: item.unitPrice,
          itemAmount: item.itemAmount
        }))
      }
      await orderApi.addOrder(addData)
      showMessage('新增订单成功', 'success')
    }
    closeDialog()
    fetchOrders()
  } catch (error) {
    console.error('保存订单失败:', error)
    // 优先展示后端返回的具体错误信息
    const anyError: any = error as any
    let errorMessage = '保存订单失败, 请重试'
    if (anyError && anyError.response && anyError.response.data) {
      const errorData = anyError.response.data
      if (typeof errorData.message === 'string' && errorData.message.trim().length > 0) {
        errorMessage = errorData.message
      }
      // 如果有字段级校验错误，拼接展示
      if (errorData.data && typeof errorData.data === 'object') {
        const fieldErrors = Object.values(errorData.data).filter((msg: any) => typeof msg === 'string') as string[]
        if (fieldErrors.length > 0) {
          errorMessage = fieldErrors.join('; ')
        }
      }
    }
    showMessage(errorMessage, 'error')
  }
}

// 经销商选择处理
const handleDealerChange = () => {
  const selectedDealer = dealerList.value.find(dealer => dealer.dealerName === formData.dealerName)
  if (selectedDealer) {
    formData.dealerCode = selectedDealer.dealerCode
  }
}

// 加载经销商列表
const loadDealers = async () => {
  try {
    const response = await dealerApi.getAllDealers() as any
    if (response && response.data && Array.isArray(response.data)) {
      dealerList.value = response.data
    }
  } catch (error) {
    console.error('加载经销商列表失败:', error)
    showMessage('加载经销商列表失败', 'error')
  }
}

// 产品选择处理
const handleProductChange = (index: number) => {
  const selectedProduct = productList.value.find((product: ProductSimpleRes) => product.productName === formData.orderItems[index].productName)
  if (selectedProduct) {
    formData.orderItems[index].productCode = selectedProduct.productCode
  }
}

// 加载产品列表
const loadProducts = async () => {
  try {
    const response = await productApi.getAllProducts() as any
    if (response && response.data && Array.isArray(response.data)) {
      productList.value = response.data
    }
  } catch (error) {
    console.error('加载产品列表失败:', error)
    showMessage('加载产品列表失败', 'error')
  }
}

const closeDialog = () => {
  showDialog.value = false
  formData.orderItems = []
}

const closeDetailDialog = () => {
  showDetailDialog.value = false
  orderDetail.value = null
}

// 生命周期
onMounted(() => {
  fetchOrders()
  loadDealers()
  loadProducts()
})
</script>

<style scoped>
.order-container {
  padding: 0px;
  background: #f5f5f5;
  min-height: 100vh;
}

/* 搜索区域样式 */
.search-section {
  background: white;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.search-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

.search-input, .search-select {
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  width: 120px;
}

.search-input:focus, .search-select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.search-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reset-btn {
  background: #ff7875;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 操作按钮区域 */
.action-section {
  background: white;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.action-buttons {
  display: flex;
  gap: 6px;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn.primary {
  background: #28a745;
  color: white;
}

.action-btn.danger {
  background: #dc3545;
  color: white;
}

.action-btn.secondary {
  background: #6c757d;
  color: white;
}

/* 表格样式 */
.table-section {
  background: white;
  margin: 16px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.table-header {
  padding: 8px 16px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.table-controls {
  display: flex;
  gap: 4px;
}

.control-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #d9d9d9;
  background: white;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.table-container {
  position: relative;
  overflow-x: auto;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.data-table th,
.data-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 500;
  color: #333;
  font-size: 11px;
}

.data-table tbody tr:hover {
  background-color: #f5f5f5;
}

.select-all, .row-checkbox {
  margin: 0;
}

.action-col {
  white-space: nowrap;
}

.action-col button {
  margin-right: 5px;
  padding: 2px 6px;
  margin: 0 1px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.view-btn {
  background: #17a2b8;
  color: white;
}

.edit-btn {
  background: #ffc107;
  color: #333;
}

.delete-btn {
  background: #dc3545;
  color: white;
}

.status-btn {
  background: #28a745;
  color: white;
}

/* 状态样式 */
.status-active {
  color: #28a745;
  font-weight: 500;
}

.status-inactive {
  color: #dc3545;
  font-weight: 500;
}

.status-pending {
  color: #ffc107;
  font-weight: 500;
}

/* 分页样式 */
.table-footer {
  padding: 8px 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}

.pagination-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pagination-info {
  font-size: 12px;
  color: #666;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-selector label {
  font-size: 12px;
  color: #666;
}

.page-size-select {
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s;
}

.pagination-container {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination-btn {
  padding: 2px 6px;
  border: none;
  background: white;
  color: #6c757d;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #e9ecef;
  height: 20px;
}

.pagination-btn:hover:not(:disabled) {
  background: #e9ecef;
  color: #495057;
}

.pagination-btn:disabled {
  background: #f8f9fa;
  color: #adb5bd;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  align-items: center;
}

.page-number {
  padding: 2px 6px;
  border: none;
  background: white;
  color: #6c757d;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #e9ecef;
  min-width: 28px;
  text-align: center;
  height: 20px;
}

.page-number:hover {
  background: #e9ecef;
  color: #495057;
}

.page-number.active {
  background: #6c757d;
  color: white;
  font-weight: 600;
}

.page-number.active:hover {
  background: #5a6268;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  max-width: 400px;
  width: 70%;
  max-height: 80vh;
  overflow-y: auto;
}

.dialog-content.large-dialog {
  max-width: 1000px;
}

.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.dialog-body {
  padding: 20px;
}

/* 表单样式 */
.form-section {
  margin-bottom: 30px;
}

.form-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  border-bottom: 2px solid #007bff;
  padding-bottom: 8px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-item.full-width {
  flex: 100%;
}

.form-item label {
  font-weight: 500;
  color: #333;
}

.form-item label.required::after {
  content: ' *';
  color: #dc3545;
}

.form-input, .form-select, .form-textarea {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  width: 250px;
  height: 32px;
  box-sizing: border-box;
}

.form-select {
  background-color: #fff;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-input.readonly {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

/* 订单明细中的输入框样式 - 优化空间利用 */
.order-item .form-input {
  width: 100%;
  padding: 3px 5px;
  font-size: 11px;
  box-sizing: border-box;
}

/* 订单明细中的表单项样式 */
.order-item .form-item {
  flex: 0 0 auto;
  margin-bottom: 0;
  min-width: 0;
}

/* 产品名称字段 - 占用最多空间，增加长度（现在在第一位） */
.order-item .form-item:nth-child(1) {
  flex: 1.5 1 200px;
  min-width: 150px;
}

/* 产品编码字段 - 固定宽度（现在在第二位），往左移动 */
.order-item .form-item:nth-child(2) {
  flex: 0 0 180px;
  margin-left: -15px;
}

/* 产品编码输入框宽度调整为90% */
.order-item .form-item:nth-child(2) .form-input {
  width: 90%;
}

/* 数量字段 - 较小宽度，往左移动 */
.order-item .form-item:nth-child(3) {
  flex: 0 0 80px;
  margin-left: -10px;
}

/* 单价字段 - 中等宽度，往左移动 */
.order-item .form-item:nth-child(4) {
  flex: 0 0 110px;
  margin-left: -5px;
}

/* 明细金额字段 - 中等宽度 */
.order-item .form-item:nth-child(5) {
  flex: 0 0 110px;
}

.order-item .form-item label {
  font-size: 11px;
  margin-bottom: 2px;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* 订单明细样式 */
.order-items-header {
  margin-bottom: 10px;
}

.add-item-btn {
  padding: 8px 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.order-items-container {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
  background: #f8f9fa;
  width: 100%;
}

.order-item {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

.order-item:last-child {
  margin-bottom: 0;
}

.item-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: end;
}

.item-row:last-child {
  margin-bottom: 0;
}

/* 单行布局 - 所有字段在一行显示，优化空间利用 */
.item-row-single {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: nowrap;
  width: 100%;
}

.remove-item-btn {
  padding: 6px 12px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  height: 32px;
  align-self: end;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.remove-item-btn:hover {
  background: #c82333;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.cancel-btn, .submit-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.cancel-btn {
  background: #6c757d;
  color: white;
}

.submit-btn {
  background: #007bff;
  color: white;
}

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

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

.detail-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  border-bottom: 2px solid #007bff;
  padding-bottom: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detail-item label {
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

.detail-item span {
  color: #333;
  font-size: 16px;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.detail-table th,
.detail-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

.detail-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.detail-table tr:nth-child(even) {
  background: #f8f9fa;
}
</style>