<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'

const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	},
	deleteMode: {
		type: String,
		default: '0'
	},
	id: {
		type: Number,
		default: '0'
	},
	ids: {
		type: Array,
		default: []
	}
})
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 == '1') {
		await deleteUser({ id: props.id })
		emit('getUserList')
		deleteDialogVisible.value = false

	}
	else if (props.deleteMode == '2') {
		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>