<template>
  <div class="dec-img-good" :class="className">
    <img
      class="good-img"
      :style="{ height: imgH }"
      :src="decImgDomain(good.productImg)"
    />
    <div class="good-info">
      <div class="good-title dec-truncate2" :class="show.nameStyle">
        {{ good.productName }}
      </div>
      <div class="price-wrap dec-row-flex j-between" v-if="!simple">
        <div class="dec-row-flex a-bottom" v-if="show.price">
          <div class="dot">￥</div>
          <div class="sale">{{ good.salePrice || 0 }}</div>
          <div class="origin" v-if="opriceShow">￥{{ good.smarketPrice }}</div>
        </div>
        <div class="good-reward" v-if="show.reward && predictReward">
          预计返{{ predictReward }}元
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["decImgDomain"],
  props: {
    simple: {
      type: Boolean,
      default: true,
    },
    show: {
      type: Object,
      default: () => {
        return {};
      },
    },
    good: {
      type: Object,
      default: () => {
        return {};
      },
    },
    imgArg: {
      type: String,
      default: "",
    },
    imgH: {
      type: String,
      default: "auto",
    },
  },
  computed: {
    className() {
      let str = [];
      if (this.imgArg) str.push(this.imgArg);
      if (this.show.radius) str.push("radius");
      return str;
    },
    predictReward() {
      let val = this.good.predictReward || 0;
      val = parseInt(val * 100);
      if (val > 0) {
        val = `${val / 100}`;
        const arr = val.split(".");
        if (arr[1]) {
          val = arr[1].length == 1 ? `${arr[0]}.${arr[1]}0` : val;
        } else {
          val = `${val}.00`;
        }
      } else {
        val = "";
      }
      return val;
    },
    opriceShow() {
      if (this.show.origin && this.good.smarketPrice) {
        return this.good.smarketPrice > this.good.salePrice;
      }
      return false;
    },
  },
};
</script>
