<!-- 页面  -->
<template>
  <view class="list-goods-card ss-flex-col" @tap="onClick">
    <view class="md-img-box">
      <image class="goods-img md-img-box" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
    </view>
    <view class="md-goods-content ss-flex-col ss-row-around">
      <view class="md-goods-title ss-line-2 ss-m-x-20 ss-m-t-6 ss-m-b-16">{{ title }}</view>
      <view class="md-goods-subtitle ss-line-1 ss-p-y-10 ss-p-20">至高90%积分抵扣</view>
      <view class="ss-flex ss-col-center ss-row-between ss-m-b-16 ss-m-x-20">
        <view class="md-goods-price text-price">{{ price }}</view>
        <view class="goods-origin-price text-price">{{ originPrice }}</view>
        <view class="sales-text">{{ maxScoreText }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';

  const props = defineProps({
    img: {
      type: String,
      default: '',
    },
    subTitle: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    price: {
      type: [String, Number],
      default: '',
    },
    originPrice: {
      type: [String, Number],
      default: '',
    },
    sales: {
      type: [String, Number],
      default: '',
    },
  });

  // 计算最高可使用积分
  const maxScoreText = computed(() => {
    if (props.price && !isNaN(props.price)) {
      const maxScore = (parseFloat(props.price) * 0.9).toFixed(3);
      return `最高可使用${maxScore}积分`;
    }
    return '最高可使用0积分';
  });

  const emits = defineEmits(['click']);
  const onClick = () => {
    emits('click');
  };
</script>

<style lang="scss" scoped>
  .goods-img {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
  }

  .sales-text {
    display: inline-block;
    font-size: 20rpx;
    background: #FF3000;
    color: #ffffff;
    border-radius: 8rpx;
    padding: 4rpx 12rpx;
  }

  .goods-origin-price {
    font-size: 20rpx;
    color: #c4c4c4;
    text-decoration: line-through;
  }

  .list-goods-card {
    overflow: hidden;
    width: 344rpx;
    position: relative;
    z-index: 1;
    background-color: $white;
    box-shadow: 0 0 20rpx 4rpx rgba(199, 199, 199, 0.22);
    border-radius: 20rpx;

    .md-img-box {
      width: 344rpx;
      height: 344rpx;
    }

    .md-goods-title {
      font-size: 26rpx;
      color: #333;
    }
    .md-goods-subtitle {
      font-size: 20rpx;
      font-weight: 400;
      color: #FF3000 !important;
      background: #ffffff;
      border: 1px solid #FF3000;
      border-radius: 8rpx;
      padding: 4rpx 12rpx;
      display: inline-block;
    }

    .md-goods-price {
      font-size: 30rpx;
      color: $red;
    }
  }
</style>
