<template>
  <view class="dec-long-good" :class="className" @tap.stop="go">
    <!-- 图片 角标  -->
    <view class="good-img" :style="{ width: imgW, height: imgW }">
      <image
        mode="widthFix"
        class="img"
        :src="decImgDomain(good.productImg || '')"
      />
      <view class="mark" :class="show.markStyle" v-if="show.mark"></view>
    </view>
    <view class="good-info">
      <view class="good-intro">
        <view class="good-title dec-truncate2 mb" v-if="show.name">
          {{ good.productName }}
        </view>
        <view class="good-desc dec-truncate" v-if="show.desc">
          {{ good.productDesc || good.productName }}
        </view>
      </view>
      <!-- 店铺名称|@tap.stop="goShop" -->
      <view
        v-if="show.shopName && good.shopName"
        class="shop-name dec-truncate"
        >{{ good.shopName || "所属店铺" }}</view
      >
      <!-- 商品佣金 -->
      <view v-if="show.reward && predictReward" class="good-reward"
        >预计返{{ predictReward }}元</view
      >
      <!-- 价格 购买 -->
      <view class="price-wrap dec-row-flex j-between" v-if="hasShop">
        <view
          class="dec-row-flex a-bottom shrink1"
          v-if="show.price || show.origin || show.bug"
        >
          <text class="dot" v-if="show.price">¥</text>
          <text class="sale" v-if="show.price"> {{ good.salePrice || 0 }}</text>
          <text class="origin" v-if="opriceShow"
            >￥{{ good.smarketPrice }}</text
          >
        </view>
        <template v-if="show.bug">
          <view
            class="shrink0 b-buy"
            v-if="show.bugStyle == 'custom'"
            @tap.stop="buy"
          >
            <text>{{ show.bugTxt }}</text>
          </view>
          <view
            class="shrink0 c-buy"
            v-else-if="show.bugStyle == 'custom2'"
            @tap.stop="buy"
          >
            <text>{{ show.bugTxt }}</text>
          </view>
          <view
            class="shrink0 d-buy"
            v-else-if="show.bugStyle == 'shop3'"
            @tap.stop="buy"
          >
            <view class="cart-circle">
              <uni-icons type="cart" :size="18" color="#ffffff" />
              <text v-if="cartNum > 0" class="count">{{ cartNum }}</text>
            </view>
          </view>
          <view class="shrink0 a-buy" v-else @tap.stop="buy">
            <view class="text" v-if="show.bugStyle == 'shop'" @tap.stop="buy">
              <uni-icons
                type="cart-filled"
                :size="imgArg == 'big' ? 40 : 34"
                color="#ff4444"
              />
              <text v-if="cartNum > 0" class="count">{{ cartNum }}</text>
            </view>
            <view
              class="text"
              v-else-if="show.bugStyle == 'shop2'"
              @tap.stop="buy"
            >
              <uni-icons
                type="cart"
                :size="imgArg == 'big' ? 40 : 34"
                color="#ff4444"
              />
              <text v-if="cartNum > 0" class="count">{{ cartNum }}</text>
            </view>
            <view
              class="text"
              v-else-if="show.bugStyle == 'plus'"
              @tap.stop="buy"
            >
              <uni-icons
                type="plus-filled"
                :size="imgArg == 'big' ? 40 : 34"
                color="#ff4444"
              />
              <text v-if="cartNum > 0" class="count">{{ cartNum }}</text>
            </view>
            <view
              class="text"
              v-else-if="show.bugStyle == 'plus2'"
              @tap.stop="buy"
            >
              <uni-icons
                type="plus"
                :size="imgArg == 'big' ? 40 : 34"
                color="#ff4444"
              />
              <text v-if="cartNum > 0" class="count">{{ cartNum }}</text>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  inject: ["decImgDomain", "decAxios"],
  props: {
    moudle: {
      type: String,
      default: "goodList",
    },
    show: {
      type: Object,
      default: () => {
        return {};
      },
    },
    good: {
      type: Object,
      default: () => {
        return {};
      },
    },
    count: {
      type: Number,
      default: 0,
    },
    imgArg: {
      type: String,
      default: "",
    },
    imgW: {
      type: String,
      default: "40%",
    },
  },
  data() {
    return {
      cartNum: 0,
    };
  },
  watch: {
    count(val, val2) {
      if (val != val2) this.cartNum = val || 0;
    },
  },
  computed: {
    className() {
      let str = [];
      if (this.imgArg) str.push(this.imgArg);
      if (this.show.radius) str.push("radius");
      return str;
    },
    hasShop() {
      const hasShop = this.show.price || this.show.origin || this.show.bug;
      return hasShop;
    },
    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;
    },
  },
  created() {
    this.cartNum = this.count || 0;
  },
  methods: {
    go() {
      this.decAxios.decEventHandler(
        {
          moudle: this.moudle,
          type: "detail",
          desc: "跳商品详情页",
        },
        this.good,
        null
      );
    },
    buy() {
      const that = this;
      this.decAxios.decEventHandler(
        {
          moudle: this.moudle,
          type: "buy",
          desc: "购买商品",
        },
        this.good,
        (obj) => {
          that.cartNum = obj[that.good.id] || 0;
          that.$emit("refreshBuyNum", obj);
        }
      );
    },
    goShop() {
      this.decAxios.decEventHandler(
        {
          moudle: this.moudle,
          type: "shop",
          desc: "跳所属店铺",
        },
        this.good,
        null
      );
    },
  },
};
</script>
