<template>
  <view class="wrap">
    <!-- 顶部 Tab -->
    <view class="tabs">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @tap="switchTab(0)">
        <text class="tab-text">待处理</text>
        <text class="tab-count" v-if="aggregatedList.length > 0">({{ aggregatedList.length }})</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @tap="switchTab(1)">
        <text class="tab-text">已申请发货</text>
        <text class="tab-count" v-if="shippedList.length > 0">({{ shippedList.length }})</text>
      </view>
    </view>
    
    <!-- Tab 0: 待处理商品 -->
    <block v-if="currentTab === 0">
      <!-- 全选栏 -->
      <view class="action-bar" v-if="aggregatedList.length > 0">
        <view class="select-all" @tap="toggleSelectAll">
          <view class="checkbox" :class="{ checked: isAllSelected }"></view>
          <text>全选</text>
        </view>
      </view>

      <view v-if="loading && aggregatedList.length === 0" class="status-text">加载中...</view>
      <view v-else-if="!aggregatedList || aggregatedList.length === 0" class="status-text">背包空空如也</view>
      
      <view v-else class="inventory-grid">
        <view v-for="(item, index) in aggregatedList" :key="index" class="inventory-item">
          <view class="checkbox-area" @tap.stop="toggleSelect(item)">
             <view class="checkbox" :class="{ checked: item.selected }"></view>
          </view>
          <image :src="item.image" mode="aspectFill" class="item-image" @error="onImageError(index, 'aggregated')" />
          <view class="item-info">
            <text class="item-name">{{ item.name || '未命名道具' }}</text>
            <text class="item-price" v-if="item.price">单价: ¥{{ item.price }}</text>
            <view class="item-actions">
               <text class="item-count" v-if="!item.selected">x{{ item.count || 1 }}</text>
               <view class="stepper" v-else @tap.stop>
                  <text class="step-btn minus" @tap.stop="changeCount(item, -1)">-</text>
                  <text class="step-num">{{ item.selectedCount }}</text>
                  <text class="step-btn plus" @tap.stop="changeCount(item, 1)">+</text>
               </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="loading && aggregatedList.length > 0" class="loading-more">加载更多...</view>
      <view v-if="!hasMore && aggregatedList.length > 0" class="no-more">没有更多了</view>
      
      <!-- 底部操作栏 -->
      <view class="bottom-bar" v-if="hasSelected">
        <view class="selected-info">已选 {{ totalSelectedCount }} 件</view>
        <view class="btn-group">
          <button class="action-btn btn-ship" @tap="onShip">发货</button>
          <button class="action-btn btn-redeem" @tap="onRedeem">兑换</button>
        </view>
      </view>
      <view class="bottom-spacer" v-if="hasSelected"></view>
    </block>

    <!-- Tab 1: 已申请发货 -->
    <block v-if="currentTab === 1">
      <view v-if="loading && shippedList.length === 0" class="status-text">加载中...</view>
      <view v-else-if="!shippedList || shippedList.length === 0" class="status-text">暂无发货记录</view>
      
      <view v-else class="shipment-list">
        <view v-for="(item, index) in shippedList" :key="index" class="shipment-card">
          <!-- 头部：批次信息和状态 -->
          <view class="shipment-header">
            <view class="shipment-batch">
              <text class="batch-label">发货单</text>
              <text class="batch-no" v-if="item.batch_no">{{ item.batch_no }}</text>
              <view class="count-badge">{{ item.count }}件商品</view>
            </view>
            <view class="shipment-status" :class="getStatusClass(item.status)">
              {{ getStatusText(item.status) }}
            </view>
          </view>
          
          <!-- 商品缩略图列表 -->
          <view class="product-thumbnails">
            <view class="thumb-scroll">
              <image 
                v-for="(img, imgIdx) in item.product_images.slice(0, 4)" 
                :key="imgIdx"
                :src="img" 
                mode="aspectFill" 
                class="thumb-img"
                @error="onThumbError(index, imgIdx)"
              />
              <view class="thumb-more" v-if="item.product_images.length > 4">
                +{{ item.product_images.length - 4 }}
              </view>
            </view>
            <!-- 商品名称列表 -->
            <view class="product-names">
              <text class="product-name-item" v-for="(name, nIdx) in item.product_names.slice(0, 3)" :key="nIdx">
                {{ name }}
              </text>
              <text class="product-name-more" v-if="item.product_names.length > 3">
                等{{ item.product_names.length }}件商品
              </text>
            </view>
          </view>
          
          <!-- 物流信息 -->
          <view class="shipment-express" v-if="item.express_code || item.express_no">
            <view class="express-icon">
              <text class="iconfont">📦</text>
            </view>
            <view class="express-info">
              <text class="express-company">{{ item.express_code || '待发货' }}</text>
              <text class="express-no" v-if="item.express_no">{{ item.express_no }}</text>
            </view>
            <text class="express-copy" v-if="item.express_no" @tap="copyExpressNo(item.express_no)">复制</text>
          </view>
          
          <!-- 时间信息 -->
          <view class="shipment-time">
            <text class="time-item" v-if="item.created_at">申请时间：{{ formatDate(item.created_at) }}</text>
            <text class="time-item" v-if="item.shipped_at">发货时间：{{ formatDate(item.shipped_at) }}</text>
          </view>
        </view>
      </view>
      <view v-if="loading && shippedList.length > 0" class="loading-more">加载更多...</view>
      <view v-if="!hasMore && shippedList.length > 0" class="no-more">没有更多了</view>
    </block>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { getInventory, getProductDetail, redeemInventory, requestShipping, listAddresses, getShipments } from '@/api/appUser'

const currentTab = ref(0)
const aggregatedList = ref([])
const shippedList = ref([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(100)
const hasMore = ref(true)

const totalCount = computed(() => {
  return aggregatedList.value.reduce((sum, item) => sum + (item.count || 1), 0)
})

const hasSelected = computed(() => {
  return aggregatedList.value.some(item => item.selected)
})

const totalSelectedCount = computed(() => {
  return aggregatedList.value.reduce((sum, item) => sum + (item.selected ? item.selectedCount : 0), 0)
})

const isAllSelected = computed(() => {
  return aggregatedList.value.length > 0 && aggregatedList.value.every(item => item.selected)
})

onShow(() => {
  const token = uni.getStorageSync('token')
  const phoneBound = !!uni.getStorageSync('phone_bound')
  console.log('cabinet onShow token:', token, 'isLogin:', !!token, 'phoneBound:', phoneBound)
  
  if (!token || !phoneBound) {
    uni.showModal({
      title: '提示',
      content: '请先登录并绑定手机号',
      confirmText: '去登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/pages/login/index' })
        }
      }
    })
    return
  }

  // 重置并加载第一页
  page.value = 1
  hasMore.value = true
  aggregatedList.value = []
  shippedList.value = []
  const uid = uni.getStorageSync("user_id")
  if (currentTab.value === 1) {
    loadShipments(uid)
  } else {
    loadAllInventory(uid)
  }
})

onReachBottom(() => {
  if (hasMore.value && !loading.value) {
    const uid = uni.getStorageSync("user_id")
    if (currentTab.value === 1) {
      loadShipments(uid)
    } else {
      loadInventory(uid)
    }
  }
})

function switchTab(index) {
  currentTab.value = index
  // 切换时重新加载数据
  page.value = 1
  hasMore.value = true
  aggregatedList.value = []
  shippedList.value = []
  const uid = uni.getStorageSync("user_id")
  if (currentTab.value === 1) {
    loadShipments(uid)
  } else {
    loadAllInventory(uid)
  }
}

function cleanUrl(u) {
  if (!u) return '/static/logo.png'
  let s = String(u).trim()
  
  // 尝试解析 JSON 数组字符串
  if (s.startsWith('[') && s.endsWith(']')) {
    try {
      const arr = JSON.parse(s)
      if (Array.isArray(arr) && arr.length > 0) {
        s = arr[0]
      }
    } catch (e) {
      console.warn('JSON parse failed for image:', s)
    }
  }

  // 清理反引号和空格
  s = s.replace(/[`'"]/g, '').trim()
  
  // 提取 http 链接
  const m = s.match(/https?:\/\/[^\s]+/)
  if (m && m[0]) return m[0]
  
  return s || '/static/logo.png'
}

function onImageError(index, type = 'aggregated') {
  if (type === 'aggregated' && aggregatedList.value[index]) {
    aggregatedList.value[index].image = '/static/logo.png'
  } else if (type === 'shipped' && shippedList.value[index]) {
    shippedList.value[index].image = '/static/logo.png'
  }
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  if (isNaN(d.getTime())) return ''
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const da = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const min = String(d.getMinutes()).padStart(2, '0')
  return `${y}-${m}-${da} ${h}:${min}`
}

// 发货状态辅助函数
function getStatusClass(status) {
  const statusMap = {
    1: 'status-pending',    // 待发货
    2: 'status-shipped',    // 已发货
    3: 'status-delivered',  // 已签收
    4: 'status-cancelled'   // 已取消
  }
  return statusMap[status] || 'status-pending'
}

function getStatusText(status) {
  const statusMap = {
    1: '待发货',
    2: '运输中',
    3: '已签收',
    4: '已取消'
  }
  return statusMap[status] || '待发货'
}

function copyExpressNo(expressNo) {
  uni.setClipboardData({
    data: expressNo,
    success: () => {
      uni.showToast({ title: '已复制单号', icon: 'success' })
    }
  })
}

function onThumbError(shipmentIndex, imgIndex) {
  if (shippedList.value[shipmentIndex] && shippedList.value[shipmentIndex].product_images) {
    shippedList.value[shipmentIndex].product_images[imgIndex] = '/static/logo.png'
  }
}

async function loadShipments(uid) {
  if (loading.value) return
  loading.value = true
  try {
    const res = await getShipments(uid, page.value, pageSize.value)
    let list = []
    let total = 0
    if (res && Array.isArray(res.list)) { list = res.list; total = res.total || 0 }
    else if (res && Array.isArray(res.data)) { list = res.data; total = res.total || 0 }
    else if (Array.isArray(res)) { list = res; total = res.length }
    
    // 处理每个发货单 - 直接使用返回的 products 数组
    const mapped = list.map(s => {
      const products = s.products || []
      let productImages = []
      let productNames = []
      
      // 从 products 数组中提取图片和名称
      products.forEach(product => {
        if (product) {
          // image 字段是 JSON 数组字符串，需要解析
          const rawImg = product.image || product.images || product.main_image
          const img = cleanUrl(rawImg)
          productImages.push(img)
          productNames.push(product.name || product.title || '商品')
        }
      })
      
      // 如果没有获取到任何图片，使用默认图片
      if (productImages.length === 0) {
        productImages = ['/static/logo.png']
        productNames = ['未知商品']
      }
      
      return {
        batch_no: s.batch_no || '',
        count: s.count ?? (Array.isArray(s.inventory_ids) ? s.inventory_ids.length : 0),
        product_ids: s.product_ids || [],
        product_images: productImages,
        product_names: productNames,
        express_code: s.express_code || '',
        express_no: s.express_no || '',
        created_at: s.created_at || '',
        shipped_at: s.shipped_at || '',
        received_at: s.received_at || '',
        status: s.status || 1
      }
    })
    
    const next = page.value === 1 ? mapped : [...shippedList.value, ...mapped]
    shippedList.value = next
    if (list.length < pageSize.value || (page.value * pageSize.value >= total && total > 0)) { hasMore.value = false } else { page.value += 1 }
    if (list.length === 0) { hasMore.value = false }
  } catch (e) {
    console.error('Load shipments error:', e)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

async function loadInventory(uid) {
  if (loading.value) return
  loading.value = true
  try {
    const res = await getInventory(uid, page.value, pageSize.value)
    console.log('Inventory loaded:', res)
    
    let list = []
    let total = 0
    
    if (res && Array.isArray(res.list)) {
      list = res.list
      total = res.total || 0
    } else if (res && Array.isArray(res.data)) { // 兼容 data: [] 格式
       list = res.data
       total = res.total || 0
    } else if (Array.isArray(res)) { // 兼容直接返回数组
      list = res
      total = res.length
    }

    // 过滤 status=1 (正常) 或 status=3 (已使用/已发货/已兑换) 的物品
    // status=1: 正常在背包
    // status=3: 已处理（可能是已发货或已兑换积分）
    const filteredList = list.filter(item => {
      const s = Number(item.status)
      return s === 1 || s === 3
    })
    
    // 调试日志：打印第一条数据以确认字段结构
    if (filteredList.length > 0) {
       console.log('Debug Inventory Item:', filteredList[0])
    }

    // 根据当前 Tab 过滤是否发货
    const targetItems = filteredList.filter(item => {
      // Tab 0: 待处理 (has_shipment 为 false 且 status=1)
      // Tab 1: 已申请发货 (has_shipment 为 true)
      
      // 注意：API 返回的 has_shipment 可能是布尔值 true/false，也可能是数字 1/0，或者是字符串 "true"/"false"
      // 这里做一个宽容的判断
      const isShipped = item.has_shipment === true || item.has_shipment === 1 || String(item.has_shipment) === 'true' || String(item.has_shipment) === '1'
      
      if (currentTab.value === 1) {
        // 已申请发货列表：必须是已发货状态
        // 注意：有些记录 status=3 且 has_shipment=true 表示已发货
        return isShipped
      } else {
        // 待处理列表：未发货且 status=1 (status=3 且未发货的可能是已兑换积分，不应显示在待处理)
        return !isShipped && Number(item.status) === 1
      }
    })
    
    console.log('Filtered list (status=1, tab=' + currentTab.value + '):', targetItems)

    // 处理新数据
    const newItems = targetItems.map(item => {
      let imageUrl = ''
      try {
        let rawImg = item.product_images || item.image
        if (rawImg && typeof rawImg === 'string') {
           imageUrl = cleanUrl(rawImg)
        }
      } catch (e) {
        console.error('Image parse error:', e)
      }

      const isShipped = item.has_shipment === true || item.has_shipment === 1 || String(item.has_shipment) === 'true' || String(item.has_shipment) === '1'

      return {
        id: item.product_id || item.id, // 优先使用 product_id
        original_ids: [item.id], // 初始化 id 数组
        name: (item.product_name || item.name || '').trim(),
        image: imageUrl,
        count: 1,
        selected: false,
        selectedCount: 1,
        has_shipment: isShipped,
        updated_at: item.updated_at // 保留更新时间用于分组
      }
    })
    
    console.log('Mapped new items:', newItems.length)

    // 正确的聚合逻辑：
    // 1. 如果是第一页，直接基于 newItems 生成初始列表（带去重聚合）
    // 2. 如果是后续页，将 newItems 聚合到现有列表中
    
    // 深拷贝当前列表
    let currentList = currentTab.value === 1 ? shippedList : aggregatedList
    let next = page.value === 1 ? [] : [...currentList.value]
    
    if (currentTab.value === 1) {
      // 已发货列表：按 updated_at 分组展示
      // 这里我们实际上不按 ID 聚合，而是直接把新数据追加进去，
      // 但为了 UI 展示，我们可以在前端通过 computed 或在这里预处理进行分组
      // 为了保持与原有列表结构一致（flat list），我们这里暂时按照 updated_at + product_id 聚合
      // 或者：既然用户要求按 updated_at 分组，可能希望看到的是“一次发货申请”作为一个卡片？
      // 这里的实现逻辑是：如果 updated_at 和 product_id 都相同，则聚合数量；否则作为新条目
      
      newItems.forEach(newItem => {
        // 查找是否存在 updated_at 和 product_id 都相同的条目
        // 注意：updated_at 可能是 ISO 字符串，比较前最好截取到秒或直接比较字符串
        const existingItem = next.find(i => 
          i.id == newItem.id && 
          new Date(i.updated_at).getTime() === new Date(newItem.updated_at).getTime()
        )
        
        if (existingItem) {
          existingItem.count += 1
          if (Array.isArray(existingItem.original_ids)) {
            existingItem.original_ids.push(...newItem.original_ids)
          }
        } else {
          next.push(newItem)
        }
      })
      
    } else {
      // 待处理列表：按 product_id (id) 聚合
      newItems.forEach(newItem => {
        if (!newItem.id) {
           next.push(newItem)
           return
        }
        
        const existingItem = next.find(i => i.id == newItem.id)
        if (existingItem) {
          existingItem.count += 1
          if (Array.isArray(existingItem.original_ids)) {
            existingItem.original_ids.push(...newItem.original_ids)
          } else {
            existingItem.original_ids = [...newItem.original_ids]
          }
        } else {
          next.push(newItem)
        }
      })
    }
    
    console.log('Final aggregated list:', JSON.parse(JSON.stringify(next)))
    
    if (currentTab.value === 1) {
      shippedList.value = next
    } else {
      aggregatedList.value = next
    }

    // 判断是否还有更多
    // 注意：这里的 total 是总记录数（未过滤 status=1 之前的），
    // 我们的分页是基于原始数据的，所以判断依据是原始数据的分页进度
    if (list.length < pageSize.value || (page.value * pageSize.value >= total && total > 0)) {
       hasMore.value = false
    } else {
       page.value += 1
    }

    // 如果返回空列表（且 total 为 0），也认为没有更多了
    if (list.length === 0) {
      hasMore.value = false
    }

  } catch (error) {
    console.error('Failed to load inventory:', error)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

async function loadAllInventory(uid) {
  try {
    while (hasMore.value) {
      await loadInventory(uid)
    }
    fetchProductPrices()
  } catch (e) {}
}

async function fetchProductPrices() {
  const currentList = currentTab.value === 1 ? shippedList : aggregatedList
  const list = currentList.value
  for (let i = 0; i < list.length; i++) {
    const item = list[i]
    if (item.id && !item.price) {
      try {
        const res = await getProductDetail(item.id)
        if (res && (res.price !== undefined || res.data?.price !== undefined)) {
           // 优先取 res.price，其次 res.data.price (兼容不同返回结构)
           const raw = res.price !== undefined ? res.price : res.data?.price
           const num = Number(raw)
           item.price = isNaN(num) ? null : (num / 100)
        }
      } catch (e) {
        console.error('Fetch price failed for:', item.id, e)
      }
    }
  }
}

function toggleSelect(item) {
  item.selected = !item.selected
  if (item.selected) {
    // 选中时默认数量为最大值
    item.selectedCount = item.count
  }
}

function toggleSelectAll() {
  const newState = !isAllSelected.value
  aggregatedList.value.forEach(item => {
    item.selected = newState
    if (newState) {
      item.selectedCount = item.count
    }
  })
}

function changeCount(item, delta) {
  if (!item.selected) return
  const newCount = item.selectedCount + delta
  if (newCount >= 1 && newCount <= item.count) {
    item.selectedCount = newCount
  }
}

async function onRedeem() {
  const user_id = uni.getStorageSync('user_id')
  if (!user_id) return
  
  const selectedItems = aggregatedList.value.filter(item => item.selected)
  if (selectedItems.length === 0) return
  
  // 收集所有需要兑换的 inventory id
  let allIds = []
  selectedItems.forEach(item => {
    // 确保有足够的 original_ids
    if (item.original_ids && item.original_ids.length >= item.selectedCount) {
      // 取出前 selectedCount 个 id
      const idsToRedeem = item.original_ids.slice(0, item.selectedCount)
      allIds.push(...idsToRedeem)
    }
  })
  
  if (allIds.length === 0) {
    uni.showToast({ title: '选择无效', icon: 'none' })
    return
  }
  
  uni.showModal({
    title: '确认兑换',
    content: `确定要兑换选中的 ${allIds.length} 件物品吗？此操作不可撤销。`,
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' })
        try {
          await redeemInventory(user_id, allIds)
          uni.showToast({ title: '兑换成功', icon: 'success' })
          // 刷新列表
          aggregatedList.value = []
          page.value = 1
          hasMore.value = true
          loadAllInventory(user_id)
        } catch (e) {
          uni.showToast({ title: e.message || '兑换失败', icon: 'none' })
        } finally {
          uni.hideLoading()
        }
      }
    }
  })
}

async function onShip() {
  const user_id = uni.getStorageSync('user_id')
  if (!user_id) return
  
  const selectedItems = aggregatedList.value.filter(item => item.selected)
  if (selectedItems.length === 0) return
  
  // 收集所有需要发货的 inventory id
  let allIds = []
  selectedItems.forEach(item => {
    if (item.original_ids && item.original_ids.length >= item.selectedCount) {
      const idsToShip = item.original_ids.slice(0, item.selectedCount)
      allIds.push(...idsToShip)
    }
  })
  
  if (allIds.length === 0) {
    uni.showToast({ title: '选择无效', icon: 'none' })
    return
  }

  // 2. 确认发货
  uni.showModal({
    title: '确认发货',
    content: `共 ${allIds.length} 件物品，确认申请发货？`,
    confirmText: '确认发货',
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '提交中...' })
        try {
          await requestShipping(user_id, allIds)
          uni.showToast({ title: '申请成功', icon: 'success' })
          // 刷新列表
          aggregatedList.value = []
          page.value = 1
          hasMore.value = true
          loadAllInventory(user_id)
        } catch (e) {
          uni.showToast({ title: e.message || '申请失败', icon: 'none' })
        } finally {
          uni.hideLoading()
        }
      }
    }
  })
}
</script>

<style scoped>
/* ============================================
   奇盒潮玩 - 货柜页面
   采用暖橙色调，物品卡片式布局
   ============================================ */

.item-status {
  font-size: 24rpx;
  color: #FF9F43;
  margin-top: 4rpx;
  font-weight: 500;
}
.item-meta { 
  font-size: 22rpx; 
  color: #9CA3AF; 
  margin-top: 4rpx;
}

.wrap { 
  padding: 24rpx; 
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8F3 0%, #FFFFFF 100%);
}

/* Tab 切换 */
.tabs {
  display: flex;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #6B7280;
  padding: 20rpx 0;
  border-radius: 16rpx;
  transition: all 0.25s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
}

.tab-item.active {
  background: linear-gradient(135deg, #FF9F43, #FF6B35);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.35);
}

.tab-text {
  font-size: 28rpx;
}

.tab-count {
  font-size: 24rpx;
  opacity: 0.85;
}

/* 操作栏 */
.action-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 8rpx;
}

.select-all {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #1F2937;
  font-weight: 500;
}

.select-all .checkbox {
  margin-right: 12rpx;
}

.header { 
  font-size: 32rpx; 
  font-weight: 700; 
  color: #1F2937;
  margin-bottom: 24rpx; 
}

.status-text { 
  text-align: center; 
  color: #9CA3AF; 
  margin-top: 120rpx;
  font-size: 28rpx;
}

/* 物品列表 */
.inventory-grid {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.inventory-item {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}
.inventory-item:active {
  transform: scale(0.98);
}

.item-image {
  width: 140rpx;
  height: 140rpx;
  margin-right: 24rpx;
  border-radius: 16rpx;
  background: linear-gradient(145deg, #FFF8F3, #FFF4E6);
  flex-shrink: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.item-info {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-name {
  font-size: 28rpx;
  color: #1F2937;
  font-weight: 600;
  display: block;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-count {
  font-size: 24rpx;
  color: #9CA3AF;
  margin-bottom: 4rpx;
}

.item-price {
  font-size: 26rpx;
  color: #FF6B35;
  font-weight: 600;
}

/* 复选框 */
.checkbox-area {
  padding: 10rpx 20rpx 10rpx 0;
  display: flex;
  align-items: center;
}

.checkbox {
  width: 44rpx;
  height: 44rpx;
  border: 3rpx solid #E5E7EB;
  border-radius: 50%;
  position: relative;
  transition: all 0.2s ease;
}

.checkbox.checked {
  background: linear-gradient(135deg, #FF9F43, #FF6B35);
  border-color: #FF9F43;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
}

.checkbox.checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 12rpx;
  height: 22rpx;
  border-right: 4rpx solid #fff;
  border-bottom: 4rpx solid #fff;
}

/* 数量步进器 */
.item-actions {
  margin-top: 12rpx;
  display: flex;
  align-items: center;
}

.stepper {
  display: flex;
  align-items: center;
  background: #F9FAFB;
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
  height: 52rpx;
  overflow: hidden;
}

.step-btn {
  width: 52rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-size: 32rpx;
  color: #6B7280;
  transition: all 0.15s ease;
}
.step-btn:active {
  background: #FFF4E6;
  color: #FF6B35;
}

.step-btn.minus { border-right: 2rpx solid #E5E7EB; }
.step-btn.plus { border-left: 2rpx solid #E5E7EB; }

.step-num {
  width: 64rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 600;
  color: #1F2937;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 100;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.selected-info {
  font-size: 28rpx;
  color: #1F2937;
  font-weight: 600;
}

.btn-group {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  margin: 0;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  font-weight: 600;
  border-radius: 36rpx;
  padding: 0 36rpx;
  border: none;
  transition: all 0.2s ease;
}
.action-btn:active {
  transform: scale(0.95);
}

.btn-ship {
  background: linear-gradient(135deg, #FFD166, #FF9F43);
  color: #6b4b1f;
  box-shadow: 0 6rpx 16rpx rgba(255, 159, 67, 0.35);
}

.btn-redeem {
  background: linear-gradient(135deg, #FF9F43, #FF6B35);
  color: #FFFFFF;
  box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.35);
}

.loading-more, .no-more {
  text-align: center;
  color: #9CA3AF;
  padding: 24rpx 0;
  font-size: 26rpx;
}

.bottom-spacer {
  height: 130rpx;
  height: calc(130rpx + constant(safe-area-inset-bottom));
  height: calc(130rpx + env(safe-area-inset-bottom));
}

/* ============================================
   发货单卡片样式
   ============================================ */
.shipment-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.shipment-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 28rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

/* 发货单头部 */
.shipment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #F3F4F6;
}

.shipment-batch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rpx;
}

.batch-label {
  font-size: 28rpx;
  font-weight: 700;
  color: #1F2937;
}

.batch-no {
  font-size: 22rpx;
  color: #9CA3AF;
  font-family: monospace;
}

.count-badge {
  background: linear-gradient(135deg, #FFF4E6, #FFEDD5);
  color: #FF6B35;
  font-size: 22rpx;
  font-weight: 600;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

/* 发货状态标签 */
.shipment-status {
  font-size: 24rpx;
  font-weight: 600;
  padding: 8rpx 20rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.status-pending {
  background: #FEF3C7;
  color: #D97706;
}

.status-shipped {
  background: #DBEAFE;
  color: #2563EB;
}

.status-delivered {
  background: #D1FAE5;
  color: #059669;
}

.status-cancelled {
  background: #FEE2E2;
  color: #DC2626;
}

/* 商品缩略图 */
.product-thumbnails {
  margin-bottom: 20rpx;
}

.thumb-scroll {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.thumb-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: linear-gradient(145deg, #FFF8F3, #FFF4E6);
  flex-shrink: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.thumb-more {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
  color: #6B7280;
  flex-shrink: 0;
}

/* 商品名称列表 */
.product-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx 16rpx;
}

.product-name-item {
  font-size: 24rpx;
  color: #6B7280;
  background: #F9FAFB;
  padding: 6rpx 14rpx;
  border-radius: 8rpx;
  max-width: 200rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-name-more {
  font-size: 24rpx;
  color: #FF6B35;
  font-weight: 500;
}

/* 物流信息 */
.shipment-express {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
}

.express-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 16rpx;
}

.express-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.express-company {
  font-size: 26rpx;
  font-weight: 600;
  color: #1F2937;
}

.express-no {
  font-size: 24rpx;
  color: #6B7280;
  font-family: monospace;
}

.express-copy {
  font-size: 24rpx;
  color: #2563EB;
  font-weight: 500;
  padding: 12rpx 20rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 时间信息 */
.shipment-time {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.time-item {
  font-size: 22rpx;
  color: #9CA3AF;
}

/* ============================================
   盒柜 UX/UI 增强
   ============================================ */

/* 入场动画 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Tab 切换动画 */
.tabs {
  animation: fadeInUp 0.3s ease-out;
}
.tab-item {
  transition: all 0.25s ease;
}
.tab-item:active {
  transform: scale(0.96);
}

/* 库存卡片交错入场 */
.inventory-item:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.1s both; }
.inventory-item:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.15s both; }
.inventory-item:nth-child(3) { animation: fadeInUp 0.4s ease-out 0.2s both; }
.inventory-item:nth-child(4) { animation: fadeInUp 0.4s ease-out 0.25s both; }
.inventory-item:nth-child(n+5) { animation: fadeInUp 0.4s ease-out 0.3s both; }

/* 发货单卡片交错入场 */
.shipment-card:nth-child(1) { animation: fadeInUp 0.4s ease-out 0.1s both; }
.shipment-card:nth-child(2) { animation: fadeInUp 0.4s ease-out 0.15s both; }
.shipment-card:nth-child(3) { animation: fadeInUp 0.4s ease-out 0.2s both; }
.shipment-card:nth-child(n+4) { animation: fadeInUp 0.4s ease-out 0.25s both; }

/* 卡片点击效果 */
.inventory-item {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.inventory-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}

/* 选中时的高亮效果 */
.inventory-item:has(.checkbox.checked) {
  box-shadow: 0 8rpx 32rpx rgba(255, 107, 53, 0.15);
  border: 2rpx solid rgba(255, 159, 67, 0.3);
}

/* 复选框动画 */
.checkbox {
  transition: all 0.2s ease;
}
.checkbox.checked {
  animation: bounceIn 0.3s ease-out;
}

/* 底部操作栏增强 */
.bottom-bar {
  animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  background: rgba(255, 255, 255, 0.95);
}

/* 操作按钮动画 */
.action-btn {
  transition: all 0.2s ease;
}
.action-btn:active {
  transform: scale(0.95);
}
.btn-redeem {
  animation: pulse 2s infinite;
}
.btn-redeem:active {
  animation: none;
}

/* 步进器按钮效果 */
.step-btn {
  transition: all 0.15s ease;
}
.step-btn:active {
  background: #FF9F43 !important;
  color: #fff !important;
  transform: scale(0.9);
}

/* 全选栏入场 */
.action-bar {
  animation: fadeInUp 0.3s ease-out;
}

/* 发货单卡片点击效果 */
.shipment-card {
  transition: all 0.25s ease;
}
.shipment-card:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

/* 复制按钮效果 */
.express-copy {
  transition: all 0.2s ease;
}
.express-copy:active {
  background: #2563EB;
  color: #fff;
  transform: scale(0.95);
}

/* 缩略图图片悬浮效果 */
.thumb-img {
  transition: all 0.2s ease;
}
.thumb-img:active {
  transform: scale(1.05);
}
</style>
