<template>
    <div
        class="vc-model"
        :class="{show: show}"
        @click="click">
        <div class="model-box">
            <span class="box-close icon-delete-22" v-if="hasClose" @click="close"></span>
            <div class="box-title" v-if="title">{{title}}</div>
            <div class="box-content">
                <slot></slot>
            </div>
            <div class="box-btn" v-if="hasBtns">
                <button class="btn" @click="ok">确定</button>
                <button class="btn" @click="cancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            show: {
                type: Boolean,
                default: false
            },
            hasClose: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ''
            },
            hasBtns: {
                type: Boolean,
                default: false
            },
            onClick: {
                type: Function,
                default: () => {}
            }
        },

        beforeDestroy () {
            document.body.style.overflow = 'visible'
        },

        watch: {
            show (newValue) {
                if (document && document.body) {
                    if (newValue) {
                        document.body.style.overflow = 'hidden'
                    } else {
                        document.body.style.overflow = 'visible'
                    }
                }
            }
        },

        methods: {
            click () {
                this.$emit('click')
            },

            cancel () {
                this.$emit('cancel')
            },

            ok () {
                this.$emit('ok')
            },

            close () {
                this.$emit('close')
            }
        }
    }
</script>

<style lang="less">
    .vc-model {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        background-color: #333;
        background-color: rgba(51, 51, 51, .7);

    &.show {
         display: block;
     }

    .model-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 24px 30px;
        background-color: #fff;
    }
    .box-title {
        margin-bottom: 40px;
        font-size: 20px;
        color: #333;
        text-align: center;
    }
    .box-close {
        position: absolute;
        top: 24px;
        right: 30px;
        font-size: 22px;
        cursor: pointer;
    }

    .box-btn {
        margin-top: 32px;
        text-align: right;
    .btn {
        height: 38px;
        padding: 0 21px;
        margin-left: 16px;
        background: #5CAEDC;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
    }
    }
    }
</style>