<template>
  <view class="container">
    <view class="title">商品列表示例</view>
    
    <!-- 网格布局的列表 -->
    <view class="grid-list">
      <detail-list-item 
        v-for="(item, index) in productList" 
        :key="item.id || index"
        :item="item"
        @click="onItemClick"
      />
    </view>
    
    <!-- 点击信息展示 -->
    <view class="click-info" v-if="selectedItem">
      <view class="info-title">您点击了：</view>
      <view class="info-content">{{ selectedItem.title }}</view>
    </view>
  </view>
</template>

<script>
import DetailListItem from './detail-list-item.vue';

export default {
  components: {
    DetailListItem
  },
  
  data() {
    return {
      selectedItem: null,
      productList: [
        {
          id: '1',
          imgurl: '/static/img/product1.jpg',
          title: '限定款手办',
          pro: '中奖概率 10%',
          price: '299.00',
          surplus_stock: 10,
          stock: 100,
          shang_info: {
            title: 'SSR',
            color: '#FF5722'
          }
        },
        {
          id: '2',
          imgurl: '/static/img/product2.jpg',
          title: '精美钥匙扣',
          pro: '中奖概率 30%',
          price: '39.00',
          surplus_stock: 50,
          stock: 200,
          shang_info: {
            title: 'SR',
            color: '#9C27B0'
          }
        },
        {
          id: '3',
          imgurl: '/static/img/product3.jpg',
          title: '主题明信片',
          pro: '中奖概率 60%',
          price: '12.00',
          surplus_stock: 0,
          stock: 300,
          shang_info: {
            title: 'R',
            color: '#2196F3'
          }
        }
      ]
    };
  },
  
  methods: {
    // 处理商品点击事件
    onItemClick(item) {
      console.log('点击了商品:', item);
      this.selectedItem = item;
      
      // 在实际应用中，这里可以弹出详情框或导航到详情页
      uni.showToast({
        title: `已选择: ${item.title}`,
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  justify-items: center;
}

.click-info {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  
  .info-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .info-content {
    font-size: 24rpx;
    color: #333;
  }
}
</style> 