<template>
	<!-- 上传资源模态框 -->
	<a-modal v-model:visible="uploadModalVisible" title="上传资源" @ok="handleUploadOk" @cancel="handleUploadCancel">
		<a-upload
			:multiple="true"
			:before-upload="beforeUpload"
			:headers="headers"
			:action="action"
			:file-list="fileList"
			:remove="handleRemove"
			accept=".ppt,.pptx,.doc,.docx,.xls,.xlsx,.pdf,.mp4,.zip,.rar"
			:on-change="handleChange"
		>
			<div class="upload-area">
				<a-icon type="cloud-upload" style="font-size: 60px; color: #3ca9f5"></a-icon>
				<p>将文件拖到此处或点击上传</p>
				<p>按住Ctrl可同时多选，支持上传PPT/word/excel/pdf/mp4/zip/rar，单个文件不能超过2G</p>
			</div>
		</a-upload>
		<!-- 文件上传状态展示 -->
		<ul v-if="fileList.length">
			<li v-for="(file, index) in fileList" :key="index" class="file-item">
				<span>{{ file.name }}</span>
				<a-progress :percent="file.percent || 0" />
				<span v-if="file.response?.code == '200'">已完成</span>
				<span v-if="file.response?.code == '500'">上传失败</span>
				<span v-if="file.status === 'uploading'">上传中...</span>
			</li>
		</ul>
	</a-modal>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { Modal, Upload } from 'ant-design-vue'
	import resourceAuditApi from '@/api/resourceAudit.js'
	const emit = defineEmits(['close', 'getList'])
	const formState = reactive({
		resourcesId: null
	})
	// 上传资源模态框
	const uploadModalVisible = ref(true)

	// 文件列表
	const fileList = ref([])

	// 关闭模态框
	const handleUploadCancel = () => {
		// uploadModalVisible.value = false
		emit('close')
		fileList.value = []
	}

	// 确认上传
	const handleUploadOk = () => {
		// 这里可以添加实际的上传逻辑
		console.log('Upload confirmed:', fileList.value)
		// uploadModalVisible.value = false
		emit('close')
		fileList.value = []
		resourceAuditApi
			.add({ fileId: formState.resourcesId })
			.then((res) => {
				emit('getList')
			})
			.catch((err) => {
				console.log(err)
			})
	}
	// 上传前的钩子函数
	const beforeUpload = (file) => {
		const isLt2G = file.size / 1024 / 1024 / 1024 < 2
		if (!isLt2G) {
			Modal.error({ content: '文件大小不能超过 2GB!' })
		}
		return isLt2G
	}

	// 移除文件
	const handleRemove = (file) => {
		const index = fileList.value.indexOf(file)
		const newFileList = fileList.value.slice()
		newFileList.splice(index, 1)
		fileList.value = newFileList
		// 如果移除的是当前封面文件，则清空coverImageId
		if (formState.resourcesId === file.id) {
			formState.resourcesId = null
		}
	}

	// 文件状态改变时的处理函数
	const handleChange = ({ file, fileList: newFileList }) => {
		if (newFileList.length > 1) {
			fileList.value = [newFileList[0]] // 只保留最新上传的文件
			Modal.error({ content: '只能上传一个文件!' })
			return
		}

		if (file.response?.code == 200) {
			// 上传成功，获取文件ID
			const fileId = file.response?.data || file.id
			console.log('上传成功，获取文件ID', fileId)
			if (fileId) {
				formState.resourcesId = fileId
			}
		}
		fileList.value = newFileList
		if (file.status === 'uploading') {
			file.percent = Math.floor(file.percent)
		}
		if (file.response?.code == 200) {
			file.percent = 100
			Modal.success({ content: '文件上传成功' })
		} else if (file.response?.code == 500) {
			Modal.error({ content: '文件上传失败' })
			file.percent = 0
		}
	}
</script>

<style scoped>
	.upload-area {
		border: 2px dashed #3ca9f5;
		padding: 40px;
		text-align: center;
	}

	.upload-area p {
		margin: 10px 0;
	}

	.file-item {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}

	.file-item .ant-progress {
		flex: 1;
		margin: 0 10px;
	}
</style>
