export default {
    props: {
        parentContext: { type: Object, required: true },
        yesButtonText: { type: String, required: false, default: '' },
        noButtonText: { type: String, required: false, default: '' },
        modalTitle: { type: String, required: false, default: '' },
        id: { type: String, required: false, default: 'myModalSlot' },
        height: { type: String, required: false, default: '550px' },
        width: { type: String, required: false, default: '800px' },
        errorMessage: { type: String, required: false, default: '' },
        //isVisible: {type: Boolean, required: true} 
    },
    emits: ['onYes', 'onNo'],
    data() {
        return {
        }
    },
    created: function () {

        //if (this.isVisible)
        let c = this;
        setTimeout(function () { $('#' + c.id).modal('show'); }, 50);
        //else
        //    $('#' + this.id).modal('hide');
    },
    updated: function () {
        //if (this.isVisible)
        let c = this;
        setTimeout(function () { $('#' + c.id).modal('show'); }, 50);
        //else
        //    $('#' + this.id).modal('hide');
    },
    methods: {
        onNoHandler: function (e) {
            this.$emit('onNo', { id: this.id, parentContext: this.parentContext, submit: false });
        },
        onYesHandler: function (e) {
            if (this.errorMessage == '') {
                $('#' + this.id).modal('hide');
            }
            this.$emit('onYes', { id: this.id, parentContext: this.parentContext, submit: true });
        },
        getStyle: function () {
            return 'max-height: ' + this.height + '; width: ' + this.width + ' !important;';
        }
    },
    template: `
<div class="modal" tabindex="-1" role="dialog" :id="id">
    <div class="modal-dialog" role="document" :style="getStyle()">
        <div class="modal-content">

            <div class="modal-header">
                <h6 class="modal-title pull-left" v-if="modalTitle != ''">{{ modalTitle }}</h6>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="onNoHandler">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="row" v-if="errorMessage != ''">
                    <div class="col-12 text-danger" v-html="errorMessage">
                    </div><br/>
                </div>

                <div class="row">
                    <div class="col-xs-12" style="max-height: 600px;overflow-y: auto;">
                        <slot></slot>
                    </div><br/>
                </div>
            </div>

            <div class="modal-footer" v-if="yesButtonText != '' || noButtonText != ''">
                <button type="button" class="btn btn-primary waves-effect pull-left" @click="onYesHandler" v-if="yesButtonText != ''">{{ yesButtonText }}</button>
                <button type="button" class="btn btn-primary waves-effect pull-left" @click="onNoHandler" data-dismiss="modal" v-if="noButtonText != ''">{{ noButtonText }}</button>
            </div>
        </div>
    </div>
</div>
`
}
