<template>
    <div>
        <cs-basic-card
            v-if="form.visible"
            :style="form.htmlStyle"
            :outlined="outlined"
            :disabled="disabled || form.disabled || form.processing || (messageBox && messageBox.visible)"
            elevation="20"
        >
            
            <template #icon
                v-if="withHeader && form.icon"
            >
                <cs-image 
                    :src="$url + form.icon"
                    :height="32"
                    :width="32"
                    class="mr-2"
                />
            </template>

            <template #title
                v-if="withHeader && form.Caption()"
            >
                <span>
                    {{ __(form.Caption(), form.formprovider.activeRecord) }}
                </span>
            </template>

            <template #titleright 
                v-if="withHeader"
            >
                <cs-btn-cancel 
                    :form="form"
                    :caption="null"
                    position="bottom"
                    :outlined="false"
                />
            </template>

            <v-divider v-if="withHeader"></v-divider>

            <v-sheet
                tile
                :height="form.absoluteHeight - 108"
                class="overflow-y-auto"
            >
                <v-card-text>
                    <slot></slot>
                </v-card-text>
            </v-sheet>

            <v-divider></v-divider>

            <template #actions>

                <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"
                    position="top"
                    @keypresstab="OnKeyPressTab"
                />
            </template>
        </cs-basic-card>

        <cs-message-box 
            v-if="messageBox"
            :messageBox="messageBox"
        />
    </div>
</template>

<script>
    export default {

        props: {
            form: {required: true},
            outlined: {default: true},
            messageBox: {default: null},
            disabled: {default: false},
            withHeader: {default: true},
        },

        methods: {
            OnKeyPressTab(e) {
                if( ! e.shiftKey )
                {
                    e.preventDefault();
                    this.$slots.default[this.$slots.default.length - 1].componentInstance.Focus();
                }
            }
        },

        created() {
            this.form.vue = this;
        },

        components: {
            CsBasicCard: require('./CsBasicCard').default,
            CsImage: require('./../images/CsImage').default,
            CsMessageBox: require('./CsMessageBox').default,
            CsBtn: require('./../buttons/CsBtn').default,
            CsBtnCancel: require('./../buttons//CsBtnCancel').default,
        },
        
        name: 'CsFormCard'
    }
</script>