<template>
    <v-menu
        v-model="form.visible"
        :position-x="form.x"
        :position-y="form.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card
            tile
            flat
            :width="form.width"
        >
            <v-card-title class="pa-2">
                <span class="text-body-2 font-weight-bold">
                    {{ form.title }}
                </span>

                <v-spacer></v-spacer>

                <cs-btn-cancel 
                    :caption="null"
                    :outlined="false"
                    :form="form"
                />
            </v-card-title>

            <v-card-text class="pa-2">
                <template v-if="activeRecord">
                    <cs-file-box 
                        ref="File"
                        :control="controls.file"
                        :errors="errorsManager.ByField('file')"

                        v-model="activeRecord.file"
                        
                        @focus="errorsManager.ResetField('file')"
                        @blur="errorsManager.Validate('file')"
                    />
                </template>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions class="pa-2">

                <cs-btn 
                    outlined
                    position="top"
                    :icon="form.TriggerIcon()"
                    :color="form.TriggerColor()"
                    :caption="form.TriggerCaption()"
                    :tooltip="form.TriggerTooltip()"

                    :loading="form.processing"
                    :disabled="form.actionButtonDisabled"

                    :click="() => form.formprovider.Trigger()"
                />

                <v-spacer></v-spacer>

                <cs-btn-cancel 
                    :form="form"
                />
            </v-card-actions>
        </v-card>
    </v-menu>
</template>

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

        components: {
            CsBtnCancel: require('@CsVueComp/buttons/CsBtnCancel').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsFileBox:  require('@CsVueComp/controls/files/CsFileBox').default,
        },

        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CsImportForm',
    }
</script>