<style scoped>
.icon-size {
    font-size: 20px;
}
.number {
    width: 60px;
    text-align: center;
}
</style>
<template>
    <div>
          <q-input
            style="width: 150px"
            @input="changePeople"
            v-model="value"
            class="col"
            :class="{
              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
            }"
            mask="#"
            reverse-fill-mask
            dense
            standout
            readonly
          >
            <template v-slot:prepend>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="remove"
                @click="minusClick"
              />
            </template>
            <template v-slot:append>
              <q-btn
                color="primary"
                size="sm"
                class="q-px-none"
                flat
                icon="add"
                @click="plusClick"
              />
            </template>
          </q-input>
    </div>
</template>
<script>
export default {
    props: {
        min: {
            default: undefined,
        },
        max: {
            default: undefined,
        },
        defaultValue: {
            require: true,
            default: 0,
        },
        step: {
            default: 1,
        },
    },
    data() {
        return {
            value: this.defaultValue
        }
    },
    methods: {
        minusClick() {
            if(this.min === undefined || this.value > this.min) {
                this.value-= this.step
                this.$emit('input', this.value)
            }
        },
        plusClick() {
            if(this.max === undefined || this.value < this.max) {
                this.value+= this.step
                this.$emit('input', this.value)
            }
        },
    changePeople(val) {
                this.value+= val
        this.$emit('input', this.value)
    },
    },
}
</script>