<template>
    <el-dialog v-model="dialogVisible" :title="parameter.title" :width="parameter.width">
        <template #header>
            <slot name="header" />
        </template>
        <slot />
        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" v-if="showConfirmButton" @click="handleConfirm">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
export interface IParams {
    title: string
    width?: string | number
    data: { [key: string]: any }
}
defineProps({
    showConfirmButton: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['handleCancel', 'handleConfirm'])

const dialogVisible = ref(false)
// 父组件传递过来的参数
const parameter = ref<IParams>({
    title: '',
    width: '50%',
    data: {}
})
const openDialog = (params: IParams) => {
    parameter.value = { ...parameter.value, ...params }
    dialogVisible.value = true
}

const handleCancel = () => {
    emit('handleCancel', closeDialog)
}
const handleConfirm = () => {
    emit('handleConfirm', closeDialog)
}
const closeDialog = () => {
    dialogVisible.value = false
}
defineExpose({
    openDialog,
    dialogVisible
})
</script>
<style scoped></style>
