<template>
    <div class="inputcnpj field" :class="this.class" :style="style">
        <label class="p-label" :class="{'p-error': this.fieldErrors.includes(label)}">
            {{ label.concat(required ? ' *' : '') }}
        </label>
        <prime-input-mask :id="id" mask="99.999.999/9999-99" class="p-inputtext-sm"
                          :class="{'p-invalid': this.fieldErrors.includes(label)}" :disabled="disabled"
                          @input="onInput" :value="modelValue"
        />
    </div>
</template>

<script>
import PrimeInputMask from 'primevue/inputmask'
import {mapGetters} from "vuex";

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

<style lang="scss">

.inputcnpj {
    .label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
    }

    .label label {
        font-weight: bold;
    }

    .element {
        display: flex;
        margin-bottom: 0;
    }

    .p-inputtext-sm {
        //width: 200px;
    }
}
</style>
