<template>
  <view class="good">
    <view class="good-radio-box" @click="changeSelectStatus">
      <radio class="good-radio" :checked="value.selected" color="#EC1500" />
      <view class="good-radio-cover" />
    </view>
    <image :src="value.skuImg" lazy-load class="good-img" @click="goDetail" />
    <view class="good-info" @click="goDetail">
      <view class="good-title-wrap">
        <good-title :value="value" />
        <good-tag :value="value.tagList" />
      </view>
      <view class="good-footer" @click.stop="() => {}">
        <text class="good-footer-price">{{ value.salePrice }}</text>
        <good-num
          ref="goodNum"
          :value="count"
          :min="1"
          :item="value"
          :max="maxNum.num"
          disabled-input
          :class="['good-footer-num']"
          @change="changeGoodNum"
          @click.native.stop="stopPropagation"
          @onClickInputBox="clickInputBox"
        />
        <!-- :can-add="value.canAdd" -->
      </view>
    </view>
  </view>
</template>
<script>
import GoodTitle from "./goodTitle.vue";
import GoodTag from "./goodTag.vue";
import GoodNum from "./goodNum.vue";
import { mapActions } from "../shopCartModules";
import { debounce } from "@/utils";
export default {
  name: "GoodItem",
  components: {
    GoodTag,
    GoodTitle,
    GoodNum
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      count: this.value?.count ?? 0,
      canAdd: this.value.canAdd ?? true
    };
  },
  computed: {
    maxNum() {
      const v = this.value;
      let num = 99999999;
      let type = 1; // 1库存，2普通限购，3，每日限购，4活动限购
      if (v) {
        // 库存
        if (v.stock && v.stock > 0) {
          num = Math.min(v.stock + 1, num);
        }
        // 活动限购数量
        if (v.activityCanBuyCount) {
          num = Math.min(v.activityCanBuyCount, num);
          type = 4;
        }
        // 每日限购
        else if (v.commonLimitCount !== undefined) {
          num = Math.min(v.commonLimitCount, num);
          type = 3;
        }
        // 普通限购
        else if (v.limitCount) {
          num = Math.min(v.limitCount, num);
          type = 2;
        }
      }
      return {
        num,
        type
      };
    }
  },
  watch: {
    value: function(val) {
      this.count = val.count;
    }
  },
  methods: {
    ...mapActions({
      selectCartGood: "select_cart_good",
      changeCartGoodNum: "change_cart_good_num"
    }),
    changeSelectStatus() {
      const goodInfo = { ...this.value, selected: !this.value.selected };
      this.selectCartGood({ index: this.index, goodInfo });
    },
    changeGoodNum: debounce(async function(count, type) {
      const goodInfo = { ...this.value, count, skuNum: Math.abs(count - this.value.count) };
      if (!type) return; // 页面初始化的时候
      const result = await this.changeCartGoodNum({ index: this.index, goodInfo, type });
      if (result && !result.canAdd) {
        this.$refs.goodNum && (this.$refs.goodNum.inputValue = this.value.count);
      }
    }, 500),
    clickInputBox() {
      this.$emit("openEditNumDialog", this.index, this.value);
    },
    goDetail() {
      debounce(
        uni.navigateTo({
          url: `/pages/product/goodDetail?skuNo=${this.value.skuId}&count=${
            this.value.count
          }&receiverId=&goodsName=${encodeURIComponent(this.value.skuName)}&goodsImage=${
            this.value.skuImg
          }`
        }),
        300
      );
    },
    stopPropagation(e) {
      e.stopPropagation();
    }
  }
};
</script>
<style lang="scss">
.good {
  display: flex;
  width: 704rpx;
  background: $white;
  align-items: center;
  padding: $padding-md;
  border-radius: $border-radius-base;
  // margin-top: 20px;
  &-radio {
    transform: scale(0.7);
  }
  &-radio-box {
    position: relative;
  }
  &_radio--cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  &-img {
    width: 200rpx;
    height: 200rpx;
    flex-shrink: 0;
    margin: 0 $margin-md;
    border-radius: $border-radius-md;
  }

  &-info {
    flex: 1;
    width: 400rpx;
    display: flex;
    min-height: 200rpx;
    flex-direction: column;
    justify-content: space-between;
  }
  &-footer {
    display: flex;
    align-items: center;
    margin-top: $margin-base;
    justify-content: space-between;
    &-price {
      font-weight: bold;
      font-size: $line-height-md;
      color: $font-color-red;
      &::before {
        content: "¥";
        font-size: $font-sm;
      }
    }
  }
}
</style>
