<template>
  <view class="detail-container">
    <block v-if="orderItems && orderItems.length > 0">
      <view class="product-item" v-for="item in orderItems" :key="item.id">
        <!-- 商品图片，点击放大 -->
        <image class="product-img" :src="resolveImage(item.mainImage)" mode="aspectFill" @click="previewImage(item.mainImage)"></image>
        
        <view class="product-info">
          <!-- 商品名称 -->
          <view class="product-name">{{ item.productName || '--' }}</view>
          
          <!-- 商品条码 -->
          <view class="product-code">条码：{{ item.productBarCode || '--' }}</view>
          
          <view class="price-row">
            <!-- 商品价格 -->
            <text class="price">¥{{ item.subtotal || item.unitPrice || '0.00' }}</text>
            <!-- 商品件数 -->
            <text class="quantity">x {{ item.quantity || 1 }}</text>
          </view>
        </view>
      </view>
    </block>
    
    <view class="empty-status" v-else>
      <text>暂无商品信息</text>
    </view>
  </view>
</template>

<script>
import config from '@/config';

export default {
  data() {
    return {
      orderItems: []
    };
  },
  onLoad(options) {
    if (options.items) {
      try {
        this.orderItems = JSON.parse(decodeURIComponent(options.items));
      } catch (e) {
        console.error('商品数据解析失败', e);
      }
    }
  },
  methods: {
    // 补全图片路径，防止后台只返回相对路径
    resolveImage(url) {
      if (!url) return '/static/images/default.png';
      if (url.startsWith('http')) return url;
      return config.baseUrl + url;
    },
    
    // 点击图片放大查看
    previewImage(url) {
      if (!url) return;
      
      const fullUrl = this.resolveImage(url);
      uni.previewImage({
        urls: [fullUrl],
        current: fullUrl
      });
    }
  }
};
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 12px;
  box-sizing: border-box;
}

.product-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.product-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background-color: #f0f0f0;
  margin-right: 12px;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-code {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8px;
}

.price {
  font-size: 16px;
  color: #e62318;
  font-weight: bold;
}

.quantity {
  font-size: 13px;
  color: #666;
}

.empty-status {
  padding: 60px 0;
  text-align: center;
  color: #999;
  font-size: 15px;
}
</style>