<template>
    <v-row dense v-if="activeRecord">
        <v-col cols="12">
            <cs-file-uploader 
                ref="Avatar"
                :control="controls.preview_image"
                :immediateInput="false"
                v-model="activeRecord.preview_image"
                @uploaded="OnFileUploaded"
                @issaved="OnFileIsSaved"
            />
        </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;
            }
        },

        methods: {
            OnFileIsSaved(saved) {
                this.form.formprovider.previewImageSaved = saved;
            },

            OnFileUploaded(file) {
                this.form.formprovider.previewImageSaved = false;
            }
        },

        components: {
           CsFileUploader: require('@CsVueComp/controls/files/CsFileUploader/CsFileUploader').default,
        },

        created() {
            this.form.formprovider.previewImageSaved = false;
        },
        
        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CursPreviewImageInput',
    }
</script>