<template>
    <j-modal-with-header v-model="visible"
                         :overlay="overlay"
                         :overlay-capacity="overlayOpacity"
                         :border-css="borderCss"
                         :margin="margin"
                         :close-on-click="closeOnClick"
                         :close-on-escape="closeOnEscape"
                         :transition="transition"
                         :header-styles="headerStyles"
                         :close-button-styles="closeButtonStyles"
                         :show-close-button="showCloseButton"
                         :max-height="maxHeight"
                         @show="onShow"
                         @showing="onShowing"
                         @hide="onHide"
                         @hiding="onHiding">
        <template slot="header">
            <slot name="header"></slot>
        </template>
        <div class="modal-scroll-content">
            <div style="position:relative !important;">
                <slot></slot>
            </div>
        </div>
    </j-modal-with-header>
</template>
<script>
export default {
    props: {
        value: {
            type: Boolean,
            value: false
        },
        overlay: {
            type: Boolean,
            default: true
        },
        overlayOpacity: {
            type: Number,
            default: 0.4
        },
        borderCss: {
            type: String,
            default: "1px solid dodgerblue"
        },
        margin: {
            type: String,
            default: "10%" //e.g: 10px, 5%
        },
        closeOnClick: {
            type: Boolean,
            default: true
        },
        closeOnEscape: {
            type: Boolean,
            default: true
        },
        // fade, bounce
        transition: {
            type: String,
            default: "fade"
        },
        headerStyles: {
            type: String,
            default: ""
        },
        closeButtonStyles: {
            type: String,
            default: ""
        },
        showCloseButton: {
            type: Boolean,
            default: true
        },
        maxHeight: {
            default: null
        }
    },
    data() {
        return {
            visible: this.value
        };
    },
    methods: {
        onShow() {
            this.$emit("show");
        },
        onShowing(args) {
            this.$emit("showing", args);
        },
        onHide() {
            this.$emit("hide");
        },
        onHiding(args) {
            this.$emit("hiding", args);
        }
    },
    watch: {
        value() {
            this.visible = this.value;
            this.$emit("input", this.visible);
        },
        visible() {
            this.$emit("input", this.visible);
        }
    }
};
</script>