<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <h1 class="text-xl font-bold text-gray-900 dark:text-white">订单管理</h1>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <button 
              @click="handleExport"
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center space-x-2"
            >
              <DownloadIcon class="h-5 w-5" />
              <span>导出订单</span>
            </button>
            <button 
              @click="handleImport"
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center space-x-2"
            >
              <UploadIcon class="h-5 w-5" />
              <span>导入订单</span>
            </button>
            <button 
              @click="handleAddOrder"
              class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center space-x-2"
            >
              <PlusIcon class="h-5 w-5" />
              <span>添加订单</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <!-- 搜索和筛选区域 -->
      <div class="mb-6 bg-white dark:bg-gray-800 shadow rounded-lg p-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="relative">
            <input
              type="text"
              class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
              placeholder="搜索订单号/商品名称"
            />
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <SearchIcon class="h-5 w-5 text-gray-400" />
            </div>
          </div>
          <select class="border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
            <option value="">所有状态</option>
            <option value="pending">待付款</option>
            <option value="paid">已付款</option>
            <option value="shipped">已发货</option>
            <option value="completed">已完成</option>
            <option value="cancelled">已取消</option>
          </select>
          <select class="border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
            <option value="">所有支付方式</option>
            <option value="alipay">支付宝</option>
            <option value="wechat">微信支付</option>
            <option value="bank">银行转账</option>
          </select>
          <button 
            @click="showAdvancedFilter = true"
            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            <FilterIcon class="h-4 w-4 mr-2" />
            高级筛选
          </button>
        </div>
      </div>

      <!-- 订单列表 -->
      <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                订单信息
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                商品信息
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                金额
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                状态
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <tr v-for="order in orders" :key="order.id">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  {{ order.id }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  {{ formatDate(order.createdAt) }}
                </div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 dark:text-white">
                  {{ order.productName }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  数量: {{ order.quantity }}
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">
                  ¥{{ order.totalAmount }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  {{ order.paymentMethod }}
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getStatusClass(order.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                  {{ getStatusText(order.status) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button 
                  @click="handleViewDetails(order)"
                  class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                >
                  详情
                </button>
                <button 
                  @click="handleEditOrder(order)"
                  class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                >
                  编辑
                </button>
                <button 
                  @click="handleDeleteOrder(order)"
                  class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                >
                  删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="mt-4 flex justify-between items-center">
        <div class="text-sm text-gray-700 dark:text-gray-300">
          显示 1 到 10 条，共 100 条
        </div>
        <div class="flex space-x-2">
          <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
            上一页
          </button>
          <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
            下一页
          </button>
        </div>
      </div>
    </main>

    <!-- 订单详情弹窗 -->
    <div v-if="showOrderDetails" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">订单详情</h3>
            <button 
              @click="showOrderDetails = false"
              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
            >
              <XIcon class="h-6 w-6" />
            </button>
          </div>

          <!-- 基本信息 -->
          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4">基本信息</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">订单编号</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.id }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">创建时间</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ formatDate(selectedOrder?.createdAt) }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">订单状态</p>
                <span :class="getStatusClass(selectedOrder?.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                  {{ getStatusText(selectedOrder?.status) }}
                </span>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">支付方式</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.paymentMethod }}</p>
              </div>
            </div>
          </div>

          <!-- 商品信息 -->
          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4">商品信息</h4>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
              <div class="flex items-center">
                <div class="flex-1">
                  <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.productName }}</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">数量: {{ selectedOrder?.quantity }}</p>
                </div>
                <div class="text-right">
                  <p class="text-sm font-medium text-gray-900 dark:text-white">¥{{ selectedOrder?.totalAmount }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 收货信息 -->
          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4">收货信息</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">收货人</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.receiverName }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">联系电话</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.receiverPhone }}</p>
              </div>
              <div class="md:col-span-2">
                <p class="text-sm text-gray-500 dark:text-gray-400">收货地址</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.receiverAddress }}</p>
              </div>
            </div>
          </div>

          <!-- 物流信息 -->
          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4">物流信息</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">物流公司</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.shippingCompany }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">物流单号</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ selectedOrder?.trackingNumber }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">发货时间</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ formatDate(selectedOrder?.shippingTime) }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">预计送达</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ formatDate(selectedOrder?.estimatedDeliveryTime) }}</p>
              </div>
            </div>
          </div>

          <!-- 备注信息 -->
          <div>
            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4">备注信息</h4>
            <p class="text-sm text-gray-900 dark:text-white">{{ selectedOrder?.remarks || '无' }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑订单弹窗 -->
    <div v-if="showEditOrder" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full">
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">编辑订单</h3>
            <button 
              @click="showEditOrder = false"
              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
            >
              <XIcon class="h-6 w-6" />
            </button>
          </div>

          <form @submit.prevent="handleSubmitEdit" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">订单状态</label>
                <select 
                  v-model="editOrder.status"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option value="pending">待付款</option>
                  <option value="paid">已付款</option>
                  <option value="shipped">已发货</option>
                  <option value="completed">已完成</option>
                  <option value="cancelled">已取消</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">支付方式</label>
                <select 
                  v-model="editOrder.paymentMethod"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option value="alipay">支付宝</option>
                  <option value="wechat">微信支付</option>
                  <option value="bank">银行转账</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品数量</label>
                <input 
                  type="number" 
                  v-model="editOrder.quantity"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">总金额</label>
                <input 
                  type="number" 
                  v-model="editOrder.totalAmount"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">备注</label>
                <textarea 
                  v-model="editOrder.remarks"
                  rows="3"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                ></textarea>
              </div>
            </div>

            <div class="flex justify-end space-x-3">
              <button 
                type="button"
                @click="showEditOrder = false"
                class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                取消
              </button>
              <button 
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                保存
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 添加订单弹窗 -->
    <div v-if="showAddOrder" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full">
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">添加订单</h3>
            <button 
              @click="showAddOrder = false"
              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
            >
              <XIcon class="h-6 w-6" />
            </button>
          </div>

          <form @submit.prevent="handleSubmitAdd" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品名称</label>
                <input 
                  type="text" 
                  v-model="newOrder.productName"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品数量</label>
                <input 
                  type="number" 
                  v-model="newOrder.quantity"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">总金额</label>
                <input 
                  type="number" 
                  v-model="newOrder.totalAmount"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">支付方式</label>
                <select 
                  v-model="newOrder.paymentMethod"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option value="alipay">支付宝</option>
                  <option value="wechat">微信支付</option>
                  <option value="bank">银行转账</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">收货人</label>
                <input 
                  type="text" 
                  v-model="newOrder.receiverName"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">联系电话</label>
                <input 
                  type="text" 
                  v-model="newOrder.receiverPhone"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">收货地址</label>
                <input 
                  type="text" 
                  v-model="newOrder.receiverAddress"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">备注</label>
                <textarea 
                  v-model="newOrder.remarks"
                  rows="3"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                ></textarea>
              </div>
            </div>

            <div class="flex justify-end space-x-3">
              <button 
                type="button"
                @click="showAddOrder = false"
                class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                取消
              </button>
              <button 
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                添加
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-if="showDeleteConfirm" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">确认删除</h3>
            <button 
              @click="showDeleteConfirm = false"
              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
            >
              <XIcon class="h-6 w-6" />
            </button>
          </div>

          <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
            确定要删除订单 {{ selectedOrder?.id }} 吗？此操作不可撤销。
          </p>

          <div class="flex justify-end space-x-3">
            <button 
              @click="showDeleteConfirm = false"
              class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              取消
            </button>
            <button 
              @click="confirmDelete"
              class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            >
              删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 高级筛选弹窗 -->
    <div v-if="showAdvancedFilter" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full">
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">高级筛选</h3>
            <button 
              @click="showAdvancedFilter = false"
              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
            >
              <XIcon class="h-6 w-6" />
            </button>
          </div>

          <form @submit.prevent="handleFilter" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">订单编号</label>
                <input 
                  type="text" 
                  v-model="filters.id"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                  placeholder="输入订单编号"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品名称</label>
                <input 
                  type="text" 
                  v-model="filters.productName"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                  placeholder="输入商品名称"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">订单状态</label>
                <select 
                  v-model="filters.status"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option value="">所有状态</option>
                  <option value="pending">待付款</option>
                  <option value="paid">已付款</option>
                  <option value="shipped">已发货</option>
                  <option value="completed">已完成</option>
                  <option value="cancelled">已取消</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">支付方式</label>
                <select 
                  v-model="filters.paymentMethod"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option value="">所有支付方式</option>
                  <option value="alipay">支付宝</option>
                  <option value="wechat">微信支付</option>
                  <option value="bank">银行转账</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">最小金额</label>
                <input 
                  type="number" 
                  v-model="filters.minAmount"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                  placeholder="输入最小金额"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">最大金额</label>
                <input 
                  type="number" 
                  v-model="filters.maxAmount"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                  placeholder="输入最大金额"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">开始日期</label>
                <input 
                  type="date" 
                  v-model="filters.startDate"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">结束日期</label>
                <input 
                  type="date" 
                  v-model="filters.endDate"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
            </div>

            <div class="flex justify-end space-x-3">
              <button 
                type="button"
                @click="resetFilters"
                class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                重置
              </button>
              <button 
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                筛选
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  SearchIcon, 
  PlusIcon,
  FilterIcon,
  DownloadIcon,
  UploadIcon,
  XIcon
} from 'lucide-vue-next'

// 订单数据
const orders = ref([
  {
    id: 'O202401010001',
    productName: '商品A',
    quantity: 2,
    totalAmount: 199.00,
    paymentMethod: '支付宝',
    status: 'pending',
    createdAt: '2024-01-01 10:00:00'
  },
  {
    id: 'O202401010002',
    productName: '商品B',
    quantity: 1,
    totalAmount: 299.00,
    paymentMethod: '微信支付',
    status: 'paid',
    createdAt: '2024-01-01 11:00:00'
  },
  {
    id: 'O202401010003',
    productName: '商品C',
    quantity: 3,
    totalAmount: 399.00,
    paymentMethod: '银行转账',
    status: 'shipped',
    createdAt: '2024-01-01 12:00:00'
  }
])

// 获取状态样式
const getStatusClass = (status) => {
  const classes = {
    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
    paid: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
    shipped: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
    completed: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
    cancelled: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
  }
  return classes[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '待付款',
    paid: '已付款',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || '未知'
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 订单详情相关
const showOrderDetails = ref(false)
const selectedOrder = ref(null)

// 编辑订单相关
const showEditOrder = ref(false)
const editOrder = ref({
  id: '',
  productName: '',
  quantity: 0,
  totalAmount: 0,
  paymentMethod: '',
  status: '',
  remarks: ''
})

// 添加订单相关
const showAddOrder = ref(false)
const newOrder = ref({
  productName: '',
  quantity: 0,
  totalAmount: 0,
  paymentMethod: 'alipay',
  status: 'pending',
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  remarks: ''
})

// 删除确认相关
const showDeleteConfirm = ref(false)

// 高级筛选相关
const showAdvancedFilter = ref(false)
const filters = ref({
  id: '',
  productName: '',
  status: '',
  paymentMethod: '',
  minAmount: '',
  maxAmount: '',
  startDate: '',
  endDate: ''
})

// 处理查看详情
const handleViewDetails = (order) => {
  selectedOrder.value = order
  showOrderDetails.value = true
}

// 处理编辑订单
const handleEditOrder = (order) => {
  editOrder.value = { ...order }
  showEditOrder.value = true
}

// 处理提交编辑
const handleSubmitEdit = () => {
  const index = orders.value.findIndex(o => o.id === editOrder.value.id)
  if (index !== -1) {
    orders.value[index] = { ...editOrder.value }
  }
  showEditOrder.value = false
}

// 处理添加订单
const handleAddOrder = () => {
  newOrder.value = {
    productName: '',
    quantity: 0,
    totalAmount: 0,
    paymentMethod: 'alipay',
    status: 'pending',
    receiverName: '',
    receiverPhone: '',
    receiverAddress: '',
    remarks: ''
  }
  showAddOrder.value = true
}

// 处理提交添加
const handleSubmitAdd = () => {
  const order = {
    ...newOrder.value,
    id: `O${new Date().getTime()}`,
    createdAt: new Date().toISOString()
  }
  orders.value.push(order)
  showAddOrder.value = false
}

// 处理删除订单
const handleDeleteOrder = (order) => {
  selectedOrder.value = order
  showDeleteConfirm.value = true
}

// 确认删除
const confirmDelete = () => {
  const index = orders.value.findIndex(o => o.id === selectedOrder.value.id)
  if (index !== -1) {
    orders.value.splice(index, 1)
  }
  showDeleteConfirm.value = false
}

// 处理导出
const handleExport = () => {
  const data = JSON.stringify(orders.value, null, 2)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `orders_${new Date().toISOString().split('T')[0]}.json`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

// 处理导入
const handleImport = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.json'
  input.onchange = (e) => {
    const file = e.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        try {
          const data = JSON.parse(e.target.result)
          if (Array.isArray(data)) {
            orders.value = data
          }
        } catch (error) {
          console.error('导入失败:', error)
        }
      }
      reader.readAsText(file)
    }
  }
  input.click()
}

// 处理筛选
const handleFilter = () => {
  // 实现筛选逻辑
  showAdvancedFilter.value = false
}

// 重置筛选条件
const resetFilters = () => {
  filters.value = {
    id: '',
    productName: '',
    status: '',
    paymentMethod: '',
    minAmount: '',
    maxAmount: '',
    startDate: '',
    endDate: ''
  }
}
</script> 