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

        <div style="width:100%">
            
            <v-select
                dense
                hide-details
                outlined
                class="mt-0"
                :items="control.options()"
                v-model="control.value"
            >
            </v-select>
        </div>

    </v-sheet>
</template>

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

        watch: {
            'control.value': function(newValue, oldValue) {
                if(newValue == '0')
                {
                    this.control.operator = 'all';
                }
                else
                {
                    this.control.operator = 'equal';
                }
            }
        },

        name: 'CsSelectFilterControl',        
    }
</script>