<template>
  <view class="container">
    <!-- <view class="header">
      <view class="title-container">
        <text class="title">商品管理</text>
        <text class="subtitle">{{ locationCode }}</text>
      </view>
    </view> -->
    
    <!-- 日期选择器 -->
    <view class="date-picker-bar">
      <picker mode="date" :value="dateInput" @change="onDatePickerConfirm">
        <view class="date-left">
          <text class="date-day">{{displayDate.day}}</text>
          <view class="date-info">
            <text>{{displayDate.day}} 日 - {{displayDate.month}} 月 - {{displayDate.year}} 年</text>
            <text class="date-arrow">▼</text>
          </view>
        </view>
      </picker>
      <text class="date-total">累计 {{ total }} 条</text>
    </view>
    
    <!-- 批量操作按钮 -->
    <view class="batch-action-bar">
      <view class="batch-btn" @click="toggleBatchMode">
        <text>{{ isBatchMode ? '取消选择' : '批量修改' }}</text>
      </view>
      <view class="action-btns" v-if="isBatchMode"> 
        <view class="action-btn" :class="{ 'disabled': selectedItems.length === 0 }" @click="batchDelete">
          <text>删除</text>
        </view>
        <view class="action-btn" :class="{ 'disabled': selectedItems.length === 0 }" @click="batchEdit">
          <text>修改</text>
        </view>
        <view class="select-all-btn" @click="toggleSelectAll">
          <text>{{ isAllSelected ? '取消全选' : '全选' }}</text>
        </view>
      </view>
      <view v-if="isBatchMode" class="selected-count">
        <text>已选择: {{ selectedItems.length }}</text>
      </view>
    </view>
    
    <!-- 搜索框 -->
    <!-- <view class="search-box">
      <view class="search-input-wrap">
        <u-icon name="search" size="40rpx" color="#999"></u-icon>
        <input class="search-input" v-model="searchKeyword" placeholder="搜索商品名称" @confirm="searchGoods" />
      </view>
      <button class="search-btn" @click="searchGoods">搜索</button>
    </view> -->
    
    <!-- 加载中提示 -->
    <view class="loading-state" v-if="loading">
      <text>正在加载...</text>
    </view>
    
    <!-- 图片网格 -->
    <scroll-view
      scroll-y
      style="height: calc(100vh - 300rpx)"
      @scrolltolower="loadMore"
    >
      <view class="image-grid">
        <view class="image-item" v-for="(goods, index) in goodsList" :key="index"
          @click="isBatchMode ? selectItem(goods.id) : previewImage(goods.images)">
          <!-- 选择框 -->
          <view v-if="isBatchMode" class="select-box" @click.stop="selectItem(goods.id)">
            <view class="select-circle" :class="{ 'selected': isItemSelected(goods.id) }">
              <view v-if="isItemSelected(goods.id)" class="check-mark"></view>
            </view>
          </view>
          <image :src="goods.image || '/static/default-book.png'" mode="aspectFill" class="book-image" @error="handleImageError"></image> 
          <view class="image-info">
            <text class="book-name">{{goods.name}}</text>
            <view class="book-details">
              <text class="book-isbn">ISBN: {{goods.barcode || '无ISBN'}}</text>
            </view>
            <view class="book-details">
              <text class="book-condition">品相: {{goods.condition || '未知'}}</text>
              <text class="upload-time">{{goods.createTime || ''}}</text>
            </view>
            <view class="book-details">
              <text v-if="goods.inventory !== undefined" class="book-stock">库存: {{goods.inventory}}</text>
              <text class="book-price">{{formatPrice(goods.price)}}元</text>
            </view>
<!--             
            <view class="book-details">
              <text class="book-condition">拼多多:</text>
              <text class="status-value" :class="goods.pddPublishedStatus === 1 ? 'published' : 'unpublished'">
                {{goods.pddPublishedStatus === 1 ? '已发布' : '未发布'}}
              </text>
            </view>
            <view class="book-details">
              <text class="book-condition">孔夫子:</text>
              <text class="status-value" :class="goods.kfzPublishedStatus === 1 ? 'published' : 'unpublished'">
                {{goods.kfzPublishedStatus === 1 ? '已发布' : '未发布'}}
              </text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="loading-more" v-if="isLoadingMore">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-if="!hasMore && goodsList.length > 0">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>

    <!-- 货区选择弹窗 -->
    <view v-if="showLocationModal" class="modal-mask">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择目标货区</text>
          <text class="modal-close" @click="closeLocationModal">×</text>
        </view>
        <view class="modal-body">
          <!-- 一级货区选择 -->
          <view class="location-select-item">
            <text class="location-label">一级货区</text>
            <view class="location-picker-wrap">
              <picker @change="onWarehouseChange" :range="warehouseList" range-key="name">
                <view class="picker-text">
                  <text v-if="selectedWarehouse">{{getWarehouseName(selectedWarehouse)}}</text>
                  <text v-else>请选择一级货区</text>
                  <text class="picker-arrow">▼</text>
                </view>
              </picker>
              <view v-if="warehouseLoading" class="loading-indicator">加载中...</view>
            </view>
          </view>

          <!-- 二级货架选择 -->
          <view class="location-select-item">
            <text class="location-label">二级货架</text>
            <view class="location-picker-wrap">
              <picker @change="onShelfChange" :range="shelfList" range-key="name" :disabled="!selectedWarehouse">
                <view class="picker-text" :class="{'disabled': !selectedWarehouse}">
                  <text v-if="selectedShelf">{{getShelfName(selectedShelf)}}</text>
                  <text v-else>{{selectedWarehouse ? '请选择二级货架' : '请先选择一级货区'}}</text>
                  <text class="picker-arrow">▼</text>
                </view>
              </picker>
              <view v-if="shelfLoading" class="loading-indicator">加载中...</view>
            </view>
          </view>

          <!-- 三级货架选择 -->
          <view class="location-select-item">
            <text class="location-label">三级货架</text>
            <view class="location-picker-wrap">
              <picker @change="onFreightChange" :range="freightList" range-key="name" :disabled="!selectedShelf">
                <view class="picker-text" :class="{'disabled': !selectedShelf}">
                  <text v-if="selectedFreight">{{getFreightName(selectedFreight)}}</text>
                  <text v-else>{{selectedShelf ? '请选择三级货架' : '请先选择二级货架'}}</text>
                  <text class="picker-arrow">▼</text>
                </view>
              </picker>
              <view v-if="freightLoading" class="loading-indicator">加载中...</view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel-btn" @click="closeLocationModal">取消</view>
          <view class="modal-btn confirm-btn" @click="confirmMoveItems">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/utils/config.js';

export default {
  data() {
    return {
      locationCode: '', // 货区代码
      goodsList: [], // 商品列表
      loading: true,
      isLoadingMore: false, // 加载更多状态
      userId: '', // 用户ID
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页数量
      hasMore: true, // 是否有更多数据
      totalPages: 1, // 总页数
      searchKeyword: '', // 搜索关键词
      originalData: [], // 保存原始数据用于搜索
      dateInput: '', // 日期输入
      displayDate: {
        day: new Date().getDate().toString().padStart(2, '0'),
        month: (new Date().getMonth() + 1).toString().padStart(2, '0'),
        year: new Date().getFullYear()
      },
      total: 0, // 数据总条数
      isBatchMode: false, // 批量选择模式
      selectedItems: [], // 已选择的商品ID
      isAllSelected: false, // 是否全选
      
      // 货区选择弹窗相关
      showLocationModal: false, // 是否显示货区选择弹窗
      // 货区数据
      warehouseList: [], // 一级货区列表
      shelfList: [], // 二级货区列表
      freightList: [], // 三级货区列表
      selectedWarehouse: '', // 选中的一级货区ID
      selectedShelf: '', // 选中的二级货区ID
      selectedFreight: '', // 选中的三级货区ID
      warehouseLoading: false, // 一级货区加载状态
      shelfLoading: false, // 二级货区加载状态
      freightLoading: false // 三级货区加载状态
    }
  },
  onLoad(option) {
    // 从路由参数获取货区代码
    if (option.code) {
      this.locationCode = option.code;
      console.log('接收到的货区代码:', this.locationCode);
    }
    
    // 从本地存储获取用户ID
    this.userId = uni.getStorageSync('userId');
    
    // 加载商品数据
    this.fetchGoodsData();
  },
  // 添加下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1;
    this.hasMore = true;
    this.fetchGoodsData().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    // 切换批量选择模式
    toggleBatchMode() {
      this.isBatchMode = !this.isBatchMode;
      if (!this.isBatchMode) {
        // 退出批量模式时清空选择
        this.selectedItems = [];
        this.isAllSelected = false;
      }
    },
    
    // 选择/取消选择商品
    selectItem(itemId) {
      const index = this.selectedItems.indexOf(itemId);
      if (index === -1) {
        // 添加到选中列表
        this.selectedItems.push(itemId);
      } else {
        // 从选中列表移除
        this.selectedItems.splice(index, 1);
      }
      // 更新全选状态
      this.isAllSelected = this.selectedItems.length === this.goodsList.length;
      
      // 打印选中的商品ID
      console.log('当前选中的商品IDs:', this.selectedItems);
    },
    
    // 判断商品是否被选中
    isItemSelected(itemId) {
      return this.selectedItems.indexOf(itemId) !== -1;
    },
    
    // 切换全选/取消全选
    toggleSelectAll() {
      if (this.isAllSelected) {
        // 取消全选
        this.selectedItems = [];
      } else {
        // 全选
        this.selectedItems = this.goodsList.map(item => item.id);
      }
      this.isAllSelected = !this.isAllSelected;
      
      // 打印选中的商品ID
      console.log('全选/取消全选后的商品IDs:', this.selectedItems);
    },
    
    // 批量删除
    batchDelete() {
      if (this.selectedItems.length === 0) {
        return;
      }
      
      uni.showModal({
        title: '确认删除',
        content: `确定要删除选中的${this.selectedItems.length}个商品吗？`,
        success: (res) => {
          if (res.confirm) {
            // 执行删除操作
            console.log('执行批量删除:', this.selectedItems);
            // TODO: 调用批量删除API
            uni.showToast({
              title: '删除操作待实现',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 批量编辑
    batchEdit() {
      if (this.selectedItems.length === 0) {
        return;
      }
      
      // 加载一级货区数据
      this.fetchWarehouses();
      // 显示货区选择弹窗
      this.showLocationModal = true;
    },
    
    // 获取一级货区列表
    async fetchWarehouses() {
      try {
        this.warehouseLoading = true;
        this.warehouseList = [];
        this.shelfList = [];
        this.freightList = [];
        this.selectedWarehouse = '';
        this.selectedShelf = '';
        this.selectedFreight = '';
        
        const [err, response] = await uni.request({
          url: 'https://api.buzhiyushu.cn/shelves/shelves/namelist',
          method: 'GET',
          data: {
            phoneNumber: uni.getStorageSync('phoneNumber')
          }
        });
        
        this.warehouseLoading = false;
        
        if (err) {
          console.error('获取一级货区列表失败:', err);
          uni.showToast({
            title: '获取一级货区列表失败',
            icon: 'none'
          });
          return;
        }
        
        if (response.statusCode === 200 && response.data && response.data.rows) {
          this.warehouseList = response.data.rows;
          console.log('一级货区列表:', this.warehouseList);
        } else {
          uni.showToast({
            title: '暂无可用一级货区',
            icon: 'none'
          });
        }
      } catch (error) {
        this.warehouseLoading = false;
        console.error('获取一级货区列表异常:', error);
        uni.showToast({
          title: '获取一级货区列表失败',
          icon: 'none'
        });
      }
    },
    
    // 获取二级货架数据
    async fetchShelves(depotId) {
      if (!depotId) {
        this.shelfList = [];
        this.freightList = [];
        this.selectedShelf = '';
        this.selectedFreight = '';
        return;
      }
      
      try {
        this.shelfLoading = true;
        this.shelfList = [];
        this.freightList = [];
        this.selectedShelf = '';
        this.selectedFreight = '';
        
        const [err, response] = await uni.request({
          url: 'https://api.buzhiyushu.cn/shelves/shelves/sheNamelist',
          method: 'GET',
          data: {
            depotId: depotId
          }
        });
        
        this.shelfLoading = false;
        
        if (err) {
          console.error('获取二级货架失败:', err);
          uni.showToast({
            title: '获取二级货架失败',
            icon: 'none'
          });
          return;
        }
        
        if (response.statusCode === 200 && response.data && response.data.rows) {
          this.shelfList = response.data.rows;
          console.log('二级货架列表:', this.shelfList);
        } else {
          uni.showToast({
            title: '暂无二级货架',
            icon: 'none'
          });
        }
      } catch (error) {
        this.shelfLoading = false;
        console.error('获取二级货架失败:', error);
        uni.showToast({
          title: '获取二级货架失败',
          icon: 'none'
        });
      }
    },
    
    // 获取三级货架数据
    async fetchFreights(sheId) {
      if (!sheId) {
        this.freightList = [];
        this.selectedFreight = '';
        return;
      }
      
      try {
        this.freightLoading = true;
        this.freightList = [];
        this.selectedFreight = '';
        
        const [err, response] = await uni.request({
          url: 'https://api.buzhiyushu.cn/shelves/shelves/freNamelist',
          method: 'GET',
          data: {
            sheId: sheId
          }
        });
        
        this.freightLoading = false;
        
        if (err) {
          console.error('获取三级货架失败:', err);
          uni.showToast({
            title: '获取三级货架失败',
            icon: 'none'
          });
          return;
        }
        
        if (response.statusCode === 200 && response.data && response.data.rows) {
          this.freightList = response.data.rows;
          console.log('三级货架列表:', this.freightList);
        } else {
          uni.showToast({
            title: '暂无三级货架',
            icon: 'none'
          });
        }
      } catch (error) {
        this.freightLoading = false;
        console.error('获取三级货架失败:', error);
        uni.showToast({
          title: '获取三级货架失败',
          icon: 'none'
        });
      }
    },
    
    // 一级货区选择改变
    onWarehouseChange(e) {
      const index = e.detail.value;
      if (index >= 0 && this.warehouseList[index]) {
        this.selectedWarehouse = this.warehouseList[index].id;
        this.fetchShelves(this.selectedWarehouse);
      } else {
        this.selectedWarehouse = '';
        this.shelfList = [];
        this.freightList = [];
      }
    },
    
    // 二级货架选择改变
    onShelfChange(e) {
      const index = e.detail.value;
      if (index >= 0 && this.shelfList[index]) {
        this.selectedShelf = this.shelfList[index].id;
        this.fetchFreights(this.selectedShelf);
      } else {
        this.selectedShelf = '';
        this.freightList = [];
      }
    },
    
    // 三级货架选择改变
    onFreightChange(e) {
      const index = e.detail.value;
      if (index >= 0 && this.freightList[index]) {
        this.selectedFreight = this.freightList[index].id;
      } else {
        this.selectedFreight = '';
      }
    },
    
    // 关闭货区选择弹窗
    closeLocationModal() {
      this.showLocationModal = false;
    },
    
    // 确认移动商品到新货区
    async confirmMoveItems() {
      if (!this.selectedWarehouse || !this.selectedShelf || !this.selectedFreight) {
        uni.showToast({
          title: '请选择完整的货区路径',
          icon: 'none'
        });
        return;
      }
      
      // 获取选中的一级、二级、三级货区对象
      const warehouse = this.warehouseList.find(item => item.id === this.selectedWarehouse);
      const shelf = this.shelfList.find(item => item.id === this.selectedShelf);
      const freight = this.freightList.find(item => item.id === this.selectedFreight);
      
      if (!warehouse || !shelf || !freight) {
        uni.showToast({
          title: '获取货区信息失败',
          icon: 'none'
        });
        return;
      }
      
      // 构建新的货区代码
      const newLocationCode = `${warehouse.code || ''}${shelf.code || ''}${freight.code || ''}`;
      console.log('新的货区代码:', newLocationCode);
      
      // 打印将要移动的商品IDs
      console.log('即将移动的商品IDs:', this.selectedItems);
      
      // 确认对话框
      uni.showModal({
        title: '确认移动',
        content: `确定要将选中的${this.selectedItems.length}个商品移动到 ${warehouse.name}-${shelf.name}-${freight.name} 吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: '移动中...'
              });
              
              // 调用批量移动API
              const [err, response] = await uni.request({
                url: 'https://api.buzhiyushu.cn/zhishu/shopGoods/batchMoveItems',
                method: 'POST',
                header: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: {
                  itemIds: this.selectedItems.join(','),
                  warehouse: warehouse.code || '',
                  shelf: shelf.code || '',
                  freight: freight.code || '',
                  userId: this.userId
                }
              });
              
              uni.hideLoading();
              
              if (err) {
                console.error('API调用失败:', err);
                uni.showToast({
                  title: 'API调用失败: ' + (err.errMsg || '网络错误'),
                  icon: 'none',
                  duration: 3000
                });
                return;
              }
              
              if (response.statusCode === 200) {
                // API调用成功
                console.log('API响应:', response.data);
                
                // 关闭弹窗
                this.showLocationModal = false;
                
                // 退出批量模式
                this.isBatchMode = false;
                this.selectedItems = [];
                
                // 刷新数据
                this.pageNum = 1;
                this.fetchGoodsData();
                
                uni.showToast({
                  title: '移动成功',
                  icon: 'success'
                });
              } else {
                console.error('API返回错误状态码:', response.statusCode, response.data);
                uni.showToast({
                  title: 'API调用失败: ' + (response.data?.message || '服务器错误'),
                  icon: 'none',
                  duration: 3000
                });
              }
            } catch (error) {
              uni.hideLoading();
              console.error('批量移动商品失败:', error);
              uni.showToast({
                title: '批量移动失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 日期选择器确认事件
    onDatePickerConfirm(e) {
      this.dateInput = e.detail.value;
      console.log("获取日期", this.dateInput);
      const [year, month, day] = this.dateInput.split('-');
      this.displayDate = { day, month, year };
      
      // 重置分页
      this.pageNum = 1;
      this.hasMore = true;
      
      // 重新加载数据
      this.fetchGoodsData();
    },
    
    // 重置日期筛选
    resetDateFilter() {
      const now = new Date();
      this.displayDate = {
        day: now.getDate().toString().padStart(2, '0'),
        month: (now.getMonth() + 1).toString().padStart(2, '0'),
        year: now.getFullYear()
      };
      this.dateInput = '';
      
      // 重置分页
      this.pageNum = 1;
      this.hasMore = true;
      
      // 重新加载数据
      this.fetchGoodsData();
    },
    
    // 获取商品数据
    async fetchGoodsData() {
      if (!this.locationCode || !this.userId) {
        uni.showToast({
          title: '参数不完整',
          icon: 'none'
        });
        this.loading = false;
        return;
      }
      
      if (this.pageNum === 1) {
        this.loading = true;
      } else {
        this.isLoadingMore = true;
      }
      
      try {
        const [err, res] = await uni.request({
          // url: `${config.baseURL}/zhishu/shopGoods/getGoodsData`,
		  url: 'https://api.buzhiyushu.cn/zhishu/shopGoods/getGoodsData',
          method: 'GET',
          header: {
            'Content-Type': 'application/json',
            'cientid': config.clientId,
            'isToken': 'false',
            'isEncrypt': 'false',
            'repeatSubmit': 'false'
          },
          data: {
            code: this.locationCode,
            userId: this.userId,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            date: this.dateInput // 添加日期参数
          }
        });
        
        this.loading = false;
        this.isLoadingMore = false;
        
        if (err) {
          console.error('获取商品数据失败:', err);
          uni.showToast({
            title: '获取商品数据失败',
            icon: 'none'
          });
          return;
        }
        
        console.log('商品数据响应:', res);
        
        // 检查响应数据结构
        if (res.statusCode === 200 && res.data) {
          // 获取商品数据列表，适应不同的数据结构
          let goodsList = [];
          let total = 0;
          
          // 根据实际响应格式获取数据
          // data.data.rows结构 (根据实际响应格式)
          if (res.data.data && res.data.data.rows && Array.isArray(res.data.data.rows)) {
            goodsList = res.data.data.rows;
            total = res.data.data.total || goodsList.length;
          }
          // 检查res.data.data是否存在且是数组
          else if (res.data.data && Array.isArray(res.data.data)) {
            goodsList = res.data.data;
            total = res.data.total || goodsList.length;
          } 
          // 检查res.data.rows是否存在且是数组
          else if (res.data.rows && Array.isArray(res.data.rows)) {
            goodsList = res.data.rows;
            total = res.data.total || goodsList.length;
          }
          // 检查res.data本身是否为数组
          else if (Array.isArray(res.data)) {
            goodsList = res.data;
            total = goodsList.length;
          }
          // 其他可能的数据结构
          else if (typeof res.data === 'object') {
            // 尝试找到可能的数据数组
            for (const key in res.data) {
              if (Array.isArray(res.data[key])) {
                goodsList = res.data[key];
                break;
              }
            }
            total = goodsList.length;
          }
          
          console.log('提取的商品列表:', goodsList);
          console.log('总数:', total);
          
          if (goodsList.length > 0) {
            // 处理商品数据，添加必要的字段
            const formattedGoods = goodsList.map(item => {
              return {
                ...item,
                image: item.image || item.bookPic || '/static/default-book.png',
                images: item.bookPic ? [item.bookPic] : [item.image || '/static/default-book.png'],
                name: item.goodsName || item.bookName || item.name || '未知商品',
                barcode: item.isbn || item.barcode || '无ISBN',
                createTime: item.createTime ? item.createTime.substring(0, 10) : '',
                price: item.price || 0,
                inventory: item.inventory || item.stock || 0,
                condition: this.formatCondition(item.conditionCode) || item.condition || item.qualityText || '未知',
                pddPublishedStatus: item.pddPublishedStatus || 0,
                kfzPublishedStatus: item.kfzPublishedStatus || 0
              };
            });
            
            if (this.pageNum === 1) {
              this.goodsList = formattedGoods;
            } else {
              this.goodsList = [...this.goodsList, ...formattedGoods];
            }
            
            this.originalData = [...this.goodsList]; // 保存原始数据
            
            // 计算总页数和是否有更多数据
            this.total = total; // 更新总数
            this.totalPages = Math.ceil(total / this.pageSize);
            this.hasMore = this.goodsList.length < total;
            
            // 清空选择
            if (this.isBatchMode) {
              this.selectedItems = [];
              this.isAllSelected = false;
            }
          } else {
            if (this.pageNum === 1) {
              this.goodsList = [];
              this.originalData = [];
            }
            this.totalPages = 1;
            this.total = 0;
            this.hasMore = false;
            console.log('未找到商品数据');
          }
        } else {
          if (this.pageNum === 1) {
            this.goodsList = [];
            this.originalData = [];
          }
          this.totalPages = 1;
          this.total = 0;
          this.hasMore = false;
          console.log('接口返回错误状态码或数据格式不正确:', res.statusCode);
          
          // 显示错误信息
          uni.showToast({
            title: '获取数据失败: ' + (res.data && res.data.message ? res.data.message : '未知错误'),
            icon: 'none'
          });
        }
      } catch (error) {
        this.loading = false;
        this.isLoadingMore = false;
        console.error('获取商品数据异常:', error);
        
        // 在控制台打印更详细的错误信息
        if (error && error.stack) {
          console.error('错误堆栈:', error.stack);
        }
        
        uni.showToast({
          title: '获取商品数据失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      }
    },
    
    // 加载更多数据
    loadMore() {
      if (!this.hasMore || this.loading || this.isLoadingMore) return;
      
      this.pageNum++;
      this.fetchGoodsData();
    },
    
    // 格式化价格
    formatPrice(price) {
      if (!price && price !== 0) return '0.00';
      // 价格可能是以分为单位存储的，需要转换为元
      const priceInYuan = parseFloat(price) / 100;
      return priceInYuan.toFixed(2);
    },
    
    // 处理图片加载错误
    handleImageError(e) {
      // 使用默认图片替代
      e.target.src = '/static/default-book.png';
    },
    
    // 将品相代码转换为对应的文本
    formatCondition(conditionCode) {
      if (!conditionCode) return '未知品相';
      
      switch(conditionCode) {
        case 'A': return '一品';
        case 'B': return '二品';
        case 'C': return '三品';
        case 'D': return '四品';
        case 'E': return '五品';
        case 'F': return '六品';
        case 'G': return '六五品';
        case 'H': return '七品';
        case 'I': return '七五品';
        case 'J': return '八品';
        case 'K': return '八五品';
        case 'L': return '九品';
        case 'M': return '九五品';
        case 'N': return '全新';
        default: return conditionCode;
      }
    },
    
    // 预览图片
    previewImage(images) {
      if (!images || !images.length) return;
      
      // 显示图片预览
      uni.previewImage({
        urls: images,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮')
          },
          fail: function(err) {
            console.log(err.errMsg)
          }
        }
      })
    },
    
    // 搜索商品
    searchGoods() {
      if (!this.searchKeyword.trim()) {
        // 如果搜索关键词为空，恢复原始数据
        this.goodsList = [...this.originalData];
        return;
      }
      
      // 在原始数据中过滤符合条件的商品
      const keyword = this.searchKeyword.toLowerCase();
      this.goodsList = this.originalData.filter(goods => {
        return (
          (goods.name && goods.name.toLowerCase().includes(keyword)) ||
          (goods.barcode && goods.barcode.toLowerCase().includes(keyword))
        );
      });
    },
    
    // 获取一级货区名称
    getWarehouseName(id) {
      if (!id) return '请选择';
      const item = this.warehouseList.find(item => item.id === id);
      return item ? item.name : '请选择';
    },
    
    // 获取二级货架名称
    getShelfName(id) {
      if (!id) return '请选择';
      const item = this.shelfList.find(item => item.id === id);
      return item ? item.name : '请选择';
    },
    
    // 获取三级货架名称
    getFreightName(id) {
      if (!id) return '请选择';
      const item = this.freightList.find(item => item.id === id);
      return item ? item.name : '请选择';
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
}

.title-container {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

/* 日期选择器样式 */
.date-picker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 24rpx 20rpx 0 20rpx;
  margin-bottom: 10rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.date-left {
  display: flex;
  align-items: baseline;
  cursor: pointer;
}

.date-day {
  font-size: 64rpx;
  font-weight: bold;
  color: #222;
  margin-right: 16rpx;
}

.date-info {
  display: flex;
  flex-direction: column;
  font-size: 28rpx;
  color: #666;
}

.date-arrow {
  font-size: 24rpx;
  color: #bbb;
  margin-left: 8rpx;
}

.date-total {
  font-size: 28rpx;
  color: #007AFF;
  font-weight: bold;
}

/* 批量操作栏样式 */
.batch-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.batch-btn {
  padding: 8rpx 20rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.action-btns {
  display: flex;
  align-items: center;
}

.action-btn {
  padding: 8rpx 20rpx;
  margin-right: 10rpx;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.action-btn:last-child {
  margin-right: 0;
}

.action-btn.disabled {
  background-color: #ccc;
  color: #fff;
  pointer-events: none;
}

.select-all-btn {
  padding: 8rpx 20rpx;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.selected-count {
  font-size: 24rpx;
  color: #666;
}

/* 选择框样式 */
.select-box {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  z-index: 2;
}

.select-circle {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-circle.selected {
  border-color: #007AFF;
  background-color: #007AFF;
}

.check-mark {
  width: 20rpx;
  height: 10rpx;
  border-left: 2rpx solid #fff;
  border-bottom: 2rpx solid #fff;
  transform: rotate(-45deg);
}

.search-box {
  display: flex;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  padding-left: 20rpx;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  text-align: center;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
  padding: 0;
}

/* 加载状态样式 */
.loading-state {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
}

/* 图片网格样式 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 12rpx;
}

.image-item {
  width: 100%;
  margin-bottom: 12rpx;
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.08);
  display: flex;
  position: relative; /* 添加相对定位 */
  padding-left: 10rpx; /* 为选择框留出空间 */
}

.image-item:nth-child(2n) {
  margin-right: 0;
}

.book-image {
  width: 180rpx;
  height: 180rpx;
  object-fit: cover;
  flex-shrink: 0; /* 防止图片被压缩 */
}

.image-info {
  padding: 10rpx 12rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0; /* 确保flex子元素可以正确缩小 */
  overflow: hidden; /* 防止内容溢出 */
}

.book-name {
  font-size: 24rpx;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  margin-bottom: 4rpx;
  width: 100%; /* 确保宽度占满父容器 */
}

.book-details {
  display: flex;
  justify-content: space-between;
  margin-top: 3rpx;
}

.book-isbn, .book-price, .book-condition, .upload-time, .book-artno {
  font-size: 20rpx;
  color: #666;
}

.book-price {
  color: #ff6b00;
  font-weight: bold;
}

.book-condition {
  color: #007AFF;
}

.upload-time {
  color: #999;
}

.book-artno, .book-item-number {
  color: #999;
  font-size: 20rpx;
}

.book-stock {
  color: #4CAF50;
  font-size: 20rpx;
  font-weight: bold;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.status-value.published {
  color: #007aff;
  font-size: 24rpx;
}

.status-value.unpublished {
  color: #ff4d4f;
  font-size: 24rpx;
}

/* 添加新样式 */
.loading-more, .no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}

.no-more {
  color: #666;
}

/* 货区选择弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.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 {
  font-size: 40rpx;
  color: #999;
  padding: 0 10rpx;
}

.modal-body {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.modal-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.confirm-btn {
  background-color: #007AFF;
  color: #fff;
}

/* 货区选择样式 */
.location-select-item {
  margin-bottom: 30rpx;
}

.location-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.location-picker-wrap {
  position: relative;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
}

.picker-text {
  width: 100%;
  height: 100%;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
}

.picker-text.disabled {
  color: #999;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

.loading-indicator {
  position: absolute;
  right: 20rpx;
  font-size: 24rpx;
  color: #999;
}
</style>