<template>
  <div class="cmp-minus-plus2">
    <div class="minus-plus-wrapper">
      <div class="btn-minus" :class="{'disabled': !count}" @click="handleMinus"></div>
      <div :class="{count: true}">
        {{count}}
      </div>
      <div class="btn-plus" :class="{'disabled': maxCount === count}" @click="handlePlus"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    },
    maxCount: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {}
  },
  methods: {
    handleMinus () {
      if (!this.count) return false
      this.$emit('clickMinus')
    },
    handlePlus () {
      if (this.count === this.maxCount) return false
      this.$emit('clickPlus')
    }
  }
}
</script>

<style lang="scss">
@import './plus-minus.scss';
</style>