<template>
    <v-row dense v-if="activeRecord">
        <v-col cols="12">
            <cs-date-interval-box 
                ref="Daterange"
                :control="controls.intervalvalabilitate"
                :errors="intervalDatesErrors"
                :value="controls.intervalvalabilitate.GetRange(activeRecord.date_from, activeRecord.date_to)"
                @input="controls.intervalvalabilitate.SetRangeValue($event, activeRecord, 'date_from', 'date_to')"
                @focus="errorsManager.ResetField('date_from'), errorsManager.ResetField('date_to')"
                @blur="errorsManager.Validate('date_from'), errorsManager.Validate('date_to')"
            />
        </v-col>
    </v-row>
</template>

<script>
    export default {
        props: {
            editable: {required: true},
        },

        computed: {
            form() {
                return this.editable.form;
            },

            intervalDatesErrors() {
                if(!! this.errorsManager.ByField('date_from') )
                {
                    return this.errorsManager.ByField('date_from');
                }
                if(!! this.errorsManager.ByField('date_to') )
                {
                    return this.errorsManager.ByField('date_to');
                }
                return null;
            },
        },

        components: {
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
        },
        
        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CursStatusInput',
    }
</script>