<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">
            <button 
              @click="handleExport"
              class="ml-4 inline-flex items-center 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 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              <DownloadIcon class="h-4 w-4 mr-2" />
              导出
            </button>
            <button 
              @click="handleImport"
              class="ml-4 inline-flex items-center 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 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              <UploadIcon class="h-4 w-4 mr-2" />
              导入
            </button>
            <button 
              @click="handleManageCategories"
              class="ml-4 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"
            >
              <ListIcon class="h-4 w-4 mr-2" />
              分类管理
            </button>
            <button 
              @click="handleManageTags"
              class="ml-4 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"
            >
              <TagIcon class="h-4 w-4 mr-2" />
              标签管理
            </button>
            <button 
              @click="handleAddProduct"
              class="ml-4 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"
            >
              <PlusIcon class="h-4 w-4 mr-2" />
              添加商品
            </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="electronics">电子产品</option>
            <option value="clothing">服装</option>
            <option value="food">食品</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="active">在售</option>
            <option value="inactive">下架</option>
            <option value="out_of_stock">缺货</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">
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <input
                type="checkbox"
                v-model="selectAll"
                @change="handleSelectAll"
                class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded"
              />
              <span class="text-sm text-gray-700 dark:text-gray-300">全选</span>
            </div>
            <div class="flex items-center space-x-2">
              <span class="text-sm text-gray-700 dark:text-gray-300">
                已选择 {{ selectedProducts.length }} 个商品
              </span>
              <button
                v-if="selectedProducts.length > 0"
                @click="showBatchOperationDialog = true"
                class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md 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>
          </div>
        </div>
        <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">
                <input
                  type="checkbox"
                  v-model="selectAll"
                  @change="handleSelectAll"
                  class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded"
                />
              </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>
              <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="product in filteredProducts" :key="product.id">
              <td class="px-6 py-4 whitespace-nowrap">
                <input
                  type="checkbox"
                  v-model="selectedProducts"
                  :value="product"
                  class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded"
                />
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img class="h-10 w-10 rounded-full" :src="product.image" :alt="product.name" />
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                      {{ product.name }}
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                      {{ product.id }}
                    </div>
                    <div class="flex flex-wrap gap-1 mt-1">
                      <span 
                        v-for="tag in product.tags" 
                        :key="tag.id"
                        :class="getTagClass(tag.type)"
                        class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
                      >
                        {{ tag.name }}
                      </span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">{{ product.category }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">¥{{ product.price }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">{{ product.stock }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getStatusClass(product.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                  {{ getStatusText(product.status) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button 
                  @click="handleViewDetails(product)"
                  class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                >
                  详情
                </button>
                <button 
                  @click="handleEditProduct(product)"
                  class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-4"
                >
                  编辑
                </button>
                <button 
                  @click="handleDeleteProduct(product)"
                  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="showProductForm" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    {{ isEdit ? '编辑商品' : '添加商品' }}
                  </h3>
                  <button @click="showProductForm = 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="handleProductSubmit" class="space-y-4">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品名称</label>
                      <input
                        v-model="productForm.name"
                        type="text"
                        required
                        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 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
                        v-model="productForm.id"
                        type="text"
                        :disabled="isEdit"
                        required
                        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 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="productForm.category"
                        required
                        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 dark:bg-gray-700 dark:text-white"
                      >
                        <option value="">请选择分类</option>
                        <option value="electronics">电子产品</option>
                        <option value="clothing">服装</option>
                        <option value="food">食品</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品价格</label>
                      <input
                        v-model.number="productForm.price"
                        type="number"
                        min="0"
                        step="0.01"
                        required
                        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 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
                        v-model.number="productForm.stock"
                        type="number"
                        min="0"
                        required
                        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 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="productForm.status"
                        required
                        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 dark:bg-gray-700 dark:text-white"
                      >
                        <option value="active">在售</option>
                        <option value="inactive">下架</option>
                        <option value="out_of_stock">缺货</option>
                      </select>
                    </div>
                    <div class="md:col-span-2">
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品图片</label>
                      <div class="mt-1 flex items-center">
                        <img
                          v-if="productForm.image"
                          :src="productForm.image"
                          class="h-20 w-20 rounded-md object-cover"
                        />
                        <input
                          type="file"
                          accept="image/*"
                          @change="handleImageUpload"
                          class="ml-4"
                        />
                      </div>
                    </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="productForm.description"
                        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 dark:bg-gray-700 dark:text-white"
                      ></textarea>
                    </div>
                    <div class="md:col-span-2">
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品标签</label>
                      <div class="mt-1">
                        <div class="flex flex-wrap gap-2 mb-2">
                          <span 
                            v-for="tag in productForm.tags" 
                            :key="tag.id"
                            :class="getTagClass(tag.type)"
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                          >
                            {{ tag.name }}
                            <button 
                              @click="removeTag(tag)"
                              class="ml-1 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
                            >
                              <XIcon class="h-3 w-3" />
                            </button>
                          </span>
                        </div>
                        <div class="flex items-center space-x-2">
                          <select
                            v-model="selectedTag"
                            class="flex-1 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 dark:bg-gray-700 dark:text-white"
                          >
                            <option value="">选择标签</option>
                            <option v-for="tag in availableTags" :key="tag.id" :value="tag">
                              {{ tag.name }} ({{ tag.type }})
                            </option>
                          </select>
                          <button
                            @click="addTag"
                            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"
                          >
                            添加标签
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                    <button
                      type="submit"
                      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
                    >
                      保存
                    </button>
                    <button
                      type="button"
                      @click="showProductForm = false"
                      class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
                    >
                      取消
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认对话框 -->
    <div v-if="showConfirmDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                  {{ confirmDialog.title }}
                </h3>
                <div class="mt-2">
                  <p class="text-sm text-gray-500 dark:text-gray-400">
                    {{ confirmDialog.message }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              @click="handleConfirm"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              确认
            </button>
            <button
              type="button"
              @click="showConfirmDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 高级筛选弹窗 -->
    <div v-if="showAdvancedFilter" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 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>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">价格范围</label>
                    <div class="mt-1 flex space-x-2">
                      <input
                        v-model.number="filterForm.minPrice"
                        type="number"
                        min="0"
                        step="0.01"
                        placeholder="最低价"
                        class="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 dark:bg-gray-700 dark:text-white"
                      />
                      <input
                        v-model.number="filterForm.maxPrice"
                        type="number"
                        min="0"
                        step="0.01"
                        placeholder="最高价"
                        class="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 dark:bg-gray-700 dark:text-white"
                      />
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">库存范围</label>
                    <div class="mt-1 flex space-x-2">
                      <input
                        v-model.number="filterForm.minStock"
                        type="number"
                        min="0"
                        placeholder="最小库存"
                        class="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 dark:bg-gray-700 dark:text-white"
                      />
                      <input
                        v-model.number="filterForm.maxStock"
                        type="number"
                        min="0"
                        placeholder="最大库存"
                        class="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 dark:bg-gray-700 dark:text-white"
                      />
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">创建时间</label>
                    <div class="mt-1 flex space-x-2">
                      <input
                        v-model="filterForm.startDate"
                        type="date"
                        class="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 dark:bg-gray-700 dark:text-white"
                      />
                      <input
                        v-model="filterForm.endDate"
                        type="date"
                        class="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 dark:bg-gray-700 dark:text-white"
                      />
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">排序方式</label>
                    <select
                      v-model="filterForm.sortBy"
                      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 dark:bg-gray-700 dark:text-white"
                    >
                      <option value="">默认排序</option>
                      <option value="price_asc">价格从低到高</option>
                      <option value="price_desc">价格从高到低</option>
                      <option value="stock_asc">库存从低到高</option>
                      <option value="stock_desc">库存从高到低</option>
                      <option value="created_at_desc">最新创建</option>
                      <option value="created_at_asc">最早创建</option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">标签筛选</label>
                    <div class="mt-1 flex flex-wrap gap-2">
                      <label 
                        v-for="tag in tags" 
                        :key="tag.id"
                        class="inline-flex items-center"
                      >
                        <input
                          type="checkbox"
                          :value="tag.id"
                          v-model="filterForm.selectedTags"
                          class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded"
                        />
                        <span 
                          :class="getTagClass(tag.type)"
                          class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                        >
                          {{ tag.name }}
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                  <button
                    type="button"
                    @click="applyFilters"
                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
                  >
                    应用筛选
                  </button>
                  <button
                    type="button"
                    @click="resetFilters"
                    class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导入弹窗 -->
    <div v-if="showImportDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    导入商品
                  </h3>
                  <button @click="showImportDialog = 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-4">
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">选择文件</label>
                  <input
                    type="file"
                    accept=".csv"
                    @change="handleFileChange"
                    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 dark:bg-gray-700 dark:text-white"
                  />
                </div>
                <div v-if="importPreview.length > 0" class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">导入预览</label>
                  <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>
                        <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="(row, index) in importPreview" :key="index">
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[0] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[1] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[2] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[3] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[4] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[5] }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              @click="handleImportSubmit"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              导入
            </button>
            <button
              type="button"
              @click="showImportDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详情弹窗 -->
    <div v-if="showDetailsDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    商品详情
                  </h3>
                  <button @click="showDetailsDialog = false" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                    <XIcon class="h-6 w-6" />
                  </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg">
                      <img
                        :src="selectedProduct?.image"
                        :alt="selectedProduct?.name"
                        class="h-full w-full object-cover object-center"
                      />
                    </div>
                  </div>
                  <div class="space-y-4">
                    <div>
                      <h4 class="text-lg font-medium text-gray-900 dark:text-white">{{ selectedProduct?.name }}</h4>
                      <p class="text-sm text-gray-500 dark:text-gray-400">商品编号：{{ selectedProduct?.id }}</p>
                    </div>
                    <div class="grid 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">{{ selectedProduct?.category }}</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">¥{{ selectedProduct?.price }}</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">{{ selectedProduct?.stock }}</p>
                      </div>
                      <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">状态</p>
                        <span :class="getStatusClass(selectedProduct?.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                          {{ getStatusText(selectedProduct?.status) }}
                        </span>
                      </div>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 dark:text-gray-400">商品标签</p>
                      <div class="mt-1 flex flex-wrap gap-2">
                        <span 
                          v-for="tag in selectedProduct?.tags" 
                          :key="tag.id"
                          :class="getTagClass(tag.type)"
                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                        >
                          {{ tag.name }}
                        </span>
                        <span v-if="!selectedProduct?.tags?.length" class="text-sm text-gray-500 dark:text-gray-400">
                          暂无标签
                        </span>
                      </div>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 dark:text-gray-400">商品描述</p>
                      <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ selectedProduct?.description || '暂无描述' }}</p>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 dark:text-gray-400">创建时间</p>
                      <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ formatDateTime(selectedProduct?.createdAt) }}</p>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 dark:text-gray-400">更新时间</p>
                      <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ formatDateTime(selectedProduct?.updatedAt) }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              @click="showDetailsDialog = false"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类管理弹窗 -->
    <div v-if="showCategoryDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    分类管理
                  </h3>
                  <div class="flex items-center space-x-2">
                    <button 
                      @click="handleExportCategories"
                      class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      <DownloadIcon class="h-4 w-4 mr-1" />
                      导出
                    </button>
                    <button 
                      @click="handleImportCategories"
                      class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      <UploadIcon class="h-4 w-4 mr-1" />
                      导入
                    </button>
                    <button @click="showCategoryDialog = false" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                      <XIcon class="h-6 w-6" />
                    </button>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="flex items-center space-x-2">
                    <input
                      v-model="newCategoryName"
                      type="text"
                      placeholder="输入新分类名称"
                      class="flex-1 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 dark:bg-gray-700 dark:text-white"
                    />
                    <button
                      @click="handleAddCategory"
                      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"
                    >
                      添加分类
                    </button>
                  </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <div class="space-y-2">
                    <div v-for="category in categories" :key="category.id" class="flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded-md">
                      <div class="flex items-center space-x-2">
                        <input
                          v-model="category.name"
                          type="text"
                          class="border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                        />
                        <span class="text-sm text-gray-500 dark:text-gray-400">{{ category.productCount }} 个商品</span>
                      </div>
                      <div class="flex items-center space-x-2">
                        <button
                          @click="handleUpdateCategory(category)"
                          class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
                        >
                          保存
                        </button>
                        <button
                          @click="handleDeleteCategory(category)"
                          class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                        >
                          删除
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签管理弹窗 -->
    <div v-if="showTagDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    标签管理
                  </h3>
                  <div class="flex items-center space-x-2">
                    <button 
                      @click="handleExportTags"
                      class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      <DownloadIcon class="h-4 w-4 mr-1" />
                      导出
                    </button>
                    <button 
                      @click="handleImportTags"
                      class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      <UploadIcon class="h-4 w-4 mr-1" />
                      导入
                    </button>
                    <button @click="showTagDialog = false" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                      <XIcon class="h-6 w-6" />
                    </button>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="flex items-center space-x-2">
                    <input
                      v-model="newTagName"
                      type="text"
                      placeholder="输入新标签名称"
                      class="flex-1 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 dark:bg-gray-700 dark:text-white"
                    />
                    <select
                      v-model="newTagType"
                      class="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 dark:bg-gray-700 dark:text-white"
                    >
                      <option value="primary">主要</option>
                      <option value="secondary">次要</option>
                      <option value="warning">警告</option>
                      <option value="success">成功</option>
                      <option value="info">信息</option>
                    </select>
                    <button
                      @click="handleAddTag"
                      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"
                    >
                      添加标签
                    </button>
                  </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <div class="space-y-2">
                    <div v-for="tag in tags" :key="tag.id" class="flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded-md">
                      <div class="flex items-center space-x-2">
                        <input
                          v-model="tag.name"
                          type="text"
                          class="border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                        />
                        <select
                          v-model="tag.type"
                          class="border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                        >
                          <option value="primary">主要</option>
                          <option value="secondary">次要</option>
                          <option value="warning">警告</option>
                          <option value="success">成功</option>
                          <option value="info">信息</option>
                        </select>
                        <span class="text-sm text-gray-500 dark:text-gray-400">{{ tag.productCount }} 个商品</span>
                      </div>
                      <div class="flex items-center space-x-2">
                        <button
                          @click="handleUpdateTag(tag)"
                          class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
                        >
                          保存
                        </button>
                        <button
                          @click="handleDeleteTag(tag)"
                          class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                        >
                          删除
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量操作弹窗 -->
    <div v-if="showBatchOperationDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    批量操作
                  </h3>
                  <button @click="showBatchOperationDialog = false" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                    <XIcon class="h-6 w-6" />
                  </button>
                </div>
                <div class="space-y-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">操作类型</label>
                    <select
                      v-model="batchOperation.type"
                      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 dark:bg-gray-700 dark:text-white"
                    >
                      <option value="status">修改状态</option>
                      <option value="delete">删除商品</option>
                      <option value="tags">添加标签</option>
                      <option value="price">修改价格</option>
                      <option value="stock">修改库存</option>
                      <option value="category">修改分类</option>
                      <option value="description">修改描述</option>
                      <option value="image">修改图片</option>
                      <option value="name">修改名称</option>
                      <option value="id">修改编号</option>
                      <option value="createdAt">修改创建时间</option>
                      <option value="updatedAt">修改更新时间</option>
                      <option value="tags">修改标签</option>
                    </select>
                  </div>
                  <div v-if="batchOperation.type === 'status'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">状态</label>
                    <select
                      v-model="batchOperation.status"
                      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 dark:bg-gray-700 dark:text-white"
                    >
                      <option value="active">在售</option>
                      <option value="inactive">下架</option>
                      <option value="out_of_stock">缺货</option>
                    </select>
                  </div>
                  <div v-if="batchOperation.type === 'price'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">价格调整方式</label>
                    <div class="mt-1">
                      <select
                        v-model="batchOperation.priceAdjustType"
                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
                      >
                        <option value="fixed">固定值</option>
                        <option value="percentage">百分比</option>
                        <option value="increase">增加</option>
                        <option value="decrease">减少</option>
                      </select>
                    </div>
                    <div class="mt-2">
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">调整值</label>
                      <input
                        type="number"
                        v-model="batchOperation.priceValue"
                        :placeholder="batchOperation.priceAdjustType === 'percentage' ? '请输入百分比（如：10表示增加10%）' : '请输入调整值'"
                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
                      >
                    </div>
                  </div>
                  <div v-if="batchOperation.type === 'stock'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">库存调整方式</label>
                    <div class="mt-1">
                      <select
                        v-model="batchOperation.stockAdjustType"
                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
                      >
                        <option value="fixed">固定值</option>
                        <option value="increase">增加</option>
                        <option value="decrease">减少</option>
                      </select>
                    </div>
                    <div class="mt-2">
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">调整值</label>
                      <input
                        type="number"
                        v-model="batchOperation.stockValue"
                        :placeholder="batchOperation.stockAdjustType === 'fixed' ? '请输入新的库存数量' : '请输入调整数量'"
                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
                      >
                    </div>
                  </div>
                  <div v-if="batchOperation.type === 'tags'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">标签</label>
                    <div class="mt-1 space-y-2">
                      <div v-for="tag in tags" :key="tag.id" class="flex items-center">
                        <input
                          type="checkbox"
                          :id="'tag-' + tag.id"
                          v-model="batchOperation.selectedTags"
                          :value="tag.id"
                          class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700"
                        >
                        <label :for="'tag-' + tag.id" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
                          {{ tag.name }}
                        </label>
                      </div>
                    </div>
                  </div>
                  <div v-if="batchOperation.type === 'category'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">选择分类</label>
                    <select
                      v-model="batchOperation.category"
                      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 dark:bg-gray-700 dark:text-white"
                    >
                      <option value="">请选择分类</option>
                      <option v-for="category in categories" :key="category.id" :value="category.name">
                        {{ category.name }}
                      </option>
                    </select>
                  </div>
                  <div v-if="batchOperation.type === 'description'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品描述</label>
                    <textarea
                      v-model="batchOperation.description"
                      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 dark:bg-gray-700 dark:text-white"
                      placeholder="请输入商品描述"
                    ></textarea>
                  </div>
                  <div v-if="batchOperation.type === 'image'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品图片</label>
                    <div class="mt-1 flex items-center">
                      <img
                        v-if="batchOperation.image"
                        :src="batchOperation.image"
                        class="h-20 w-20 rounded-md object-cover"
                      />
                      <input
                        type="file"
                        accept="image/*"
                        @change="handleBatchImageUpload"
                        class="ml-4"
                      />
                    </div>
                  </div>
                  <div v-if="batchOperation.type === 'name'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品名称</label>
                    <input
                      v-model="batchOperation.name"
                      type="text"
                      placeholder="请输入新的商品名称"
                      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 dark:bg-gray-700 dark:text-white"
                    />
                  </div>
                  <div v-if="batchOperation.type === 'id'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">商品编号</label>
                    <input
                      v-model="batchOperation.id"
                      type="text"
                      placeholder="请输入新的商品编号"
                      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 dark:bg-gray-700 dark:text-white"
                    />
                  </div>
                  <div v-if="batchOperation.type === 'createdAt'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">创建时间</label>
                    <input
                      v-model="batchOperation.createdAt"
                      type="datetime-local"
                      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 dark:bg-gray-700 dark:text-white"
                    />
                  </div>
                  <div v-if="batchOperation.type === 'updatedAt'">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">更新时间</label>
                    <input
                      v-model="batchOperation.updatedAt"
                      type="datetime-local"
                      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 dark:bg-gray-700 dark:text-white"
                    />
                  </div>
                  <div v-if="batchOperation.type === 'delete'">
                    <div class="text-sm text-gray-700 dark:text-gray-300">
                      确定要删除选中的 {{ selectedProducts.length }} 个商品吗？此操作不可恢复。
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              @click="handleBatchOperation"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              确认
            </button>
            <button
              type="button"
              @click="showBatchOperationDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类导入弹窗 -->
    <div v-if="showCategoryImportDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    导入分类
                  </h3>
                  <button @click="showCategoryImportDialog = 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-4">
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">选择文件</label>
                  <input
                    type="file"
                    accept=".csv"
                    @change="handleCategoryFileChange"
                    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 dark:bg-gray-700 dark:text-white"
                  />
                </div>
                <div v-if="categoryImportPreview.length > 0" class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">导入预览</label>
                  <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>
                      </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                      <tr v-for="(row, index) in categoryImportPreview" :key="index">
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[0] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[1] }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              @click="handleCategoryImportSubmit"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              导入
            </button>
            <button
              type="button"
              @click="showCategoryImportDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签导入弹窗 -->
    <div v-if="showTagImportDialog" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    导入标签
                  </h3>
                  <button @click="showTagImportDialog = 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-4">
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">选择文件</label>
                  <input
                    type="file"
                    accept=".csv"
                    @change="handleTagFileChange"
                    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 dark:bg-gray-700 dark:text-white"
                  />
                </div>
                <div v-if="tagImportPreview.length > 0" class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">导入预览</label>
                  <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>
                      </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                      <tr v-for="(row, index) in tagImportPreview" :key="index">
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[0] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[1] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          {{ row[2] }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              @click="handleTagImportSubmit"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              导入
            </button>
            <button
              type="button"
              @click="showTagImportDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 商品表单相关状态
const showProductForm = ref(false)
const isEdit = ref(false)
const productForm = ref({
  id: '',
  name: '',
  category: '',
  price: 0,
  stock: 0,
  status: 'active',
  image: '',
  description: '',
  tags: []
})

// 标签选择相关状态
const selectedTag = ref(null)

// 计算可用的标签列表（排除已选择的标签）
const availableTags = computed(() => {
  return tags.value.filter(tag => !productForm.value.tags?.some(t => t.id === tag.id))
})

// 获取标签样式
const getTagClass = (type) => {
  const classes = {
    primary: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
    secondary: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
    warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
    success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
  }
  return classes[type] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
}

// 添加标签
const addTag = () => {
  if (selectedTag.value && !productForm.value.tags?.some(t => t.id === selectedTag.value.id)) {
    if (!productForm.value.tags) {
      productForm.value.tags = []
    }
    productForm.value.tags.push({ ...selectedTag.value })
    selectedTag.value = null
  }
}

// 移除标签
const removeTag = (tag) => {
  const index = productForm.value.tags.findIndex(t => t.id === tag.id)
  if (index !== -1) {
    productForm.value.tags.splice(index, 1)
  }
}

// 确认对话框相关状态
const showConfirmDialog = ref(false)
const confirmDialog = ref({
  title: '',
  message: '',
  action: ''
})
const selectedProduct = ref(null)

// 高级筛选相关状态
const showAdvancedFilter = ref(false)
const filterForm = ref({
  minPrice: null,
  maxPrice: null,
  minStock: null,
  maxStock: null,
  startDate: '',
  endDate: '',
  sortBy: '',
  selectedTags: []
})

// 商品详情相关状态
const showDetailsDialog = ref(false)

// 分类管理相关状态
const showCategoryDialog = ref(false)
const newCategoryName = ref('')
const categories = ref([
  { id: 1, name: '电子产品', productCount: 3 },
  { id: 2, name: '服装', productCount: 0 },
  { id: 3, name: '食品', productCount: 0 }
])

// 标签管理相关状态
const showTagDialog = ref(false)
const newTagName = ref('')
const newTagType = ref('primary')
const tags = ref([
  { id: 1, name: '新品', type: 'primary', productCount: 2 },
  { id: 2, name: '热销', type: 'warning', productCount: 1 },
  { id: 3, name: '促销', type: 'success', productCount: 0 }
])

// 批量操作相关状态
const selectAll = ref(false)
const selectedProducts = ref([])
const showBatchOperationDialog = ref(false)
const batchOperation = ref({
  type: 'status',
  status: 'active',
  selectedTags: [],
  priceAdjustType: 'fixed',
  priceValue: 0,
  stockAdjustType: 'fixed',
  stockValue: 0,
  category: '',
  description: '',
  image: '',
  name: '',
  id: '',
  createdAt: '',
  updatedAt: ''
})

// 分类导入导出相关状态
const showCategoryImportDialog = ref(false)
const categoryImportFile = ref(null)
const categoryImportPreview = ref([])
const categoryImportHeaders = ref([])

// 标签导入导出相关状态
const showTagImportDialog = ref(false)
const tagImportFile = ref(null)
const tagImportPreview = ref([])
const tagImportHeaders = ref([])

// 状态管理
const isLoading = ref(false)
const searchText = ref('')
const category = ref('')
const status = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalProducts = ref(100)
const showImportDialog = ref(false)
const showExportDialog = ref(false)
const showDeleteDialog = ref(false)

// 处理添加商品按钮点击
const handleAddProduct = () => {
  isEdit.value = false
  productForm.value = {
    id: '',
    name: '',
    category: '',
    price: 0,
    stock: 0,
    status: 'active',
    image: '',
    description: '',
    tags: []
  }
  showProductForm.value = true
}

// 处理编辑商品按钮点击
const handleEditProduct = (product) => {
  isEdit.value = true
  productForm.value = { ...product }
  showProductForm.value = true
}

// 处理图片上传
const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      productForm.value.image = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 处理表单提交
const handleProductSubmit = () => {
  if (isEdit.value) {
    // 更新商品
    const index = products.value.findIndex(p => p.id === productForm.value.id)
    if (index !== -1) {
      products.value[index] = { ...productForm.value }
    }
  } else {
    // 添加新商品
    products.value.push({ ...productForm.value })
  }
  showProductForm.value = false
}

// 处理删除商品
const handleDeleteProduct = (product) => {
  selectedProduct.value = product
  confirmDialog.value = {
    title: '删除商品',
    message: `确定要删除商品 "${product.name}" 吗？此操作不可恢复。`,
    action: 'delete'
  }
  showConfirmDialog.value = true
}

// 应用筛选
const applyFilters = () => {
  // 这里添加筛选逻辑
  showAdvancedFilter.value = false
}

// 重置筛选
const resetFilters = () => {
  filterForm.value = {
    minPrice: null,
    maxPrice: null,
    minStock: null,
    maxStock: null,
    startDate: '',
    endDate: '',
    sortBy: '',
    selectedTags: []
  }
}

// 计算筛选后的商品列表
const filteredProducts = computed(() => {
  let result = [...products.value]
  
  // 价格范围筛选
  if (filterForm.value.minPrice !== null) {
    result = result.filter(p => p.price >= filterForm.value.minPrice)
  }
  if (filterForm.value.maxPrice !== null) {
    result = result.filter(p => p.price <= filterForm.value.maxPrice)
  }
  
  // 库存范围筛选
  if (filterForm.value.minStock !== null) {
    result = result.filter(p => p.stock >= filterForm.value.minStock)
  }
  if (filterForm.value.maxStock !== null) {
    result = result.filter(p => p.stock <= filterForm.value.maxStock)
  }
  
  // 标签筛选
  if (filterForm.value.selectedTags.length > 0) {
    result = result.filter(p => {
      if (!p.tags) return false
      return filterForm.value.selectedTags.some(tagId => 
        p.tags.some(tag => tag.id === tagId)
      )
    })
  }
  
  // 排序
  if (filterForm.value.sortBy) {
    const [field, order] = filterForm.value.sortBy.split('_')
    result.sort((a, b) => {
      if (order === 'asc') {
        return a[field] - b[field]
      } else {
        return b[field] - a[field]
      }
    })
  }
  
  return result
})

// 模拟商品数据
const products = ref([
  {
    id: 'P1001',
    name: 'iPhone 13 Pro',
    category: '电子产品',
    price: 7999,
    stock: 100,
    status: 'active',
    image: 'https://images.unsplash.com/photo-1634896941598-b6b500a502a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
  },
  {
    id: 'P1002',
    name: 'MacBook Pro',
    category: '电子产品',
    price: 12999,
    stock: 50,
    status: 'active',
    image: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
  },
  {
    id: 'P1003',
    name: 'AirPods Pro',
    category: '电子产品',
    price: 1999,
    stock: 0,
    status: 'out_of_stock',
    image: 'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
  }
])

// 获取状态样式
const getStatusClass = (status) => {
  const classes = {
    active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
    inactive: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
    out_of_stock: '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 = {
    active: '在售',
    inactive: '下架',
    out_of_stock: '缺货'
  }
  return texts[status] || '未知'
}

// 处理查看详情
const handleViewDetails = (product) => {
  selectedProduct.value = product
  showDetailsDialog.value = true
}

// 格式化日期时间
const formatDateTime = (date) => {
  if (!date) return '未知'
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 处理分类管理按钮点击
const handleManageCategories = () => {
  showCategoryDialog.value = true
}

// 处理添加分类
const handleAddCategory = () => {
  if (newCategoryName.value.trim()) {
    categories.value.push({
      id: Date.now(),
      name: newCategoryName.value.trim(),
      productCount: 0
    })
    newCategoryName.value = ''
  }
}

// 处理更新分类
const handleUpdateCategory = (category) => {
  if (category.name.trim()) {
    // 更新商品中的分类名称
    products.value.forEach(product => {
      if (product.category === category.oldName) {
        product.category = category.name
      }
    })
  }
}

// 处理删除分类
const handleDeleteCategory = (category) => {
  if (category.productCount > 0) {
    confirmDialog.value = {
      title: '删除分类',
      message: `分类 "${category.name}" 下有 ${category.productCount} 个商品，确定要删除吗？`,
      action: 'deleteCategory',
      data: category
    }
    showConfirmDialog.value = true
  } else {
    const index = categories.value.findIndex(c => c.id === category.id)
    if (index !== -1) {
      categories.value.splice(index, 1)
    }
  }
}

// 处理标签管理按钮点击
const handleManageTags = () => {
  showTagDialog.value = true
}

// 处理添加标签
const handleAddTag = () => {
  if (newTagName.value.trim()) {
    tags.value.push({
      id: Date.now(),
      name: newTagName.value.trim(),
      type: newTagType.value,
      productCount: 0
    })
    newTagName.value = ''
    newTagType.value = 'primary'
  }
}

// 处理更新标签
const handleUpdateTag = (tag) => {
  if (tag.name.trim()) {
    // 更新商品中的标签
    products.value.forEach(product => {
      if (product.tags) {
        const index = product.tags.findIndex(t => t.id === tag.id)
        if (index !== -1) {
          product.tags[index] = { ...tag }
        }
      }
    })
  }
}

// 处理删除标签
const handleDeleteTag = (tag) => {
  if (tag.productCount > 0) {
    confirmDialog.value = {
      title: '删除标签',
      message: `标签 "${tag.name}" 下有 ${tag.productCount} 个商品，确定要删除吗？`,
      action: 'deleteTag',
      data: tag
    }
    showConfirmDialog.value = true
  } else {
    const index = tags.value.findIndex(t => t.id === tag.id)
    if (index !== -1) {
      tags.value.splice(index, 1)
    }
  }
}

// 处理全选
const handleSelectAll = () => {
  if (selectAll.value) {
    selectedProducts.value = [...filteredProducts.value]
  } else {
    selectedProducts.value = []
  }
}

// 处理批量操作
const handleBatchOperation = () => {
  if (batchOperation.value.type === 'status') {
    // 批量修改状态
    if (!batchOperation.value.status) {
      alert('请选择状态')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].status = batchOperation.value.status
      }
    })
  } else if (batchOperation.value.type === 'price') {
    // 批量修改价格
    if (batchOperation.value.priceValue === null || batchOperation.value.priceValue === '') {
      alert('请输入调整值')
      return
    }
    const value = parseFloat(batchOperation.value.priceValue)
    if (isNaN(value)) {
      alert('请输入有效的数值')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        let newPrice = products.value[index].price
        switch (batchOperation.value.priceAdjustType) {
          case 'fixed':
            newPrice = value
            break
          case 'percentage':
            newPrice = newPrice * (1 + value / 100)
            break
          case 'increase':
            newPrice = newPrice + value
            break
          case 'decrease':
            newPrice = newPrice - value
            break
        }
        // 确保价格不为负数
        products.value[index].price = Math.max(0, newPrice)
      }
    })
  } else if (batchOperation.value.type === 'stock') {
    // 批量修改库存
    if (batchOperation.value.stockValue === null || batchOperation.value.stockValue === '') {
      alert('请输入调整值')
      return
    }
    const value = parseInt(batchOperation.value.stockValue)
    if (isNaN(value)) {
      alert('请输入有效的数值')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        let newStock = products.value[index].stock
        switch (batchOperation.value.stockAdjustType) {
          case 'fixed':
            newStock = value
            break
          case 'increase':
            newStock = newStock + value
            break
          case 'decrease':
            newStock = newStock - value
            break
        }
        // 确保库存不为负数
        products.value[index].stock = Math.max(0, newStock)
      }
    })
  } else if (batchOperation.value.type === 'tags') {
    // 批量修改标签
    if (batchOperation.value.selectedTags.length === 0) {
      alert('请选择至少一个标签')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        if (!products.value[index].tags) {
          products.value[index].tags = []
        }
        // 移除未选中的标签
        products.value[index].tags = products.value[index].tags.filter(tag => 
          batchOperation.value.selectedTags.includes(tag.id)
        )
        // 添加新选中的标签
        batchOperation.value.selectedTags.forEach(tagId => {
          const tag = tags.value.find(t => t.id === tagId)
          if (tag && !products.value[index].tags.some(t => t.id === tag.id)) {
            products.value[index].tags.push({ ...tag })
          }
        })
      }
    })
  } else if (batchOperation.value.type === 'category') {
    // 批量修改分类
    if (!batchOperation.value.category) {
      alert('请选择分类')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].category = batchOperation.value.category
      }
    })
  } else if (batchOperation.value.type === 'description') {
    // 批量修改描述
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].description = batchOperation.value.description
      }
    })
  } else if (batchOperation.value.type === 'image') {
    // 批量修改图片
    if (!batchOperation.value.image) {
      alert('请上传图片')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].image = batchOperation.value.image
      }
    })
  } else if (batchOperation.value.type === 'name') {
    // 批量修改名称
    if (!batchOperation.value.name) {
      alert('请输入新的商品名称')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].name = batchOperation.value.name
      }
    })
  } else if (batchOperation.value.type === 'id') {
    // 批量修改编号
    if (!batchOperation.value.id) {
      alert('请输入新的商品编号')
      return
    }
    // 检查是否选择了多个商品
    if (selectedProducts.value.length > 1) {
      alert('批量修改编号时只能选择一个商品')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].id = batchOperation.value.id
      }
    })
  } else if (batchOperation.value.type === 'createdAt') {
    // 批量修改创建时间
    if (!batchOperation.value.createdAt) {
      alert('请选择创建时间')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].createdAt = batchOperation.value.createdAt
      }
    })
  } else if (batchOperation.value.type === 'updatedAt') {
    // 批量修改更新时间
    if (!batchOperation.value.updatedAt) {
      alert('请选择更新时间')
      return
    }
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value[index].updatedAt = batchOperation.value.updatedAt
      }
    })
  } else if (batchOperation.value.type === 'delete') {
    // 批量删除商品
    confirmDialog.value = {
      title: '批量删除商品',
      message: `确定要删除选中的 ${selectedProducts.value.length} 个商品吗？此操作不可恢复。`,
      action: 'batchDelete'
    }
    showConfirmDialog.value = true
    return
  }
  
  // 重置选择
  selectedProducts.value = []
  selectAll.value = false
  batchOperation.value = {
    type: 'status',
    status: 'active',
    selectedTags: [],
    priceAdjustType: 'fixed',
    priceValue: 0,
    stockAdjustType: 'fixed',
    stockValue: 0,
    category: '',
    description: '',
    image: '',
    name: '',
    id: '',
    createdAt: '',
    updatedAt: ''
  }
  showBatchOperationDialog.value = false
}

// 处理导入提交
const handleImportSubmit = () => {
  if (!importFile.value) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    const text = e.target.result
    const rows = text.split('\n').map(row => row.split(','))
    const headers = rows[0]
    
    const newProducts = rows.slice(1).map(row => {
      const product = {
        id: row[headers.indexOf('商品编号')],
        name: row[headers.indexOf('商品名称')],
        category: row[headers.indexOf('分类')],
        price: parseFloat(row[headers.indexOf('价格')]),
        stock: parseInt(row[headers.indexOf('库存')]),
        status: getStatusValue(row[headers.indexOf('状态')]),
        description: row[headers.indexOf('描述')] || '',
        tags: []
      }
      
      // 处理标签
      const tagsStr = row[headers.indexOf('标签')]
      if (tagsStr) {
        product.tags = tagsStr.split(',').map(tagStr => {
          const [name, type] = tagStr.split('(')
          return {
            id: Date.now() + Math.random(),
            name: name.trim(),
            type: type.replace(')', '').trim()
          }
        })
      }
      
      return product
    })
    
    // 添加新商品
    products.value.push(...newProducts)
    showImportDialog.value = false
  }
  reader.readAsText(importFile.value)
}

// 获取状态值
const getStatusValue = (text) => {
  const values = {
    '在售': 'active',
    '下架': 'inactive',
    '缺货': 'out_of_stock'
  }
  return values[text] || 'active'
}

// 处理导出分类
const handleExportCategories = () => {
  const headers = ['分类名称', '商品数量']
  
  const data = categories.value.map(category => [
    category.name,
    category.productCount
  ])
  
  const csvContent = [
    headers.join(','),
    ...data.map(row => row.join(','))
  ].join('\n')
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `商品分类_${new Date().toLocaleDateString()}.csv`
  link.click()
}

// 处理导入分类
const handleImportCategories = () => {
  showCategoryImportDialog.value = true
  categoryImportFile.value = null
  categoryImportPreview.value = []
  categoryImportHeaders.value = []
}

// 处理分类文件选择
const handleCategoryFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  if (file.size > 10 * 1024 * 1024) {
    alert('文件大小不能超过10MB')
    return
  }
  
  if (!file.name.endsWith('.csv')) {
    alert('请选择CSV文件')
    return
  }
  
  categoryImportFile.value = file
  readCategoryCSVFile(file)
}

// 读取分类CSV文件
const readCategoryCSVFile = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    const text = e.target.result
    const rows = text.split('\n').map(row => row.split(','))
    categoryImportHeaders.value = rows[0]
    categoryImportPreview.value = rows.slice(1, 6) // 只显示前5行数据
  }
  reader.readAsText(file)
}

// 处理分类导入提交
const handleCategoryImportSubmit = () => {
  if (!categoryImportFile.value) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    const text = e.target.result
    const rows = text.split('\n').map(row => row.split(','))
    const headers = rows[0]
    
    const newCategories = rows.slice(1).map(row => ({
      id: Date.now() + Math.random(),
      name: row[headers.indexOf('分类名称')],
      productCount: parseInt(row[headers.indexOf('商品数量')]) || 0
    }))
    
    // 添加新分类
    categories.value.push(...newCategories)
    showCategoryImportDialog.value = false
  }
  reader.readAsText(categoryImportFile.value)
}

// 处理导出标签
const handleExportTags = () => {
  const headers = ['标签名称', '标签类型', '商品数量']
  
  const data = tags.value.map(tag => [
    tag.name,
    tag.type,
    tag.productCount
  ])
  
  const csvContent = [
    headers.join(','),
    ...data.map(row => row.join(','))
  ].join('\n')
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `商品标签_${new Date().toLocaleDateString()}.csv`
  link.click()
}

// 处理导入标签
const handleImportTags = () => {
  showTagImportDialog.value = true
  tagImportFile.value = null
  tagImportPreview.value = []
  tagImportHeaders.value = []
}

// 处理标签文件选择
const handleTagFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  if (file.size > 10 * 1024 * 1024) {
    alert('文件大小不能超过10MB')
    return
  }
  
  if (!file.name.endsWith('.csv')) {
    alert('请选择CSV文件')
    return
  }
  
  tagImportFile.value = file
  readTagCSVFile(file)
}

// 读取标签CSV文件
const readTagCSVFile = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    const text = e.target.result
    const rows = text.split('\n').map(row => row.split(','))
    tagImportHeaders.value = rows[0]
    tagImportPreview.value = rows.slice(1, 6) // 只显示前5行数据
  }
  reader.readAsText(file)
}

// 处理标签导入提交
const handleTagImportSubmit = () => {
  if (!tagImportFile.value) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    const text = e.target.result
    const rows = text.split('\n').map(row => row.split(','))
    const headers = rows[0]
    
    const newTags = rows.slice(1).map(row => ({
      id: Date.now() + Math.random(),
      name: row[headers.indexOf('标签名称')],
      type: row[headers.indexOf('标签类型')],
      productCount: parseInt(row[headers.indexOf('商品数量')]) || 0
    }))
    
    // 添加新标签
    tags.value.push(...newTags)
    showTagImportDialog.value = false
  }
  reader.readAsText(tagImportFile.value)
}

// 处理批量图片上传
const handleBatchImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      batchOperation.value.image = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 处理确认对话框
const handleConfirm = () => {
  if (confirmDialog.value.action === 'delete') {
    const index = products.value.findIndex(p => p.id === selectedProduct.value.id)
    if (index !== -1) {
      products.value.splice(index, 1)
    }
  } else if (confirmDialog.value.action === 'batchDelete') {
    selectedProducts.value.forEach(product => {
      const index = products.value.findIndex(p => p.id === product.id)
      if (index !== -1) {
        products.value.splice(index, 1)
      }
    })
    selectedProducts.value = []
    selectAll.value = false
  } else if (confirmDialog.value.action === 'deleteCategory') {
    const category = confirmDialog.value.data
    const index = categories.value.findIndex(c => c.id === category.id)
    if (index !== -1) {
      categories.value.splice(index, 1)
    }
  } else if (confirmDialog.value.action === 'deleteTag') {
    const tag = confirmDialog.value.data
    const index = tags.value.findIndex(t => t.id === tag.id)
    if (index !== -1) {
      tags.value.splice(index, 1)
    }
  }
  showConfirmDialog.value = false
}
</script> 