<script lang="ts">
    import { faCalendar } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
    export default {
        props: {
            data: {
                type: Object,
                required: true
            },
            filter: {
                type: Object,
                required: true
            },
            prop: {
                type: String,
                required: true
            }
        },
        components: {
            FontAwesomeIcon: FontAwesomeIcon
        },
        data() {
            return {
                data: this.data,
                filter: this.filter,
                prop: this.prop,
                calendar: faCalendar
            }
        },
        methods: {
            filterDate(event: any){
                this.data[this.prop] = event;
                this.$emit('filterValue', event);
            }
        }
    }
</script>

<template>
    <v-date-input :prepend-icon="''" @save="filterDate($event)" :v-model="data" :model-value="filter">
        <template v-if="calendar" #prepend-inner>
            <FontAwesomeIcon :icon="calendar" />
        </template>
    </v-date-input>
</template>