<template class="inputcalendar">
    <div class="inputcalendar 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-calendar :id="id" class="p-calendar-sm" :class="{'p-invalid': this.fieldErrors.includes(label)}"
                        :locale="pt_BR" :disabled="disabled" @date-select="onDateSelect" :showIcon="true"
                        :showTime="false"
                        :showOnFocus="false"
                        dateFormat="dd/mm/yy"
                        @blur="onBlur" :value="modelValue" />
    </div>
</template>

<script>
import PrimeCalendar from "primevue/calendar"

import {mapGetters} from "vuex";

export default {
    name: 'inputcalendar',
    components: {
        PrimeCalendar
    },
    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: [Date] },
    },
    data() {
        return {
            pt_BR: {
                firstDayOfWeek: 1,
                dayNames: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
                dayNamesShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
                dayNamesMin: ["D", "S", "T", "Q", "Q", "S", "S"],
                monthNames: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                today: 'Hoje',
                clear: 'Limpar',
                weekHeader: 'Sem'
            },
        }
    },
    computed: {
        ...mapGetters(['fieldErrors'])
    },
    methods: {
        onDateSelect(event) {
            console.log("DATESELECT: " + event)
            this.$emit("update:modelValue", event.toLocaleString('pt-BR', {dateStyle: 'short'}))
        },
        onBlur(event) {
            console.log("BLUR: " + event.target.value)
            this.$emit("update:modelValue", event.target.value);
        }
    }
}
</script>

<style lang="scss">

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

    .p-button {
        margin-left: 0;
    }
}
</style>
