<template>
    <el-drawer v-model="drawerVisible" :title="parameter.title" :size="parameter.width">
        <slot />
        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
        </template>
    </el-drawer>
</template>

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

const drawerVisible = ref(false)

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

const handleCancel = () => {
    emit('handleCancel', closeDrawer)
}
const handleConfirm = () => {
    emit('handleConfirm', closeDrawer)
}
const closeDrawer = () => {
    drawerVisible.value = false
}
defineExpose({
    openDrawer,
    drawerVisible
})
</script>
<style scoped></style>
