<template>
    <div class="v-modal" :class="{['variant-' + variant]: !!variant}">
        <fup-modal-header :icon="icon"
                          :busy="busy"
                          :title="title"
                          @close="close">
            <template v-slot:title>
                <slot name="title"/>
            </template>
        </fup-modal-header>
        <fup-modal-body v-if="!noBodyContainer" :busy="busy" :no-padding="noPadding">
            <slot name="default"/>
        </fup-modal-body>
        <slot v-else name="default"/>
        <fup-modal-footer v-if="$slots.footer">
            <slot name="footer"/>
        </fup-modal-footer>
    </div>
</template>

<script>
    export default {
        name: "modal-constructor",
        props: {
            busy: {
                type: Boolean,
                default: false,
            },
            title: {
                type: String,
                default: null,
            },
            variant: {
                type: String,
                default: null,
            },
            icon: {
                type: String,
                default: null
            },
            noPadding: {
                type: Boolean,
                default: false,
            },
            noBodyContainer: {
                type: Boolean,
                default: false,
            }
        },
        created() {
            //this.$parent.$el.addEventListener('click', e => e.stopPropagation());
            this.$parent.$el.addEventListener('special-table-click', e => e.stopPropagation());
        },
        methods: {
            close() {
                this.$emit('close');
                if (this.hasOwnProperty('parent')) {
                    this.parent.$emit('close');
                }
            },
        }
    }
</script>
