<template>
	<div class="file-preview-container">
		<iframe v-if="fileUrl" :src="fileUrl" class="preview-iframe" frameborder="0"></iframe>
		<!-- 加载状态 -->
		<div v-if="loading" class="loading-overlay">
			<a-spin size="large" />
			<div>加载预览中...</div>
		</div>
	</div>
</template>

<script setup>
	import { computed, ref, onMounted } from 'vue'
	import { message } from 'ant-design-vue'

	const props = defineProps({
		fileUrl: {
			type: String,
			required: true
		},
		fileName: {
			type: String,
			default: ''
		},
		fileType: {
			type: String,
			default: ''
		},
		// 文件预览服务基础URL
		previewServiceUrl: {
			type: String,
			default: 'https://view.officeapps.live.com/op/embed.aspx'
		}
	})

	const loading = ref(false)
	const officeUrl = ref('')

	// // 获取文件类型
	// const fileType = computed(() => {
	// 	if (!props.fileName) return ''
	// 	const ext = props.fileName.split('.').pop().toLowerCase()
	// 	return ext
	// })

	// 判断文件类型
	const isPDF = computed(() => props.fileType === 'pdf')
	const isWord = computed(() => ['doc', 'docx'].includes(props.fileType))
	const isExcel = computed(() => ['xls', 'xlsx'].includes(props.fileType))
	const isPPT = computed(() => ['ppt', 'pptx'].includes(props.fileType))
	const isOffice = computed(() => isWord.value || isExcel.value || isPPT.value)

	// 处理文件URL
	const fullFileUrl = computed(() => {
		// 如果是相对路径，转换为绝对路径
		if (!props.fileUrl.startsWith('http') && !props.fileUrl.startsWith('/')) {
			return `${window.location.origin}/${props.fileUrl}`
		}
		return props.fileUrl
	})

	// PDF预览URL
	const pdfUrl = computed(() => {
		if (!isPDF.value) return null
		// 使用Google Docs Viewer进行PDF预览
		// return `https://docs.google.com/viewer?url=${encodeURIComponent(fullFileUrl.value)}&embedded=true`
		return props.fileUrl
	})

	// 初始化Office预览
	const initOfficePreview = () => {
		if (!isOffice.value) return

		// 使用微软Office Online Viewer预览Word/Excel/PPT
		officeUrl.value = `${props.previewServiceUrl}?src=${encodeURIComponent(fullFileUrl.value)}`
	}

	// 下载文件
	const handleDownload = () => {
		const link = document.createElement('a')
		link.href = props.fileUrl
		link.download = props.fileName || `download.${fileType.value}`
		document.body.appendChild(link)
		link.click()
		document.body.removeChild(link)
		message.success('开始下载文件')
	}

	onMounted(() => {
		loading.value = true
		initOfficePreview()
		loading.value = false
	})
</script>

<style scoped>
	.file-preview-container {
		position: relative;
		width: 100%;
		height: 100%;
		/* min-height: 500px; */
		border: 1px solid #e8e8e8;
		border-radius: 4px;
		overflow: hidden;
	}

	.preview-iframe {
		width: 100%;
		height: 100%;
		min-height: 500px;
		border: none;
	}

	.pdf-preview,
	.office-preview {
		width: 100%;
		height: 100%;
	}

	.no-preview,
	.unsupported-file {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 300px;
		color: #999;
		font-size: 16px;
		gap: 16px;
	}

	.loading-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.8);
		z-index: 10;
	}
</style>
