<template>
	<view>
		<!-- 当父组件传递的prop属性数据发生变化的时候 ,生成海报图片-->
		<view :prop="domId" :change:prop="html2canvas.emitData" class="html2canvas">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import { base64ToPath } from '@/utils/image-tools.js';
	export default {
		props: {
			domId: {
				type: String,
				required: true
			}
		},
		mounted:function(){
			console.log("组件加载完成");	
		},
		
		methods: {
			// 接收renderjs发回的数据
			async receiveRenderData(imgData) {
				let posterHeight=imgData.height;
				let posterWidth=imgData.width;
				let imgPath =await base64ToPath(imgData.imgVal, '.jpeg');
				this.$emit('renderFinish', {"posterPath":imgPath,"posterHeight":posterHeight,"posterWidth":posterWidth});
				uni.hideLoading();
			},
			showLoading() {
				uni.showLoading({
					title: "正在生成导出",
					icon: "none",
					mask: true,
					duration: 3000
				})
			},
			hideLoading() {
				uni.hideLoading();
			}
		}
	}
</script>


<script module="html2canvas" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
			}
		},
		mounted:function(){
			console.log("视图层渲染完成");
		},
		methods: {
			// 发送数据到逻辑层,下面这里最好是加一个settimeout延迟,因为主界面数据还没加载渲染完成
			emitData(domId) {
				this.$ownerInstance.callMethod('showLoading', true);
				const dom = document.getElementById('poster');
				console.log("dom",dom);
				let width= dom.offsetWidth;
				let height=dom.offsetHeight; 
				let windowHeight= uni.getSystemInfoSync().windowHeight;
				let windowWidth=uni.getSystemInfoSync().windowWidth;
				html2canvas(dom, {
					width:width,
					height:height,
					//scale:2.5, // 缩放倍数
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					x:0,
					y:0,
					windowWidth:windowWidth,
					windowHeight:windowHeight,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					let imgVal= canvas.toDataURL('image/png');
					this.$ownerInstance.callMethod('receiveRenderData',{imgVal:imgVal,height:height,width:width});
				});
			}
		}
	};
</script>


<style lang="scss">

</style>
