<template>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :width="width"
        :visible.sync="visible" :before-close="handleCancel">
        <slot></slot>
        <component :is="componentTag"></component>
        <div slot="footer" v-if="footer" class="dialog-footer">
            <el-button size="small" @click="handleCancel">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">提 交</el-button>
        </div>
    </el-dialog>
</template>

<script>
const defaultOption = {
    title:"弹框",
    width:'35%',
    center:false
}

export default {
    name: "McDialog",
    props: {
        componentTag: {
            type: Object,
            default: () => null
        },
        footer:false,
        title: {
            type: String,
            default: '弹框'
        },
        visible: false,
        width: {
            type: String,
            default: "350px"
        },
        component: null,
        onSubmit: Function,
        onCancel: Function
    },

    methods: {
        handleCancel() {
            this.$emit('update:visible', false)
            this.onCancel && this.onCancel()
        },
        handleSubmit() {
            // this.$emit('update:visible', false)
            this.onSubmit && this.onSubmit()
        },

    }

}
</script>

<style lang="less" scoped></style>