<template>
   <view class="pro-item-wrapper flex flex-col box-border flex-justify-between" @click="toDetail">
    <view class="img-container">
      <image
        :src="detail?.voucherIcon"
        mode="scaleToFill"
        class="img"
      />
    </view>
    <view class="bottom-container">
      <view class="brand">{{ config[detail.brandFlag].name}}</view>
      <view class="name">{{ detail.voucherTitle }}</view>
      <view class="flex flex-justify-between flex-items-end">
        <view class="price">{{ detail.voucherAmount }}<text>元</text>
        </view>
        <view class="ori">{{ detail.voucherOriginalPrice }}</view>
      </view>
      <view class="btn flex flex-justify-center flex-items-center">
        <view class="btn-content flex flex-justify-center flex-items-center" @click="goBuy">点击购买</view>
      </view>
    </view>
   </view>
</template>

<script setup>
  import { inject } from 'vue';
  import config from '../config'
  const { handleBuy, goDetail } = inject('custom-events')
  const props = defineProps({
    detail:{
      type:Object,
      required: true,
      default:() => ({})
    },
    index:{
      type:Number,
      required:true,
      default:0,
    }
  })
  const goBuy = (e) => {
    if(e.stopPropagation) { //W3C阻止冒泡方法  
        e.stopPropagation();  
    }
    handleBuy(props.detail)
  }
  const toDetail = () => {
    goDetail(props.detail)
  }
</script>

<style lang="scss">
.pro-item-wrapper{
  // width:206rpx;
  width:100%;
  height:370rpx;
  background: url('/static/ycnc/bg-product.png') no-repeat;
  background-size: 100% 100%;
  padding: 6rpx 6rpx 10rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.bottom-container{
  overflow: hidden;
  flex:1;
  padding: 18rpx 8rpx 0;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
}
.brand{
  font-weight: 400;
  font-size: 22rpx;
  color: #887F6E;
}
.img-container{
  width:100%;
  height:150rpx !important;
  box-sizing: border-box;
  border-radius: 18rpx;
  overflow: hidden;
  .img{
    width:100%;
    height: 100%;
  }
}
.name{
  font-weight: 400;
  font-size: 28rpx;
  color: #3B2609;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; 
  margin:10rpx 0 6rpx;
}
.price{
  font-weight: 400;
  font-size: 32rpx;
  color: #F71924;
  text{
    font-size: 18rpx;
  }
}
.ori{
    font-weight: 300;
    font-size: 24rpx;
    color: #888365;
    text-decoration: line-through;
    text{
      font-size: 16rpx;
      // text-decoration: line-through;
    }
  }
.btn{
  width: 166rpx;
  height: 56rpx;
  background: linear-gradient( 180deg, #FFF8EA 0%, #FFD9BC 100%);
  box-shadow: 0rpx 1 2rpx 0rpx #FAD5A8;
  border-radius: 28rpx;
  margin-top:20rpx;
  .btn-content {
    width: 158rpx;
    height: 48rpx;
    background: linear-gradient( 180deg, #FB3E3A 0%, #F01617 100%);
    border-radius: 24rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
  }
}
</style>