<template>
	<view ref="hammerContainer">
		<view ref="pdfContainer"></view>
	</view>
</template>

<script>
	import props from './props.js';
	const Hammer = require("./lib/hammer.min.js");
	const PDFJS = require("./lib/pdf.js");
	PDFJS.GlobalWorkerOptions.workerSrc = require("./lib/pdf.worker.entry.js");
	export default {
		mixins: [props],
		data() {
			return {
				// canvas 元素集合
				canvasArr: [],
				
				// pdf盒子容器元素
				pdfContainer: null,
				
				preScale: null,
				
				time: null
			}
		},
		watch: {
			scale(){
				clearTimeout(this.time)
				this.canvasArr.forEach(item => {
					const desiredWidth = Math.floor(this.pdfContainer.offsetWidth * this.scale) 
					const viewport = item.page.getViewport({ scale: 1 })
					const scale = desiredWidth / viewport.width
					const scaledViewport = item.page.getViewport({ scale: scale })
					item.canvas.style.width = Math.floor(scaledViewport.width * this.scale) + "px"
					item.canvas.style.height =  Math.floor(scaledViewport.height * this.scale) + "px"
				})
				this.durtion > 0 && (this.time = setTimeout(this.render, this.durtion))
			}
		},
		onUnload() {
			clearTimeout(this.time)
		},
		methods: {
			render(){
				this.canvasArr.forEach(item => {
					const desiredWidth = Math.floor(this.pdfContainer.offsetWidth * this.scale) 
					const viewport = item.page.getViewport({ scale: 1 })
					const scale = desiredWidth / viewport.width
					const scaledViewport = item.page.getViewport({ scale: scale })
					
					const outputScale = window.devicePixelRatio || 1
					const context = item.canvas.getContext('2d')
						
					item.canvas.width = Math.floor(scaledViewport.width * outputScale)
					item.canvas.height = Math.floor(scaledViewport.height * outputScale)
					item.canvas.style.width = Math.floor(scaledViewport.width * this.scale) + "px"
					item.canvas.style.height =  Math.floor(scaledViewport.height * this.scale) + "px"
					
					// 数据渲染到canvas画布上
					item.page.render({
						canvasContext: context,
						viewport: scaledViewport,
						transform: outputScale != 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null
					})
				})
				
			}
		},
		async mounted() {
			const hammerContainer = this.$refs.hammerContainer.$el
			const hammertime = new Hammer(hammerContainer, {touchAction: 'pan-x pan-y'});
			hammertime.get('pinch').set({ enable: true });
			hammertime.on('pinch pinchstart pinchmove pinchend pinchcancel pinchin pinchout', e => {
				// 多点触控时两手指距离
				if(!this.preScale){
					this.preScale = this.scale
				}
				if(e.type == 'pinchend'){
					this.preScale = this.scale
					return;
				}
				const newScale = (this.preScale * e.scale).toFixed(3)
				this.$emit("update:scale", newScale)
			})


			this.pdfContainer = this.$refs.pdfContainer.$el
			// data是一个ArrayBuffer格式，也是一个buffer流的数据
			const pdfDoc = await PDFJS.getDocument(this.src).promise
			const fragment = document.createDocumentFragment()
			const numPages = pdfDoc.numPages // pdf的总页数
			for(let i = 1; i <= numPages; i++){
				const canvas = document.createElement('canvas')
				
				
				this.enablePreviewImage && (canvas.onclick = e => {
					const src = canvas.toDataURL("image/png");
					uni.previewImage({
						urls: [src]
					})
					e.preventDefault()
				})
				
				const page = await pdfDoc.getPage(i)
				fragment.appendChild(canvas)
				this.canvasArr.push({
					canvas,
					page
				})
			}
			
			this.pdfContainer.appendChild(fragment)
			
			// 渲染pdf
			this.render()
		}
	}
</script>

