<template>
  <view class="inline-block shadow shadow-gray-100 rounded-20rpx" @tap.stop="$u.route('/pages/product_details/index', { skuId: data.id })">
    <view class="rounded-t-20rpx h-318rpx w-318rpx overflow-hidden">
      <u-image :src="data.cover" :lazy-load="true" width="100%" height="100%"></u-image>
    </view>
    <view class="flex items-center p-20rpx">
      <view class="flex-1 text-left w-0">
        <view class="line-1">{{data.name}}</view>
        <view>{{price}}</view>
      </view>
      <view>
         <view class="border border-solid border-hex-e0a272 rounded-8rpx h-58rpx leading-58rpx px-20rpx text-hex-e0a272" @click.prevent.stop="onClick">兑换</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props:['data'],
  computed:{
    price(){
      let price = ''
      if(this.data.sell_price > 0) price+=`￥${parseFloat(this.data.sell_price)}`
      if(this.data.sell_price > 0 && this.data.redeem_points > 0) price+='+'
      if(this.data.redeem_points > 0) price+=`${this.data.redeem_points} 积分`
      return price
    }
  },
  methods:{
    onClick(){
      const params = {
        goods: [
          {
            sku_id: this.data.id,
            num: 1,
          },
        ],
        type: 'points'
      };
      this.$u.routeAuth('/pages/confirm_order/confirm_order?data=' + encodeURIComponent(JSON.stringify(params)));
    }
  }
}
</script>
