<template>
    <v-file-input
        ref="Control"
        :id="control.id"
        :show-size="control.showSize"
        :dense="control.dense"
        :hide-details="control.hideDetails"
        :outlined="control.outlined"
        :clearable="control.clearable"
        :multiple="control.multiple"
        :error-messages="localeErrors"
        :persistent-hint="control.persistentHint"
        :hint="control.hint"
        :accept="control.inputAccept"
        :class="{
            'cs-control': true,
            'cs-file-box': true,
        }"

        v-model="localValue"

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

<script>
    import RandomString from '@CsFunc/global/RandomString';

    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(time = 5) {
                setTimeout( () => {
                    this.$refs.Control.focus();
                }, time)
            },

        },

        created() {
            this.control.id = 'cs-file-box-' + RandomString(64); 
        },

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

        name: 'CsFileBox',
    }
</script>