<template>
    <span>
        <span @click="visible = true">
            <slot name="trigger">
                <el-button :type="btnType">{{btnName}}</el-button>
            </slot>
        </span>
        <el-dialog
         :title="title || btnName"
         :visible.sync="visible"
         @closed="$emit('closed')"
         :close-on-click-modal="false"
         :destroy-on-close="true">
            <slot name="default"/>
            <slot name="footer">
                <div slot="footer">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button v-if="onConfirm" type="primary" @click="handleConfirm">确 定</el-button>
                </div>
            </slot>
         </el-dialog>
    </span>
</template>

<script>
/**
 * 模态框
 */
export default {
    name: 'Dialog',
    props: {
        // 按钮相关属性
        btnType: {
            type: String,
            default: 'primary'
        },
        btnName: {
            type: String,
            default: '打开弹窗'
        },
        title:{
            type: String
        },
        onConfirm:{
            type: Function
        }
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        async handleConfirm(){
            await this.onConfirm()
            this.visible = false
        }
    }
}
</script>
