<template>
	<a-modal title="删除文件" v-model:visible="visible" :maskClosable="false" width="550px" @cancel="handleDialogClose">
		<div v-if="deleteMode === 1">删除后可在回收站查看, 是否继续删除？</div>
		<div v-else-if="deleteMode === 2">此操作将永久删除该文件, 是否继续？</div>
		<template #footer>
			<a-button @click="handleDialogClose">取 消</a-button>
			<a-button type="primary" :loading="sureBtnLoading" @click="handleDialogSure"> 确 定 </a-button>
		</template>
	</a-modal>
</template>

<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { batchDeleteFile, batchDeleteRecoveryFile, deleteFile, deleteRecoveryFile } from '@/api/myResource/file'

	const props = defineProps({
		fileInfo: [Array, Object],
		deleteMode: Number,
		isBatchOperation: Boolean,
		callback: Function
	})

	const visible = ref(false)
	const sureBtnLoading = ref(false)

	const handleDialogClose = () => {
		visible.value = false
		props.callback('cancel')
	}

	const handleDialogSure = async () => {
		try {
			sureBtnLoading.value = true
			let res = null

			if (props.isBatchOperation) {
				const userFileIds = props.fileInfo.map((item) => item.userFileId).join(',')
				res =
					props.deleteMode === 1
						? await batchDeleteFile({ userFileIds })
						: await batchDeleteRecoveryFile({ userFileIds })
			} else {
				const userFileId = props.fileInfo.userFileId
				res = props.deleteMode === 1 ? await deleteFile({ userFileId }) : await deleteRecoveryFile({ userFileId })
			}

			if (res.success) {
				message.success('删除成功')
				visible.value = false
				props.callback('confirm')
			} else {
				message.error('删除失败，' + res.message)
			}
		} catch (error) {
			console.error(error)
		} finally {
			sureBtnLoading.value = false
		}
	}

	defineExpose({
		visible
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.ant-btn-primary {
		&,
		&:hover,
		&:focus {
			background-color: @primary-color;
			border-color: @primary-color;
		}
	}

	.ant-btn {
		&:hover,
		&:focus {
			background-color: @hover-color;
			border-color: @hover-color;
			color: white;
		}
	}
</style>
