<template>
  <div class="good">
    <cr-radio class="good-radio" :value="value.selected" color="#EC1500" />
    <div class="good-radio-click" @click="changeSelectStatus" />
    <div class="good-image">
      <cr-image
        :src="value.skuImg | imogr({ w: 208, h: 208 })"
        lazy-load
        width="104"
        height="104"
        class="good-img"
        @click="goDetail"
      />
      <p v-if="value.commonLimitCount">每人限购{{ value.commonLimitCount }}件</p>
    </div>
    <div class="good-info" @click="goDetail">
      <div class="good-title-wrap">
        <div>
          <good-title :value="value" @openPopup="openPopup" />
          <good-tag :value="value.tagList" />
        </div>
        <good-remind :value="value" :idx="idx" :index="index" />
      </div>
      <div class="good-footer" @click="goDetail">
        <good-price
          ref="goodPrice"
          :value="value"
          :position="position"
          @getPosition="getPosition"
        />
        <good-num
          ref="goodNum"
          :value="count"
          :can-add="canAdd"
          :min="1"
          :max="value.commonLimitCount"
          disabled-input
          :class="['good-footer-num']"
          @change="changeGoodNum"
          @click.native.stop="stopPropagation"
          @onClickInputBox="clickInputBox"
        />
      </div>
    </div>
  </div>
</template>
<script>
import GoodTitle from './goodTitle.vue';
import GoodTag from './goodTag.vue';
import GoodNum from './goodNum.vue';
import GoodPrice from './goodPrice.vue';
import GoodRemind from './goodRemind.vue';
import { mapActions } from '../shopCartModules';
// import { debounce } from '@/utils';
export default {
  name: 'GoodItem',
  inject: ['cart'],
  components: {
    GoodTag,
    GoodTitle,
    GoodPrice,
    GoodRemind,
    GoodNum
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    },
    index: {
      type: Number
    },
    idx: Number,
    position: String
  },
  data() {
    return {
      count: this.value?.count ?? 0,
      canAdd: this.value.canAdd ?? true
    };
  },
  watch: {
    value: function(val) {
      this.count = val.count;
    }
  },
  methods: {
    closeModal() {
      this.$refs.goodPrice.closeModal();
    },
    getPosition() {
      this.$emit('getPosition', this.idx, this.index);
    },
    stopPropagation() {
      return;
      // if (this.count === this.value.commonLimitCount) {
      //   this.$toast(`您当前购买的商品限购${this.value.commonLimitCount}件`);
      //   return;
      // }
    },
    ...mapActions({
      selectCartGood: 'select_cart_good',
      changeCartGoodNum: 'change_cart_good_num'
    }),
    changeSelectStatus() {
      const goodInfo = { ...this.value, selected: !this.value.selected };
      console.log(goodInfo, '.......');
      this.selectCartGood({ index: this.index, idx: this.idx, goodInfo });
    },
    getMaxStockByCanAdd(item) {
      const { count, canAdd, activityCanBuyCount, commonLimitCount } = item;
      if (activityCanBuyCount) {
        return activityCanBuyCount;
      } else if (commonLimitCount) {
        return commonLimitCount;
      }
      let finalCount = canAdd ? count + 1 : count;
      if (this.prevCanAdd !== item.canAdd) finalCount = count;
      this.prevCanAdd = item.canAdd;
      return finalCount;
    },
    async changeGoodNum(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,
        idx: this.idx,
        goodInfo,
        type
      });
      if (!result) {
        this.$refs.goodNum && (this.$refs.goodNum.inputValue = this.value.count);
      }
    },
    clickInputBox() {
      this.$emit('openEditNumDialog', this.idx, this.index, this.value);
    },
    goDetail() {
      const { skuName, skuImg, skuId } = this.value;
      const params = {
        count: 1,
        goodsName: skuName,
        goodsOrgImage: skuImg
      };
      const query = { skuNo: skuId };
      this.$router.push({ name: 'goodDetail', params, query });
    },
    openPopup(type) {
      this.cart.openPopup({ type, goodInfo: this.value });
    }
  }
};
</script>
<style lang="less" scoped>
.good {
  display: flex;
  width: 100%;
  background: #fff;
  align-items: center;
  padding: 10px;
  border-radius: 3px;
  box-sizing: border-box;
  position: relative;
  // margin-top: 20px;
  // &-radio {
  // transform: scale(0.7);
  // }
  &-radio-click {
    position: absolute;
    width: 20px;
    height: 20px;
  }
  &-image {
    position: relative;
    height: 100px;
    margin: 0 6px;
    .good-img {
      width: 100px;
      height: 100px;
      flex-shrink: 0;
      border-radius: 8px;
    }
    p {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 10px;
      width: 100%;
      text-align: center;
      background: rgba(0, 0, 0, 0.6);
      padding: 4px 0;
      // border-radius: 0px 0px 8px 8px;
      color: #fff;
    }
  }
  &-info {
    flex: 1;
    width: 200px;
    display: flex;
    min-height: 100px;
    flex-direction: column;
    justify-content: space-between;
  }
  &-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: space-between;
    &-price {
      font-weight: bold;
      font-size: 17px;
      color: #ec3333;
      &::before {
        content: '¥';
        font-size: 12px;
      }
    }
    img {
      width: auto;
      height: 12px;
      margin-left: 4px;
    }
  }
}
.good-title-wrap {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  justify-content: space-between;
}
</style>
