<template>
    <v-select
        ref="Control"
        :hide-details="control.hideDetails"
        :dense="control.dense"
        :outlined="control.outlined"
        :clearable="control.clearable"
        :no-data-text="__(control.noDataText)"
        :persistent-hint="control.persistentHint"
        :hint="control.hint"
        
        :items="control.items"
        :error-messages="localeErrors"

        v-model="localValue"

        @focus="$emit('focus')"
        @blur="$emit('blur')"
    >
        <template #label>
            
            <cs-label 
                :control="control"
            />
        </template>
    </v-select>
</template>

<script>
    export default {

        props: {
            control: {required: true},

            value: {required: true},

            errors: {default: null},
        },

        computed: {
            localValue: {
                get: function() {
                    return this.value;
                },

                set: function(value) {
                    return this.$emit('input', value);
                }
            },

            localeErrors() {
                return _.map(this.errors, error => this.__(error))
            }
        },

        methods: {
            Focus() {
                setTimeout( () => {
                    this.$refs.Control.focus();
                }, 1)
            }
        },

        components: {
            CsLabel: require('./../labels/CsLabel').default,
        },

        name: 'CsLocalSelectBox',
    }
</script>