<template>
    <el-dialog
        :custom-class="selfDialog"
        :title="title"
        :show-close="showClose"
        :width="width"
        :top="top"
        :visible="show"
        :center="true"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="hide"
        :before-close="beforeClose"
    >
        <div class="selfMask" v-if="!show"></div>
        <slot />
        <span slot="footer" v-if="$slots.footer" >
            <slot name="footer"></slot>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "veDialog",
    data() {
        return {
        };
    },
    props: {
        showClose: true,
        width: null,
        height: null,
        top: null,
        show: false,
        title: "",
        onClose: null,
        beforeClose: {
            type: Function,
            default: ((done)=>{
                done()
            })
        },
        selfDialog: {
            type: String,
            default: "veDialog"
        },
    },
    mounted() {},
    methods: {
        hide() {
            this.$emit("update:show", false);
            if (this.onClose) this.onClose();
        },
    },
    // watch: {
    //     show: {
    //         deep: true,
    //         immediate: true,
    //         handler(newV) {
    //             if (newV == true) {
    //                 this.$nextTick(() => {
    //                     if (this.title) {
    //                         this.selfDialog = "selfDialog";
    //                     } else {
    //                         this.selfDialog = "";
    //                     }
    //                 });
    //             }
    //         }
    //     }
    // }
};
</script>

<style scoped  lang="less">
.selfMask {
    // border: 1px solid red;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
}
// /deep/.selfDialog.el-dialog {
//     .el-dialog__header {
//         border-bottom: 1px solid #ebebeb;
//         padding: 15px;
//     }
// }
</style>
