<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';
import { deleteSpiderTask } from '@/api/spiderTask.ts'
import { ElMessage } from 'element-plus';
interface deleteDialogPropType {
	dialogVisible: boolean,
	jobId: string
}
const props = defineProps<deleteDialogPropType>()
const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
const deleteDialogVisible = ref(props.dialogVisible)
// 删除方法
const handleDelelte = async () => {
    await deleteSpiderTask({job_id: props.jobId})
    emit('getUserList')
    deleteDialogVisible.value = false
	ElMessage.success('删除成功')
}

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

</script>