<template>
    <Modal v-model="showModal" 
    :mask-closable="maskClosable" 
    :title="title" 
    :fullscreen="fullscreen" 
    :closable="closable" 
    :width="width" 
    :draggable="draggable" 
    :scrollable="scrollable"
    :footer-hide="footerHide"
    @on-ok="ok"
    @on-cancel="cancel">
    <slot></slot>
    <template #footer>
        <slot name="footer" class="ivu-modal-footer">
            <Button type="primary" @click="ok">确定</Button>
            <Button @click="cancel">取消</Button>
        </slot>
    </template>
    </Modal>
</template>
<script>
export default {
    name:'bcModal',
    props:{
        footerHide:{
            type:Boolean,
            default:false
        },
        value:{
            type:Boolean,
            default:false,
        },
        show:{
            type:Boolean,
            default:false,
        },
        maskClosable:{
            type:Boolean,
            default:false,
        },
        fullscreen:{
            type:Boolean,
            default:false,
        },
        scrollable:{
            type:Boolean,
            default:false,
        },
        closable:{
            type:Boolean,
            default:true,
        },
        draggable:{
            type:Boolean,
            default:false,
        },
        title:{
            type:String,
            default:'',
        },
        width:{
            type:[Number,String],
            default:520,
        }
    },
    data(){
        return {
            showModal:false
        }
    },
    mounted() {
        if (window.history && window.history.pushState) {
            window.addEventListener("popstate", this.cancel, false); // 回退时执行goback方法
        }
        console.log(this.$slots.footer)
    },
    destroyed() {
        window.removeEventListener("popstate", this.cancel, false);
    },
    methods:{
        ok(){
            this.$emit('on-ok')
        },
        cancel(){
           this.$emit('on-cancel') 
        } 
    },
    watch:{
        value:{
            immediate:true,
            handler:function(){
                this.showModal=this.value;
                if(this.value==true){
                    history.pushState(null, null, document.URL);
                }
            }
        }
    }
}
</script>