<template>
  <div>
    <div class="counter">
      <span
        class="counter-icon"
        @click.stop="subtractCount">-</span>
      <span
        class="counter-num"
        v-text="count">
      </span>
      <span
        class="counter-icon"
        @click.stop="addCount">
        +
      </span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, String]
    },
    // 最小个数份数
    minNum: {
      type: [Number, String],
      default: 1
    },
    // 最大可选份数
    maxNum: {
      type: [Number, String]
    }
  },
  data () {
    return {
      count: this.value
    }
  },
  watch: {
    value (val) {
      this.count = val
    },
    count (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    subtractCount () {
      if (this.count > this.minNum) {
        this.count--
        this.$emit('numCount', {
          value: this.count,
          type: 'sub'
        })
        return
      }
      this.$emit('lowMin', true)
    },
    addCount () {
      if (this.count < this.maxNum) {
        this.count++
        this.$emit('numCount', {
          value: this.count,
          type: 'add'
        })
        return
      }
      this.$emit('highMax', true)
    }
  }
}
</script>
