<template>
    <v-row dense v-if="activeRecord">
        <v-col cols="12">
            <curstype-autocomplete-selector
                :app="app"
                :adresareForm="app.forms.Curstype"
                v-model="activeRecord.type"
                :errors="errorsManager.ByField('type')"
                @focus="errorsManager.ResetField('type')"
            />
        </v-col>

        <v-col cols="12">
            <cs-text-box 
                v-if="
                    (activeRecord.type == 'link') || 
                    (activeRecord.type == 'youtube')
                "
                :control="controls.url"
                :errors="errorsManager.ByField('url')"
                v-model="activeRecord.url"
                @focus="errorsManager.ResetField('url')"
                @blur="errorsManager.Validate('url')"
            />

            <template v-else-if="activeRecord.type == 'fisier'">
                <v-sheet 
                    v-if="(action == 'update') && !!formprovider.oldRecord.file"
                    class="mb-3"
                >
                    {{ __('Fișier actual: ') }} 
                    <strong>
                        {{formprovider.oldRecord.file.file_original_name}}
                    </strong>                          
                </v-sheet>

                <cs-file-box 
                    :control="controls.file"
                    :errors="errorsManager.ByField('file')"
                    v-model="activeRecord.file"
                    @focus="errorsManager.ResetField('file')"
                    @blur="errorsManager.Validate('file')"
                />
            </template>
        </v-col>

    </v-row>
</template>

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

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

            app() {
                return this.editable.column.datatable.app;
            }
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsFileBox: require('@CsVueComp/controls/files/CsFileBox').default,
        },
        
        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CursSursaInput',
    }
</script>