<template>
    <v-sheet
        tile
        :outlined="outlined"
        class="rounded-lg"
    >
        <div class="text-body-2 font-weight-bold mb-1">
            {{ __(control.caption) }}
        </div>

        <div class="d-flex justify-space-between">
            <div class="pr-1" style="width:50%">
                <v-select
                    dense
                    hide-details
                    outlined
                    :placeholder="__('Criteriul de filtrare')"
                    :items="control.getItems"
                    clearable
                    v-model="control.operator"
                >
                </v-select>
            </div>

            <div class="pl-1" style="width:50%">
                
                <cs-date-interval-box 
                    v-if="control.operator == 'between'"
                    :control="control.dateBetweenControl"
                    :value="control.dateBetweenControl.GetRange(control.value.date_from, control.value.date_to)"
                    @input="control.dateBetweenControl.SetRangeValue($event, control.value, 'date_from', 'date_to')"
                />

                <cs-date-box 
                    v-else
                    :control="control.dateControl"
                    v-model="control.value.date_from"
                />

            </div>
        </div>

    </v-sheet>
</template>

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

        components: {
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
            CsDateBox: require('@CsVueComp/controls/dates/CsDateBox').default, 
        },

        name: 'CsDateFilterControl',        
    }
</script>