<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 { getUserList, addUser, deleteUser, updateUser, batchDeleteUser } from '@/api/user.ts'
import { DeleteMode } from '@/components/Delete/enum.ts'
interface deleteDialogPropType {
	dialogVisible: boolean,
	deleteMode: DeleteMode,
	id: number,
	ids: number[],
}
const props = defineProps<deleteDialogPropType>()
const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
const deleteDialogVisible = ref(props.dialogVisible)
const deleteMode = ref(props.deleteMode)
// 删除方法
const handleDelelte = async () => {
	if (props.deleteMode == DeleteMode.SINGLE_DELETE) {
		await deleteUser({ id: props.id })
		emit('getUserList')
		deleteDialogVisible.value = false
	}
	else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
		console.log(props.ids);
		await batchDeleteUser({ ids: props.ids })
		emit('getUserList')
		deleteDialogVisible.value = false
	}
}
// 关闭弹窗的方法
const close = () => {
	deleteDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
	(newVal) => {
		deleteDialogVisible.value = newVal
	}
)
// 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value,
	(newVal) => {
		emit('update:dialogVisible', newVal)
	}
)
// 监听父组件传过来的值
watch(() => props.deleteMode,
	(newVal) => {
		deleteMode.value = newVal
	}
)
// 监听组件内的值并向父组件更新
watch(() => deleteMode.value,
	(newVal) => {
		emit('update:deleteMode', newVal)
	}
)
</script>