<template>
  <view class="res-item" @click="handleItemClick">
    <!-- 图片插槽 -->
    <slot name="image">
      <view class="pic center" :style="{ height: imageHeight }">
        <image :src="item.imgurl" lazy-load mode="aspectFill" :style="{ height: imageHeight }"></image>
        <view class="tag center" v-if="item.shang_info != null"
          :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
          {{ item.shang_info ? item.shang_info.title : "" }}
        </view>
        <view class="num center" v-if="item.stock != null">{{ item.surplus_stock }}/{{ item.stock }}</view>
        <!-- 预售标签 -->
        <view v-if="item.goods_type == 2" class="presale-tag"></view>
        <view v-if="item.doubling != null && item.doubling > 1" class="multiple-tag">x{{
          item.doubling }}</view>
        <view v-if="item.goods_type == 4" class="baoxiang-tag"></view>
        <view v-if="item.is_lingzhu != null && item.is_lingzhu == 1" class="lingzhu-tag"></view>
        <!-- lingzhu -->
        <!-- 售罄遮罩 -->
        <view class="sold-out-mask center" v-if="item.surplus_stock != null && item.surplus_stock <= 0">
          <text>售罄</text>
        </view>
      </view>
    </slot>

    <!-- 内容插槽 -->
    <slot name="content">
      <view class="item-info">
        <view class="item-title hang1">
          <text>{{ item.title }}</text>
        </view>
        <view class="item-probability hang1">
          <text>{{ item.pro }}</text>
        </view>
        <view class="item-price hang1">
          <text>售价：<text style="font-size: 21rpx;">￥</text>{{ item.sc_money }}</text>
        </view>
      </view>
    </slot>
  </view>
</template>

<script>
export default {
  name: 'DetailListItem',

  props: {
    /**
     * 商品数据项
     * @property {string} id - 商品ID
     * @property {string} imgurl - 商品图片地址
     * @property {string} title - 商品标题
     * @property {string} pro - 商品概率
     * @property {string|number} price - 商品价格
     * @property {number} surplus_stock - 剩余库存
     * @property {number} stock - 总库存
     * @property {Object} shang_info - 商品标签信息
     * @property {string} shang_info.title - 标签标题
     * @property {string} shang_info.color - 标签背景色
     */
    item: {
      type: Object,
      required: true,
      default: () => ({})
    },

    /**
     * 图片高度
     * @type {String}
     */
    imageHeight: {
      type: String,
      default: '220rpx'
    }
  },

  methods: {
    /**
     * 处理点击事件
     * 将点击事件与数据项一起传递给父组件
     */
    handleItemClick() {
      this.$emit('click', this.item);
    }
  }
}
</script>

<style lang="scss" scoped>
.res-item {
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  overflow: hidden;

  &:active {
    transform: scale(0.98);
  }

  .pic {
    width: 100%;
    position: relative;
    background: #d8d8d8;
    border-radius: 16rpx 16rpx 0rpx 0rpx;

    >image {
      width: 100%;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
    }

    .num {
      position: absolute;
      z-index: 2;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10rpx;
      min-width: 90rpx;
      height: 28rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      background-color: rgba(255, 255, 255, 0.7);
      border-radius: 18rpx;
      text-align: center;
    }
  }

  .item-info {
    padding: 5rpx 0;
  }

  .item-title {
    padding: 0 2%;
    margin: 1rpx 0;
    width: 100%;
    font-size: 20rpx;
    text-align: left;
    height: 28rpx;
    line-height: 28rpx;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item-probability {
    padding: 0 2%;
    margin: 1rpx 0;
    width: 100%;
    font-size: 20rpx;
    text-align: left;
    height: 28rpx;
    line-height: 28rpx;
    color: #f39205;
  }

  .item-price {
    padding: 0 2%;
    margin: 1rpx 0;
    width: 100%;
    font-size: 20rpx;
    text-align: left;
    height: 28rpx;
    line-height: 28rpx;
    color: #333333;
  }

  // 售罄遮罩
  .sold-out-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16rpx 16rpx 0 0;
    z-index: 10;

    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
  }

  .tag {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5%;
    left: 5%;
    font-weight: 400;
    font-size: 20rpx;
    color: #fff;
    box-sizing: border-box;
    padding: 5rpx 15rpx;
    border-radius: 25rpx;
  }

  .presale-tag {
    position: absolute;
    right: 15rpx;
    top: 15rpx;
    z-index: 5;
    font-weight: 400;
    font-size: 24rpx;
    color: #333;
    border-radius: 30rpx;
    background-image: url($iconurl + "yushou.png");
    background-size: 100% 100%;
    height: 32rpx;
    width: 68rpx;
  }

  .baoxiang-tag {
    position: absolute;
    right: 15rpx;
    top: 15rpx;
    z-index: 5;
    font-weight: 400;
    font-size: 24rpx;
    color: #333;
    border-radius: 30rpx;
    background-image: url($iconurl + "baoxiang.png");
    background-size: 100% 100%;
    height: 32rpx;
    width: 68rpx;
  }

  .lingzhu-tag { 
    position: absolute;
    left: 15rpx;
    top: 15rpx;
    z-index: 5;
    font-weight: 400;
    font-size: 24rpx;
    color: #333;
    border-radius: 30rpx;
    background-image: url($iconurl + "lingzhu.png");
    background-size: 100% 100%;
    height: 32rpx;
    width: 68rpx;
  }

  .multiple-tag {
    position: absolute;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
 
    background: url($iconurl + "fanbei.png") no-repeat;
    background-size: 100% 100%;
    color: #000;
    width: 60rpx;
    height: 48rpx;
    // border-radius: 25rpx;
    top: 15rpx;
    right: 15rpx;
    font-size: 28rpx;
    line-height: 48rpx;
  }

  // 保留兼容旧版本
  .yu-tag {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 32rpx;
    color: #ff873a;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  }
}
</style>