<template>
  <div class="goods-popup-num">
    <span class="Gp-num-name">
      购买数量
      <span v-if="limitCount" class="Gp-num-name-limit">(限购{{ limitCount }}件)</span>
    </span>
    <cr-stepper
      :value="selectedSku.skuNum"
      class="Gp-num-step"
      :min="1"
      :max="limitCount || 9999"
      disable-input
      integer
      @input="setSkuNum"
    />
  </div>
</template>
<script>
import { mapGetters, mapMutations } from '../store';
export default {
  name: 'LimitCount',
  computed: {
    ...mapGetters(['limitCount', 'selectedSku'])
  },
  methods: {
    ...mapMutations({
      setSkuNum: 'SET_SKU_NUM'
    })
  }
};
</script>
<style lang="less" scoped>
.goods-popup-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 @padding-lg;
  margin: @padding-md + 2 0;

  &-limit {
    position: absolute;
    right: 0;
    top: 27.5px;
    .text-size(14);
    color: @red;
    width: 90px;
    text-align: right;
  }

  .Gp-num-name {
    .text-size(13);
    color: @black;
    font-weight: 600;
    flex: 1;
    &-limit {
      .text-size(12);
      color: @gray-4;
    }
  }
  .Gp-num-step {
    display: flex;
    @{deep}.cr-stepper {
      &__minus,
      &__add,
      &__input {
        background-color: #f7f8f9 !important;
        border-width: 0;
      }
    }
  }
}
</style>
