<template>
	<div style="position: relative">
		<a-space class="go-back-button">
			<a-button :href="props.src" size="small" target="_blank">
				<template #icon><download-outlined /></template>
			</a-button>
			<a-button type="primary" size="small" @click="emit('goBack')">
				<template #icon><rollback-outlined /></template>
				返回
			</a-button>
		</a-space>
		<a-card :bordered="false" :body-style="{ padding: 0 }">
			<a-spin :spinning="loading">
				<vue-office-docx
					v-if="fileType === 'doc' || fileType === 'docx'"
					:src="props.src + '&token=' + tool.data.get('TOKEN')"
					class="xn-ht82"
					@rendered="renderedHandler"
				/>
				<vue-office-excel
					v-else-if="fileType === 'xls' || fileType === 'xlsx'"
					:src="props.src + '&token=' + tool.data.get('TOKEN')"
					class="xn-ht82"
					@rendered="renderedHandler"
					@error="errorHandler"
				/>
				<vue-pdf-embed
					v-else-if="fileType === 'pdf'"
					annotation-layer
					text-layer
					:source="props.src + '&token=' + tool.data.get('TOKEN')"
					@rendered="renderedHandler"
					@renderingFailed="errorHandler"
				/>
				<img
					v-else-if="
						fileType === 'png' ||
						fileType === 'jpg' ||
						fileType === 'gif' ||
						fileType === 'bmp' ||
						fileType === 'jpeg' ||
						fileType === 'ico' ||
						fileType === 'svg'
					"
					:src="props.src + '&token=' + tool.data.get('TOKEN')"
					class="xn-mwh"
				/>
				<a-result v-else status="warning" title="不支持预览的文件类型" />
			</a-spin>
		</a-card>
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import { message } from 'ant-design-vue'
	//引入VueOfficeDocx组件
	import VueOfficeDocx from '@vue-office/docx'
	//引入相关样式
	import '@vue-office/docx/lib/index.css'
	//引入VueOfficeExcel组件
	import VueOfficeExcel from '@vue-office/excel'
	//引入相关样式
	import '@vue-office/excel/lib/index.css'
	//引Pdf组件
	// 调用组件：https://github.com/hrynko/vue-pdf-embed
	import VuePdfEmbed from 'vue-pdf-embed'
	import 'vue-pdf-embed/dist/styles/annotationLayer.css'
	import 'vue-pdf-embed/dist/styles/textLayer.css'

	const loading = ref(false)
	const emit = defineEmits({ goBack: null })
	const props = defineProps({
		src: {
			type: String,
			default: '',
			required: true
		},
		// 文件类型
		fileType: {
			type: String,
			default: 'defaults',
			required: false
		}
	})
	const fileType = ref()
	watch(
		() => props.src,
		(newVal) => {
			if (newVal) {
				fileType.value = props.fileType.toLowerCase()
			}
		},
		{ immediate: true, deep: true }
	)
	watch(
		() => props.src,
		(newVal) => {
			if (newVal) {
				if (
					fileType.value === 'doc' ||
					fileType.value === 'docx' ||
					fileType.value === 'xls' ||
					fileType.value === 'xlsx' ||
					fileType.value === 'pdf'
				) {
					loading.value = true
				}
			}
		},
		{ immediate: true, deep: true }
	)
	// 渲染完成
	const renderedHandler = () => {
		loading.value = false
	}
	// 渲染失败
	const errorHandler = () => {
		message.warning('渲染失败，请尝试重新打开！')
	}
</script>

<style lang="less" scoped>
	.xn-mwh {
		max-width: 100%;
	}
	.xn-ht82 {
		height: 82vh;
	}
	.go-back-button {
		position: absolute;
		float: right;
		right: 0;
		z-index: 999;
	}
</style>
