<template>
  <view class="qbt_con_item" @click="toDetails(item)">
    <!-- 商品图片 -->
    <view class="list_1 center" style="background-color: #fff;border-radius: 16rpx 16rpx 0rpx 0rpx;">
      <image :src="item.imgurl" mode="aspectFill"></image>
    </view>

    <!-- 商品信息 -->
    <view class="list_2">
      <view class="hang1">{{ item.title }}</view>

      <!-- 参与次数 -->
      <view class="redu" v-if="item.join_count">
        <text>{{ item.join_count }}次参与</text>
      </view>
      <view class="redu" v-else>快去参与吧！</view>

      <!-- 价格与库存 -->
      <view class="qbt_con_item_3 flex_center" style="margin-top: 24rpx">
        <view class="item-price">
          ￥<text>{{ item.price }}</text>
        </view>
        <view v-if="item.stock" class="qbt_con_item_price">
          <text>{{ item.sale_stock }}/{{ item.stock }}</text>
          <image :src="$img1('index/box.png')" style="width: 20rpx; height: 18rpx"></image>
        </view>
      </view>
    </view>

    <!-- 新品标签 -->
    <image v-if="item.new_is == 1" :src="$img1(tabCurId == 2 ? 'common/new2.png' : 'common/new1.png')" class="image1"
      :style="tabCurId != 2 ? 'animation: zoom 1.2s ease-in-out infinite' : ''" mode="widthFix">
    </image>

    <!-- 类型标签 -->
    <view class="image3 common_bg">
      <text>{{ item.type_text }}</text>
    </view>

    <!-- 折扣标签 -->
    <view v-if="item.is_shou_zhe == 1" class="half-tag">
      <image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GoodsItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    tabCurId: {
      type: Number,
      required: true
    }
  },
  computed: {

  },
  methods: {
    toDetails(item) {
      let url = "/pages/shouye/detail";
      const params = {
        goods_id: item.id,
      };

      // 根据商品类型跳转不同页面
      if (item.type == 2 || item.type == 8 || item.type == 16) {
        url = "/pages/shouye/detail_wuxian";  // 无限赏
      } else if (item.type == 9) {
        url = "/package/index/lian-ji";  // 连击
      } else if (item.type == 3) {
        url = "/package/index/leitai";  // 擂台
      }

      this.$customRouter.navigateTo(url, params);
    }
  }
}
</script>

<style lang="scss" scoped>
.qbt_con_item {
  width: 330rpx;
  height: 505rpx;
  margin-top: 30rpx;
  position: relative;
  background-color: #f8f8f8;
  border-radius: 16rpx;

  // 新品标签
  .image1 {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 10;
    top: 10rpx;
    right: 10rpx;
  }

  // 类型标签
  .image3 {
    position: absolute;
    z-index: 1;
    top: 10rpx;
    left: 10rpx;
    min-width: 68rpx;
    height: 32rpx;
    padding: 0 10rpx;
    line-height: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://image.zfunbox.cn/static/web/static/common/label2.png);

    text {
      font-size: 16rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  // 折扣标签
  .half-tag {
    width: 160rpx;
    height: 60rpx;
    position: absolute;
    left: 0;
    top: 250rpx;
    z-index: 1;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

// 商品图片容器
.list_1 {
  width: 100%;
  height: 332rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  >image {
    width: 100%;
    height: 100%;
  }
}

// 商品信息容器
.list_2 {
  padding: 28rpx 20rpx 0;
  font-size: 20rpx;
  font-weight: 500;
  color: #333333;
}

// 参与次数
.redu {
  margin-top: 24rpx;
  font-size: 18rpx;
  font-weight: 500;
  color: #6C6C6C;

  >image {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
  }
}

// 价格区域
.qbt_con_item_3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .item-price {
    font-size: 16rpx;
    font-weight: 400;
    color: #333333;

    text {
      font-size: 36rpx;
    }
  }
}

// 库存信息
.qbt_con_item_price {
  display: flex;
  align-items: center;
  font-size: 18rpx;
  font-weight: 400;
  color: #6c6c6c;

  image {
    width: 26rpx;
    height: 26rpx;
    margin-left: 6rpx;
  }
}

// 动画效果
@keyframes zoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}
</style>