<template>
    <el-dialog
        :width="width"
        class="common-dialog"
        :title="title"
        :visible.sync="dialogVisible"
        :before-close="beforeClose"
        :append-to-body="appendToBody"
        :custom-class="customClass"
        :close-on-click-modal="closeOnClickModal"
        :close-on-press-escape="closeOnPressEscape"
        :show-close="showClose"
        :destroy-on-close="destroyOnClose"
        :center="center"
        :fullscreen="fullscreen"
        :top="top"
        @open="open"
        @opened="opened"
        @close="close"
        @closed="closed"
    >
        <slot name="title" slot="title"></slot>
        <slot></slot>
        <slot name="footer" slot="footer"></slot>
    </el-dialog>
</template>

<script>
export default {
    name: 'common-dialog',
    props: {
        width: {
            type: String,
            default: () => {
                return '900px'
            },
        },
        title: {
            type: String,
            default: '',
        },
        visible: {
            type: Boolean,
            default: false,
        },
        beforeClose: {
            type: Function,
        },
        appendToBody: {
            type: Boolean,
            default: true,
        },
        customClass: {
            type: String,
        },
        closeOnClickModal: {
            type: Boolean,
            default: false,
        },
        closeOnPressEscape: {
            type: Boolean,
            default: true,
        },
        showClose: {
            type: Boolean,
            default: true,
        },
        destroyOnClose: {
            type: Boolean,
            default: false,
        },
        center: {
            type: Boolean,
            default: false,
        },
        fullscreen: {
            type: Boolean,
            default: false,
        },
        top: {
            type: String,
            default: '8vh',
        },
        open: {
            type: Function,
            default() {
                return () => {}
            },
        },
        opened: {
            type: Function,
            default() {
                return () => {}
            },
        },
        close: {
            type: Function,
            default() {
                return () => {}
            },
        },
        closed: {
            type: Function,
            default() {
                return () => {}
            },
        },
    },
    data() {
        return {}
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible
            },
            set(val) {
                this.$emit('update:visible', val)
            },
        },
    },
    watch: {},
    created() {},
    methods: {},
}
</script>

<style lang="scss" scoped>
.common-dialog /deep/ .el-dialog__header {
    padding-top: 14px;
    border-bottom: 1px solid #e8e8e8 !important;
    .el-dialog__headerbtn {
        top: 16px;
    }
}
.common-dialog /deep/ .el-dialog__footer {
    border-top: 1px solid #e8e8e8 !important;
    padding-bottom: 10px;
}
.common-dialog /deep/ .form-single-row {
    width: 600px;
    margin: 0 auto;
}
.common-dialog /deep/ .inputs {
    width: 90%;
}
</style>