<template class="inputinteger">
    <div class="inputinteger field" :class="this.class" :style="style">
        <label v-if="label" class="p-label" :class="{'p-error': this.fieldErrors.includes(label)}">
            {{ label.concat(required ? ' *' : '') }}
        </label>
        <prime-input-number :id="id" class="p-inputnumber-sm" :class="{'p-invalid': this.fieldErrors.includes(label)}"
            :disabled="disabled" :value="modelValue" @input="onInput" />
    </div>
</template>

<script>
import PrimeInputNumber from 'primevue/inputnumber'
import {mapGetters} from "vuex";

export default {
    name: 'inputinteger',
    components: {
        PrimeInputNumber
    },
    props: {
        id: { type: String },
        label: { type: String, required: true },
        class: { type: String, default: 'col-1' },
        style: { type: String },
        disabled: { type: Boolean, default: false },
        required: { type: Boolean, default: false },
        modelValue: { type: [String, Number] },
    },
    computed: {
        ...mapGetters(['fieldErrors'])
    },
    methods: {
        onInput(event) {
            console.log(event.value)
            this.$emit("update:modelValue", event.value);
        }
    }
}
</script>

<style lang="scss">

.inputinteger.field {
    .p-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
        font-weight: bold;
    }

    .p-inputtext {
        text-align: right;
    }
}
</style>
