<template>
  <!-- 区分是否是固定高度的还是非固定高度-默认传了图片高度就是要统一高度 -->
  <view class="dec-box-good" :class="className" @tap.stop="go">
    <!-- 图片 角标 dec-row-flex -->
    <view class="good-img" :style="{ height: imgH }">
      <image
        v-if="imgH"
        class="imgH"
        :src="decImgDomain(good.productImg)"
        mode="aspectFit"
      />
      <image
        v-else
        class="imgW"
        :src="decImgDomain(good.productImg)"
        mode="widthFix"
      />
      <view class="mark" :class="show.markStyle" v-if="show.mark"></view>
    </view>
    <!-- 名称 -->
    <view class="good-info" v-if="show.name || show.desc">
      <view class="good-title" :class="titleClass" v-if="show.name">{{
        good.productName
      }}</view>
      <view class="good-desc dec-truncate" v-if="show.desc">
        {{ good.productDesc || good.productName }}
      </view>
    </view>
    <view class="tag-wrap" v-if="show.postType || show.reward">
      <!-- 发货模式tag -->
      <template v-if="postTypeShow">
        <view
          class="post-type dec-truncate"
          :class="{ 'no-text': !good.postType }"
        >
          <template v-if="good.postType">
            {{ postName[good.postType] || "未知" }}
          </template>
        </view>
      </template>
      <!-- tag形式的返佣 -->
      <template v-if="tagRewardShow">
        <view
          class="discount-name dec-truncate"
          :class="{ 'no-text': !predictReward }"
        >
          <template v-if="predictReward">
            <text class="flag">返</text>{{ predictReward }}元
          </template>
        </view>
      </template>
    </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 && imgArg != 'small'">
        <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="imgArg == 'big' ? 22 : 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="cart-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="cart-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="cart-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="cart-count">{{ cartNum }}</text>
          </view>
        </view>
      </template>
    </view>
    <view class="none-h" v-else></view>
    <!-- 返佣设定[佣金设定先用tag形式] -->
    <view class="good-reward dec-truncate" v-if="rewardShow">
      <template v-if="predictReward">预计返¥{{ predictReward }}</template>
    </view>
    <!-- 所属店铺 -->
    <view v-if="shopNameShow" @tap.stop="goShop">
      <view class="shop-name dec-row-flex j-between">
        <view class="text shrink1 dec-truncate">{{
          good.shopName || "所属店铺"
        }}</view>
        <uni-icons
          class="shrink0"
          type="right"
          :size="imgArg == 'big' ? 16 : 14"
          color="#999999"
        />
      </view>
    </view>
    <view class="none-h" v-else-if="imgArg == 'big'"></view>
  </view>
</template>
<script>
export default {
  inject: ["decImgDomain", "decAxios"],
  props: {
    moudle: {
      type: String,
      default: "goodList",
    },
    good: {
      type: Object,
      default: () => {
        return {};
      },
    },
    show: {
      type: Object,
      default: () => {
        return {};
      },
    },
    count: {
      type: Number,
      default: 0,
    },
    imgArg: {
      type: String,
      default: "", // big middle small
    },
    imgH: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      cartNum: 0,
      postName: {
        1: "保税仓",
        2: "香港直邮",
        3: "海外直邮",
      },
    };
  },
  watch: {
    count(val, val2) {
      if (val != val2) this.cartNum = val || 0;
    },
  },
  created() {
    this.cartNum = this.count || 0;
  },
  computed: {
    className() {
      let str = [];
      if (this.imgArg) str.push(this.imgArg);
      if (this.show.radius) str.push("radius");
      return str;
    },
    titleClass() {
      if (!this.imgH || ["one", "big"].includes(this.imgArg)) {
        return "dec-truncate2";
      } else {
        return "dec-truncate";
      }
    },
    hasShop() {
      const hasShop = this.show.price || this.show.origin;
      const hasShop2 = this.show.bug && this.imgArg != "small";
      return hasShop || hasShop2;
    },
    opriceShow() {
      if (this.show.origin && this.good.smarketPrice) {
        return this.good.smarketPrice > this.good.salePrice;
      }
      return false;
    },
    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;
    },
    rewardShow() {
      const flag1 = this.imgArg != "big" && this.show.reward;
      const flag2 = !!this.imgH || !!this.predictReward;
      return flag1 && flag2;
    },
    postTypeShow() {
      const flag1 = this.show.postType;
      const flag2 = !!this.imgH || !!this.good.postType;
      return flag1 && flag2;
    },
    tagRewardShow() {
      const flag1 = this.imgArg == "big" && this.show.reward;
      const flag2 = !!this.imgH || !!this.predictReward;
      return flag1 && flag2;
    },
    shopNameShow() {
      const flag1 = this.show.shopName;
      const flag2 = !!this.imgH || !!this.good.shopName;
      return flag1 && flag2;
    },
  },
  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>
