<template>
  <AdminLayout current-page="product-list">
    <view class="product-management">
      <!-- 页面标题 -->
      <view class="page-header">
        <text class="page-title">商品管理</text>
        <text class="page-subtitle">管理系统商品信息和库存</text>
      </view>

      <!-- Tab 切换栏 -->
      <view class="tab-bar">
        <view
          v-for="tab in tabs"
          :key="tab.key"
          class="tab-item"
          :class="{ 'active': activeTab === tab.key }"
          @click="switchTab(tab.key)"
        >
          <text class="iconfont tab-icon">{{ tab.icon }}</text>
          <text class="tab-title">{{ tab.title }}</text>
        </view>
      </view>

      <!-- 商品列表Tab -->
      <view v-if="activeTab === 'product-list'">
        <!-- 统计卡片 -->
      <view class="stats-cards">
        <view class="stat-card">
          <view class="stat-icon">📦</view>
          <view class="stat-content">
            <text class="stat-value">{{ totalProducts }}</text>
            <text class="stat-label">总商品数</text>
          </view>
        </view>
        <view class="stat-card">
          <view class="stat-icon">✅</view>
          <view class="stat-content">
            <text class="stat-value">{{ onSaleProducts }}</text>
            <text class="stat-label">在售商品</text>
          </view>
        </view>
        <view class="stat-card">
          <view class="stat-icon">🚫</view>
          <view class="stat-content">
            <text class="stat-value">{{ offShelfProducts }}</text>
            <text class="stat-label">已下架</text>
          </view>
        </view>
        <view class="stat-card">
          <view class="stat-icon">⚠️</view>
          <view class="stat-content">
            <text class="stat-value">{{ lowStockProducts }}</text>
            <text class="stat-label">库存不足</text>
          </view>
        </view>
      </view>

      <!-- 搜索和筛选 -->
      <view class="search-section">
        <view class="search-bar">
          <view class="search-input-wrapper">
            <input
              v-model="searchKeyword"
              class="search-input"
              placeholder="搜索商品名称、编号、分类"
              @confirm="handleSearch"
            />
            <view class="search-btn" @click="handleSearch">
              <text class="iconfont icon-search"></text>
            </view>
          </view>
          <view class="advanced-toggle" @click="showAdvancedSearch = !showAdvancedSearch">
            <text>{{ showAdvancedSearch ? '收起' : '展开' }}筛选</text>
            <text class="iconfont">{{ showAdvancedSearch ? 'icon-up' : 'icon-down' }}</text>
          </view>
        </view>

        <!-- 高级搜索 -->
        <view v-if="showAdvancedSearch" class="advanced-search">
          <view class="filter-row">
            <view class="filter-item">
              <text class="filter-label">商品状态:</text>
              <picker
                mode="selector"
                :range="statusOptions"
                :value="selectedStatus"
                @change="handleStatusChange"
              >
                <view class="picker-display">
                  <text>{{ statusOptions[selectedStatus] }}</text>
                  <text class="iconfont icon-down"></text>
                </view>
              </picker>
            </view>
            <view class="filter-item">
              <text class="filter-label">商品分类:</text>
              <picker
                mode="selector"
                :range="categoryOptions"
                :value="selectedCategory"
                @change="handleCategoryChange"
              >
                <view class="picker-display">
                  <text>{{ categoryOptions[selectedCategory] }}</text>
                  <text class="iconfont icon-down"></text>
                </view>
              </picker>
            </view>
          </view>

          <view class="filter-row">
            <view class="filter-item">
              <text class="filter-label">价格区间:</text>
              <view class="price-range">
                <input
                  v-model="minPrice"
                  class="price-input"
                  placeholder="最低价"
                  type="number"
                />
                <text class="price-separator">-</text>
                <input
                  v-model="maxPrice"
                  class="price-input"
                  placeholder="最高价"
                  type="number"
                />
              </view>
            </view>
          </view>

          <view class="filter-actions">
            <button class="btn-secondary" @click="resetFilters">重置</button>
            <button class="btn-primary" @click="handleAdvancedSearch">搜索</button>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-bar">
        <view class="left-actions">
          <button class="btn-primary" @click="showAddModal = true">
            <text class="iconfont icon-add"></text>
            添加商品
          </button>
          <button class="btn-secondary" @click="handleBatchOnSale">
            <text class="iconfont icon-onsale"></text>
            批量上架
          </button>
          <button class="btn-warning" @click="handleBatchOffShelf">
            <text class="iconfont icon-offshelf"></text>
            批量下架
          </button>
        </view>
        <view class="right-actions">
          <view class="select-all">
            <checkbox :checked="selectAll" @change="handleSelectAll" />
            <text>全选</text>
          </view>
          <button class="btn-danger" :disabled="selectedProducts.length === 0" @click="handleBatchDelete">
            <text class="iconfont icon-delete"></text>
            批量删除
          </button>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="product-table">
        <view class="table-header">
          <view class="table-row">
            <view class="col-select">选择</view>
            <view class="col-image">商品图片</view>
            <view class="col-info">商品信息</view>
            <view class="col-price">价格</view>
            <view class="col-stock">库存</view>
            <view class="col-status">状态</view>
            <view class="col-sales">销量</view>
            <view class="col-actions">操作</view>
          </view>
        </view>

        <view class="table-body">
          <view
            v-for="product in productList"
            :key="product.id"
            class="table-row"
            :class="{ 'selected': selectedProducts.includes(product.id) }"
          >
            <view class="col-select">
              <checkbox
                :checked="selectedProducts.includes(product.id)"
                @change="handleProductSelect(product.id, $event)"
              />
            </view>
            <view class="col-image">
              <image :src="product.image" class="product-image" />
            </view>
            <view class="col-info">
              <view class="product-name">{{ product.name }}</view>
              <view class="product-code">{{ product.code }}</view>
              <view class="product-category">{{ product.category }}</view>
            </view>
            <view class="col-price">
              <view class="original-price" v-if="product.originalPrice > product.price">
                ¥{{ product.originalPrice }}
              </view>
              <view class="current-price">¥{{ product.price }}</view>
            </view>
            <view class="col-stock">
              <view class="stock-text" :class="{ 'low-stock': product.stock < 10 }">
                {{ product.stock }}
              </view>
            </view>
            <view class="col-status">
              <view class="status-badge" :class="product.status">
                {{ product.status === 'on_sale' ? '在售' : product.status === 'off_shelf' ? '下架' : '待审核' }}
              </view>
            </view>
            <view class="col-sales">
              <text class="sales-text">{{ product.sales }}</text>
            </view>
            <view class="col-actions">
              <button class="action-btn edit" @click="handleEdit(product)">
                <text class="iconfont icon-edit"></text>
              </button>
              <button class="action-btn onsale" @click="handleOnSale(product)" v-if="product.status === 'off_shelf'">
                <text class="iconfont icon-onsale"></text>
              </button>
              <button class="action-btn offshelf" @click="handleOffShelf(product)" v-else-if="product.status === 'on_sale'">
                <text class="iconfont icon-offshelf"></text>
              </button>
              <button class="action-btn delete" @click="handleDelete(product)">
                <text class="iconfont icon-delete"></text>
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 分页 -->
      <view class="pagination">
        <view class="page-info">
          <text>共 {{ totalProducts }} 条记录，显示 {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage * pageSize, totalProducts) }} 条</text>
        </view>
        <view class="page-controls">
          <button
            class="page-btn"
            :disabled="currentPage === 1"
            @click="goToPage(currentPage - 1)"
          >
            上一页
          </button>

          <view class="page-numbers">
            <button
              v-for="page in visiblePages"
              :key="page"
              class="page-number"
              :class="{ 'active': page === currentPage }"
              @click="goToPage(page)"
            >
              {{ page }}
            </button>
          </view>

          <button
            class="page-btn"
            :disabled="currentPage === totalPages"
            @click="goToPage(currentPage + 1)"
          >
            下一页
          </button>
        </view>
      </view>

      <!-- 添加/编辑商品模态框 -->
      <view v-if="showAddModal || showEditModal" class="modal-overlay" @click="closeModal">
        <view class="modal-content" @click.stop>
          <view class="modal-header">
            <text class="modal-title">{{ showAddModal ? '添加商品' : '编辑商品' }}</text>
            <view class="modal-close" @click="closeModal">
              <text class="iconfont icon-close"></text>
            </view>
          </view>

          <view class="modal-body">
            <view class="form-row">
              <view class="form-group">
                <text class="form-label">商品名称</text>
                <input
                  v-model="productForm.name"
                  class="form-input"
                  placeholder="请输入商品名称"
                />
              </view>

              <view class="form-group">
                <text class="form-label">商品编号</text>
                <input
                  v-model="productForm.code"
                  class="form-input"
                  placeholder="请输入商品编号"
                />
              </view>
            </view>

            <view class="form-row">
              <view class="form-group">
                <text class="form-label">商品分类</text>
                <picker
                  mode="selector"
                  :range="categoryOptions"
                  :value="productForm.category"
                  @change="handleFormCategoryChange"
                >
                  <view class="form-select">
                    <text>{{ categoryOptions[productForm.category] }}</text>
                    <text class="iconfont icon-down"></text>
                  </view>
                </picker>
              </view>

              <view class="form-group">
                <text class="form-label">商品状态</text>
                <picker
                  mode="selector"
                  :range="statusOptions"
                  :value="productForm.status"
                  @change="handleFormStatusChange"
                >
                  <view class="form-select">
                    <text>{{ statusOptions[productForm.status] }}</text>
                    <text class="iconfont icon-down"></text>
                  </view>
                </picker>
              </view>
            </view>

            <view class="form-row">
              <view class="form-group">
                <text class="form-label">原价</text>
                <input
                  v-model="productForm.originalPrice"
                  class="form-input"
                  placeholder="请输入原价"
                  type="number"
                />
              </view>

              <view class="form-group">
                <text class="form-label">现价</text>
                <input
                  v-model="productForm.price"
                  class="form-input"
                  placeholder="请输入现价"
                  type="number"
                />
              </view>

              <view class="form-group">
                <text class="form-label">库存</text>
                <input
                  v-model="productForm.stock"
                  class="form-input"
                  placeholder="请输入库存数量"
                  type="number"
                />
              </view>
            </view>

            <view class="form-group">
              <text class="form-label">商品描述</text>
              <textarea
                v-model="productForm.description"
                class="form-textarea"
                placeholder="请输入商品描述"
                :maxlength="500"
              />
            </view>

            <view class="form-group">
              <text class="form-label">商品图片</text>
              <view class="image-upload">
                <view class="upload-area" @click="handleImageUpload">
                  <text class="iconfont icon-upload"></text>
                  <text class="upload-text">点击上传图片</text>
                </view>
                <view v-if="productForm.image" class="image-preview">
                  <image :src="productForm.image" class="preview-image" />
                </view>
              </view>
            </view>
          </view>

          <view class="modal-footer">
            <button class="btn-secondary" @click="closeModal">取消</button>
            <button class="btn-primary" @click="handleSaveProduct">
              {{ showAddModal ? '添加' : '保存' }}
            </button>
          </view>
        </view>
      </view>

      <!-- 删除确认模态框 -->
      <view v-if="showDeleteModal" class="modal-overlay" @click="closeModal">
        <view class="modal-content delete-modal" @click.stop>
          <view class="modal-header">
            <text class="modal-title">确认删除</text>
          </view>

          <view class="modal-body">
            <text class="delete-text">
              确定要删除商品 "{{ deleteProduct?.name }}" 吗？此操作不可恢复。
            </text>
          </view>

          <view class="modal-footer">
            <button class="btn-secondary" @click="closeModal">取消</button>
            <button class="btn-danger" @click="confirmDelete">确认删除</button>
          </view>
          </view>
        </view>

        <!-- 商品分类Tab -->
        <view v-if="activeTab === 'category'" class="category-section">
          <view class="category-management">
            <view class="category-header">
              <text class="section-title">商品分类管理</text>
              <button class="btn-primary" @click="showCategoryModal = true">
                <text class="iconfont icon-add"></text>
                添加分类
              </button>
            </view>

            <view class="category-tree">
              <view class="category-item" v-for="category in categories" :key="category.id">
                <view class="category-info">
                  <text class="category-name">{{ category.name }}</text>
                  <text class="category-count">({{ category.productCount }}商品)</text>
                </view>
                <view class="category-actions">
                  <button class="action-btn edit" @click="editCategory(category)">
                    <text class="iconfont icon-edit"></text>
                  </button>
                  <button class="action-btn delete" @click="deleteCategory(category)">
                    <text class="iconfont icon-delete"></text>
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import { ref, computed } from 'vue'
import AdminLayout from '@/layouts/admin/index.uvue'

// Tab 相关
const activeTab = ref('product-list')
const tabs = ref([
  { key: 'product-list', title: '商品列表', icon: 'icon-list' },
  { key: 'product-add', title: '添加商品', icon: 'icon-add' },
  { key: 'category', title: '商品分类', icon: 'icon-category' }
])

// 响应式数据
const searchKeyword = ref('')
const showAdvancedSearch = ref(false)
const totalProducts = ref(856)
const onSaleProducts = ref(789)
const offShelfProducts = ref(45)
const lowStockProducts = ref(22)

// 筛选条件
const selectedStatus = ref(0)
const selectedCategory = ref(0)
const minPrice = ref('')
const maxPrice = ref('')

// 选项数据
const statusOptions = ['全部状态', '在售', '下架', '待审核']
const categoryOptions = ['全部分类', '电子产品', '服装鞋帽', '食品饮料', '家居用品', '图书文具']

// 商品列表
const productList = ref([
  {
    id: 1,
    name: 'iPhone 15 Pro',
    code: 'IP15P001',
    category: '电子产品',
    price: 8999,
    originalPrice: 9999,
    stock: 50,
    status: 'on_sale',
    sales: 1250,
    image: '/static/products/iphone15.jpg',
    description: '最新款 iPhone 15 Pro，性能卓越'
  },
  {
    id: 2,
    name: 'Nike 运动鞋',
    code: 'NK001',
    category: '服装鞋帽',
    price: 599,
    originalPrice: 699,
    stock: 120,
    status: 'on_sale',
    sales: 890,
    image: '/static/products/nike.jpg',
    description: '舒适透气的运动鞋'
  },
  {
    id: 3,
    name: '联想笔记本',
    code: 'LN001',
    category: '电子产品',
    price: 4599,
    originalPrice: 4999,
    stock: 3,
    status: 'on_sale',
    sales: 456,
    image: '/static/products/lenovo.jpg',
    description: '高性能商务笔记本'
  },
  {
    id: 4,
    name: '咖啡机',
    code: 'CF001',
    category: '家居用品',
    price: 1299,
    originalPrice: 1599,
    stock: 25,
    status: 'off_shelf',
    sales: 234,
    image: '/static/products/coffee.jpg',
    description: '全自动咖啡机'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalPages = computed(() => Math.ceil(totalProducts.value / pageSize.value))
const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  return pages
})

// 选择相关
const selectAll = ref(false)
const selectedProducts = ref<number[]>([])

// 模态框相关
const showAddModal = ref(false)
const showEditModal = ref(false)
const showDeleteModal = ref(false)
const deleteProduct = ref(null)

// 分类数据
const categories = ref([
  { id: 1, name: '电子产品', productCount: 156 },
  { id: 2, name: '服装鞋帽', productCount: 89 },
  { id: 3, name: '食品饮料', productCount: 67 },
  { id: 4, name: '家居用品', productCount: 45 },
  { id: 5, name: '图书文具', productCount: 34 }
])

const showCategoryModal = ref(false)

// 表单数据
const productForm = ref({
  id: 0,
  name: '',
  code: '',
  category: 0,
  price: '',
  originalPrice: '',
  stock: '',
  status: 0,
  description: '',
  image: ''
})

// 方法
const handleSearch = () => {
  console.log('搜索:', searchKeyword.value)
  // TODO: 实现搜索逻辑
}

const handleStatusChange = (e: any) => {
  selectedStatus.value = e.detail.value
}

const handleCategoryChange = (e: any) => {
  selectedCategory.value = e.detail.value
}

const handleFormCategoryChange = (e: any) => {
  productForm.value.category = e.detail.value
}

const handleFormStatusChange = (e: any) => {
  productForm.value.status = e.detail.value
}

const resetFilters = () => {
  selectedStatus.value = 0
  selectedCategory.value = 0
  minPrice.value = ''
  maxPrice.value = ''
  searchKeyword.value = ''
}

const handleAdvancedSearch = () => {
  console.log('高级搜索:', {
    status: statusOptions[selectedStatus.value],
    category: categoryOptions[selectedCategory.value],
    minPrice: minPrice.value,
    maxPrice: maxPrice.value,
    keyword: searchKeyword.value
  })
  // TODO: 实现高级搜索逻辑
}

const handleSelectAll = (e: any) => {
  selectAll.value = e.detail.value
  if (selectAll.value) {
    selectedProducts.value = productList.value.map(product => product.id)
  } else {
    selectedProducts.value = []
  }
}

const handleProductSelect = (productId: number, e: any) => {
  if (e.detail.value) {
    selectedProducts.value.push(productId)
  } else {
    selectedProducts.value = selectedProducts.value.filter(id => id !== productId)
  }
  selectAll.value = selectedProducts.value.length === productList.value.length
}

const handleBatchOnSale = () => {
  if (selectedProducts.value.length === 0) return

  uni.showModal({
    title: '确认上架',
    content: `确定要上架 ${selectedProducts.value.length} 个商品吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现批量上架逻辑
        selectedProducts.value.forEach(id => {
          const product = productList.value.find(p => p.id === id)
          if (product) product.status = 'on_sale'
        })

        uni.showToast({
          title: '批量上架成功',
          icon: 'success'
        })
        selectedProducts.value = []
        selectAll.value = false
      }
    }
  })
}

const handleBatchOffShelf = () => {
  if (selectedProducts.value.length === 0) return

  uni.showModal({
    title: '确认下架',
    content: `确定要下架 ${selectedProducts.value.length} 个商品吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现批量下架逻辑
        selectedProducts.value.forEach(id => {
          const product = productList.value.find(p => p.id === id)
          if (product) product.status = 'off_shelf'
        })

        uni.showToast({
          title: '批量下架成功',
          icon: 'success'
        })
        selectedProducts.value = []
        selectAll.value = false
      }
    }
  })
}

const handleBatchDelete = () => {
  if (selectedProducts.value.length === 0) return

  uni.showModal({
    title: '确认删除',
    content: `确定要删除 ${selectedProducts.value.length} 个商品吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现批量删除逻辑
        selectedProducts.value.forEach(id => {
          const index = productList.value.findIndex(p => p.id === id)
          if (index > -1) {
            productList.value.splice(index, 1)
            totalProducts.value--
          }
        })

        uni.showToast({
          title: '批量删除成功',
          icon: 'success'
        })
        selectedProducts.value = []
        selectAll.value = false
      }
    }
  })
}

const handleEdit = (product: any) => {
  productForm.value = {
    id: product.id,
    name: product.name,
    code: product.code,
    category: categoryOptions.indexOf(product.category),
    price: product.price.toString(),
    originalPrice: product.originalPrice.toString(),
    stock: product.stock.toString(),
    status: statusOptions.indexOf(product.status === 'on_sale' ? '在售' : product.status === 'off_shelf' ? '下架' : '待审核'),
    description: product.description,
    image: product.image
  }
  showEditModal.value = true
}

const handleOnSale = (product: any) => {
  uni.showModal({
    title: '确认上架',
    content: `确定要上架商品 "${product.name}" 吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现上架逻辑
        product.status = 'on_sale'
        uni.showToast({
          title: '上架成功',
          icon: 'success'
        })
      }
    }
  })
}

const handleOffShelf = (product: any) => {
  uni.showModal({
    title: '确认下架',
    content: `确定要下架商品 "${product.name}" 吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现下架逻辑
        product.status = 'off_shelf'
        uni.showToast({
          title: '下架成功',
          icon: 'success'
        })
      }
    }
  })
}

const handleDelete = (product: any) => {
  deleteProduct.value = product
  showDeleteModal.value = true
}

const confirmDelete = () => {
  // TODO: 实现删除逻辑
  const index = productList.value.findIndex(p => p.id === deleteProduct.value.id)
  if (index > -1) {
    productList.value.splice(index, 1)
    totalProducts.value--
  }

  uni.showToast({
    title: '删除成功',
    icon: 'success'
  })

  closeModal()
}

const handleSaveProduct = () => {
  // 表单验证
  if (!productForm.value.name || !productForm.value.code) {
    uni.showToast({
      title: '请填写必填信息',
      icon: 'none'
    })
    return
  }

  if (showAddModal.value) {
    // TODO: 实现添加商品逻辑
    const newProduct = {
      id: Date.now(),
      name: productForm.value.name,
      code: productForm.value.code,
      category: categoryOptions[productForm.value.category],
      price: parseFloat(productForm.value.price),
      originalPrice: parseFloat(productForm.value.originalPrice),
      stock: parseInt(productForm.value.stock),
      status: statusOptions[productForm.value.status] === '在售' ? 'on_sale' : statusOptions[productForm.value.status] === '下架' ? 'off_shelf' : 'pending',
      sales: 0,
      image: productForm.value.image || '/static/products/default.jpg',
      description: productForm.value.description
    }
    productList.value.unshift(newProduct)
    totalProducts.value++

    uni.showToast({
      title: '添加成功',
      icon: 'success'
    })
  } else {
    // TODO: 实现编辑商品逻辑
    const product = productList.value.find(p => p.id === productForm.value.id)
    if (product) {
      product.name = productForm.value.name
      product.code = productForm.value.code
      product.category = categoryOptions[productForm.value.category]
      product.price = parseFloat(productForm.value.price)
      product.originalPrice = parseFloat(productForm.value.originalPrice)
      product.stock = parseInt(productForm.value.stock)
      product.status = statusOptions[productForm.value.status] === '在售' ? 'on_sale' : statusOptions[productForm.value.status] === '下架' ? 'off_shelf' : 'pending'
      product.description = productForm.value.description
      product.image = productForm.value.image
    }

    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
  }

  closeModal()
}

const handleImageUpload = () => {
  uni.showToast({
    title: '图片上传功能开发中',
    icon: 'none'
  })
}

const closeModal = () => {
  showAddModal.value = false
  showEditModal.value = false
  showDeleteModal.value = false
  deleteProduct.value = null

  // 重置表单
  productForm.value = {
    id: 0,
    name: '',
    code: '',
    category: 0,
    price: '',
    originalPrice: '',
    stock: '',
    status: 0,
    description: '',
    image: ''
  }
}

const goToPage = (page: number) => {
  currentPage.value = page
  // TODO: 实现分页数据加载
}

// Tab 切换方法
const switchTab = (tabKey: string) => {
  activeTab.value = tabKey

  // 根据不同tab切换显示内容
  if (tabKey === 'product-add') {
    showAddModal.value = true
  } else {
    showAddModal.value = false
  }
}

// 分类管理方法
const editCategory = (category: any) => {
  uni.showToast({
    title: '编辑分类功能开发中',
    icon: 'none'
  })
}

const deleteCategory = (category: any) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除分类 "${category.name}" 吗？`,
    success: (res) => {
      if (res.confirm) {
        const index = categories.value.findIndex(c => c.id === category.id)
        if (index > -1) {
          categories.value.splice(index, 1)
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
        }
      }
    }
  })
}

// 页面生命周期
onLoad((options: any) => {
  // 处理页面参数，切换到对应的tab
  if (options && options.action) {
    if (options.action === 'add') {
      activeTab.value = 'product-add'
      showAddModal.value = true
    } else {
      activeTab.value = 'product-list'
    }
  } else if (options && options.tab) {
    if (options.tab === 'category') {
      activeTab.value = 'category'
    } else {
      activeTab.value = 'product-list'
    }
  } else {
    activeTab.value = 'product-list'
  }

  console.log('商品管理页面加载，参数:', options)
})

onMounted(() => {
  // 初始化数据
  console.log('商品管理页面初始化')
})
</script>

<style lang="scss">
/* Tab 栏样式 */
.tab-bar {
  display: flex;
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx 24rpx;
  border-radius: 6rpx;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #f5f5f5;
  color: #666666;
}

.tab-item:hover {
  background-color: #e8e8e8;
}

.tab-item.active {
  background-color: #1890ff;
  color: #ffffff;
}

.tab-icon {
  font-size: 16rpx;
}

.tab-title {
  font-size: 14rpx;
  font-weight: 500;
}

/* 分类管理样式 */
.category-section {
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.category-management {
  padding: 32rpx;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 18rpx;
  font-weight: 600;
  color: #262626;
}

.category-tree {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  background-color: #fafafa;
  border-radius: 6rpx;
  border: 1rpx solid #e8e8e8;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.category-name {
  font-size: 16rpx;
  font-weight: 500;
  color: #262626;
}

.category-count {
  font-size: 14rpx;
  color: #666666;
}

.category-actions {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 16rpx;
}

.action-btn.edit {
  background-color: #1890ff;
  color: #ffffff;
}

.action-btn.delete {
  background-color: #ff4d4f;
  color: #ffffff;
}

.product-management {
  padding: 20rpx;
}

.page-header {
  margin-bottom: 30rpx;
}

.page-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.page-subtitle {
  display: block;
  font-size: 26rpx;
  color: #666;
}

.stats-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  flex-wrap: wrap;
  gap: 20rpx;
}

.stat-card {
  flex: 1;
  min-width: 200rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.stat-icon {
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.stat-content {
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  opacity: 0.9;
}

.search-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 16rpx 20rpx;
  border: none;
  font-size: 28rpx;
}

.search-btn {
  padding: 16rpx 20rpx;
  background-color: #1890ff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #1890ff;
  cursor: pointer;
  font-size: 26rpx;
}

.advanced-search {
  border-top: 1rpx solid #eee;
  padding-top: 30rpx;
  margin-top: 20rpx;
}

.filter-row {
  display: flex;
  gap: 30rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.filter-item {
  flex: 1;
  min-width: 200rpx;
}

.filter-label {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  background-color: #fff;
  cursor: pointer;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.price-input {
  flex: 1;
  padding: 16rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.price-separator {
  color: #666;
  font-size: 24rpx;
}

.filter-actions {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  flex-wrap: wrap;
  gap: 20rpx;
}

.left-actions,
.right-actions {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 26rpx;
}

.btn-primary {
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.btn-secondary {
  background-color: #fff;
  color: #666;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.btn-warning {
  background-color: #faad14;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.btn-danger {
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.btn-danger:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.product-table {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.table-header {
  background-color: #f5f5f5;
  border-bottom: 1rpx solid #eee;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row.selected {
  background-color: #f0f8ff;
}

.col-select {
  width: 80rpx;
  text-align: center;
}

.col-image {
  width: 120rpx;
  text-align: center;
}

.col-info {
  flex: 2;
}

.col-price,
.col-stock,
.col-sales {
  flex: 1;
}

.col-status {
  flex: 1.2;
}

.col-actions {
  width: 250rpx;
  display: flex;
  gap: 10rpx;
  justify-content: center;
}

.product-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.product-code {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.product-category {
  font-size: 24rpx;
  color: #666;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-bottom: 4rpx;
}

.current-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4d4f;
}

.stock-text {
  font-size: 26rpx;
  color: #333;
}

.stock-text.low-stock {
  color: #ff4d4f;
  font-weight: bold;
}

.status-badge {
  display: inline-block;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: bold;
  text-align: center;
}

.status-badge.on_sale {
  background-color: #52c41a;
  color: #fff;
}

.status-badge.off_shelf {
  background-color: #ff4d4f;
  color: #fff;
}

.status-badge.pending {
  background-color: #faad14;
  color: #fff;
}

.sales-text {
  font-size: 26rpx;
  color: #666;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 24rpx;
}

.action-btn.edit {
  background-color: #1890ff;
  color: #fff;
}

.action-btn.onsale {
  background-color: #52c41a;
  color: #fff;
}

.action-btn.offshelf {
  background-color: #faad14;
  color: #fff;
}

.action-btn.delete {
  background-color: #ff4d4f;
  color: #fff;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  flex-wrap: wrap;
  gap: 20rpx;
}

.page-info {
  font-size: 26rpx;
  color: #666;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.page-btn {
  padding: 12rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  font-size: 26rpx;
}

.page-btn:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 8rpx;
  margin: 0 20rpx;
}

.page-number {
  width: 50rpx;
  height: 50rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 26rpx;
}

.page-number.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 12rpx;
  width: 90%;
  max-width: 700rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.delete-modal {
  max-width: 400rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  cursor: pointer;
  font-size: 28rpx;
  color: #999;
  padding: 10rpx;
}

.modal-body {
  padding: 30rpx;
}

.form-row {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  min-width: 200rpx;
}

.form-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 16rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-textarea {
  min-height: 120rpx;
  resize: vertical;
}

.form-select {
  padding: 16rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  background-color: #fff;
  cursor: pointer;
  font-size: 28rpx;
}

.image-upload {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.upload-area {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
}

.upload-text {
  font-size: 24rpx;
  margin-top: 8rpx;
}

.preview-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.modal-footer {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
  padding: 30rpx;
  border-top: 1rpx solid #eee;
}

.delete-text {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  line-height: 1.5;
}

.iconfont {
  font-family: 'iconfont';
  font-size: 24rpx;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .stats-cards {
    flex-direction: column;
  }

  .filter-row {
    flex-direction: column;
    gap: 15rpx;
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .left-actions,
  .right-actions {
    justify-content: center;
  }

  .table-row {
    flex-wrap: wrap;
    gap: 10rpx;
  }

  .col-info {
    flex: 1 1 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 15rpx;
  }

  .pagination {
    flex-direction: column;
    text-align: center;
  }
}
</style>