<template>
    <el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
        <div class="text-center">
            <span style="color: #fff;font-size: 15px;">确定删除吗？</span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="handleDelelte">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue';

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    mode: {
        type: String,
        default: '1'
    }
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const deleteDialogVisible = ref(props.dialogVisible)

// 删除方法
const handleDelelte = () => {
    emit('confirm')
    deleteDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
    deleteDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
    (newVal) => {
        deleteDialogVisible.value = newVal
    }
)
// 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value,
    (newVal) => {
        emit('update:dialogVisible', newVal)
    }
)
</script>