<template>
	<div class="sharePopDivAll">
		<div class="shareContentDivAll" v-show="isShowDiv">
			<div>
				<div class="titleZsDiv"></div>
				<div><div class="backBtnDiv" @click="backClick('1')"></div></div>

				<div v-if="cavansUrl" class="shareContentDiv shareContentDiv0"><img :src="cavansUrl" /></div>

				<div class="shareContentDivDiv" ref="saveWishRef">
					<div class="wishImageDiv" ref="saveWishRef1" :style="'backgroundImage:url(' + wishImageUrl1 + ')'"></div>
					<div class="codeDiv">
						<div class="codeImage" ref="saveWishRef2" :style="'backgroundImage:url(' + qrCodeImageUrl + ')'"></div>
						<!-- <img class="codeImage" :src="qrCodeImageUrl" />-->
					</div>
					<div class="codePrompt">长按图片保存 分享给好友</div>
				</div>

				<canvas id="canvasId" ref="postBg" class="shareContentDiv shareContentDivCavans" width="750" height="1334" hidden></canvas>
				<!-- <div class="codePrompt">长按图片保存 分享给好友</div> -->
			</div>

			<div class="bottom-btn">
				<div class="backBtn1" @click="backClick('2')"></div>
				<div class="joinDrawBtn" @click="drawClick()"></div>
			</div>
		</div>
	</div>
</template>

<script>
import AlloyFinger from 'alloyfinger';
var QRCode = require('qrcode');
import apis from '../api/api.js';
let { uploadImage, draw } = apis;

export default {
	props: ['chance', 'christmasCardId', 'uid', 'sourse'],
	data() {
		return {
			isShowDiv:false,//是否显示页面样式
			wishImageUrl1: '', //生成的心愿袜样式图片
			qrCodeImageUrl: '', //二维码图片

			cavansUrl: '' //canvans生成的图片
		};
	},
	created() {
		this.wishImageUrl1 = sessionStorage.getItem('wishImageUrl');
		console.log(this.wishImageUrl1, 'sourse');
	},
	mounted() {
		// this.getData();
		this.initData();
	},
	methods: {
		initData() {
			this.$toast.loading({
				duration: 0, // 持续展示 toast
				message: "生成图片...",
				forbidClick: true
			});
			
			let that = this;
			let qrCodeUrl = sessionStorage.getItem('oldUrl') + '&christmasCardId=' + this.christmasCardId + '&shareUserId=' + this.uid;
			QRCode.toDataURL(qrCodeUrl, function(err, url) {
				that.qrCodeImageUrl = url;
			});
			let canvas = this.$refs.postBg; //document.createElement('canvas');

			//canvas画图
			const postCtx = canvas.getContext('2d');

			const postbgAll = new Image(); //背景图
			const postbg = new Image(); //绘制信封
			const postqr = new Image(); //贺卡图
			const postqrCode = new Image(); //二维码

			postCtx.clearRect(0, 0, 750, 750);

			postbgAll.crossOrigin = 'Anonymous'; // 解决Canvas.toDataURL 图片跨域问题
			postbgAll.src = '//img10.360buyimg.com/imgzone/jfs/t1/221918/11/20677/176826/638da63aE7da0c41f/c6db593aa94eb2bb.png';
			postbgAll.onload = () => {
				//绘制背景图
				console.log(postbgAll.width, 'postbgAll.width');
				console.log(postbgAll.height, 'postbgAll.height');

				postCtx.drawImage(postbgAll, 0, 0, postbgAll.width, postbgAll.height);
				
				postbg.src = '//img10.360buyimg.com/imgzone/jfs/t1/186457/35/30668/38291/637c7d34E8192a2a1/f0cbf3fd939b2d7c.png';
			
			};

			// postCtx.fill();

			postbg.crossOrigin = 'Anonymous'; // 解决Canvas.toDataURL 图片跨域问题
			postbg.onload = () => {
				//绘制信封
				console.log(postbg.width, 'postbg.width绘制信封');
				console.log(postbg.height, 'postbg.height绘制信封');
				
				let imgX = (canvas.width - 646) / 2;

				postCtx.drawImage(postbg, imgX, 336, postbg.width, postbg.height);
				if (that.wishImageUrl1) {
					postqr.src = that.wishImageUrl1;
				}
			};

			postqr.crossOrigin = 'Anonymous'; // 解决Canvas.toDataURL 图片跨域问题
			postqr.onload = () => {
				//绘制贺卡
				let imgX = (canvas.width - 480) / 2;

				postCtx.drawImage(postqr, imgX, 394, 480, 330);
				if (that.qrCodeImageUrl) {
					postqrCode.src = that.qrCodeImageUrl;
				}
			};

			postqrCode.crossOrigin = 'Anonymous'; // 解决Canvas.toDataURL 图片跨域问题
			postqrCode.onload = () => {
				//绘制二维码
				let imgX = (canvas.width - postqrCode.width) / 2;
				let imgY = (canvas.height - postqrCode.height) / 2;
				//绘制二维码背景图
				postCtx.fillStyle = '#ffebba';
				postCtx.fillRect(imgX - 22, 760, postqrCode.width + 44, postqrCode.height + 44);

				postCtx.drawImage(postqrCode, imgX, 782, postqrCode.width, postqrCode.height);

				postCtx.font = '24px Georgia';
				postCtx.fillStyle = '#000000';
				//剧中
				postCtx.textAlign = 'center';
				postCtx.textBaseline = 'middle';

				let text1 = '您有一份圣诞心愿祝福请签收';
				var textWidth = postCtx.measureText(text1).width;
				var canvasWidth = canvas.width;
				var xPosition = canvasWidth / 2; //- textWidth / 2
				postCtx.fillText(text1, xPosition, 1080); //实心文本
				// console.log(xPosition, 'xPosition');

				let text2 = '使用京东APP扫码查看噢~';
				var textWidth2 = postCtx.measureText(text2).width;
				var canvasWidth2 = canvas.width;
				var xPosition2 = canvasWidth / 2; //- textWidth / 2
				postCtx.fillText(text2, xPosition2, 1110); //实心文本

				that.cavansUrl = canvas.toDataURL('image/png');
				that.$toast.clear();
				that.isShowDiv = true;
			};
		},

		//返回再次制作 1返回按钮 2再次制作
		backClick(type) {
			// console.log(this.chance, 'this.chance');
			this.chance = sessionStorage.getItem('chance');
			if (type == '1') {
				if (this.sourse == 'myWish1') {
					this.$emit('closePop', '25');
				} else if (this.sourse == 'myWish2') {
					this.$emit('closePop', '26');
				} else {
					this.$emit('closePop', '6');
				}
			} else {
				if (this.chance <= 0) {
					this.$emit('closePop', '6');
				} else {
					this.$emit('closePop', '5');
				}
			}
		},
		// 抽奖
		drawClick() {
			this.$emit('closePop', '17');
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.sharePopDivAll {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	.shareContentDivAll {
		display: flex;
		flex-direction: column;
		position: relative;
		.backBtnDiv {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/202575/30/26163/6636/637c44e9Ee6738ef7/26e693b49cf4269f.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 0.94rem;
			height: 0.94rem;
			position: absolute;
			top: -0.6rem;
			left: 0.2rem;
			z-index: 3;
		}
		.titleZsDiv {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/121813/22/34178/61256/637c7cefE4616dda9/6934711bbd6a2731.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 7.5rem;
			height: 3.38rem;
			margin-top: -2rem;
			position: relative;
			z-index: 1;
		}

		.shareContentDiv0 {
			// margin-left: calc(50% - 6.46rem / 2);
			position: fixed;
			top: 0;
			bottom: 0;
			width: 7.5rem;
			height: 100%;
			opacity: 0;
			z-index: 2;
			min-height: 100vh;
			// margin-top: -1.6rem !important;
		}
		.shareContentDivDiv {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/186457/35/30668/38291/637c7d34E8192a2a1/f0cbf3fd939b2d7c.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 6.46rem;
			height: 8.07rem;
			margin-left: calc(50% - 6.46rem / 2);
			margin-top: -0.8rem;
			background-color: transparent;
			padding-top: 0.4rem;
			.wishImageDiv {
				height: 3.3rem;
				width: 4.8rem;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				// margin-top: 0.4rem;
				margin-left: calc(50% - 4.8rem / 2);
			}
			.codeDiv {
				width: 3.12rem;
				height: 3.12rem;
				border-radius: 0.25rem;
				background: #ffebba;
				margin-left: calc(50% - 3.12rem / 2);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 0.3rem;
				.codeImage {
					width: 2.72rem;
					height: 2.72rem;
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}
		}
		.shareContentDiv {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/186457/35/30668/38291/637c7d34E8192a2a1/f0cbf3fd939b2d7c.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// width: 6.46rem;
			// height: 8.07rem;
			// margin-left: calc(50% - 6.46rem / 2);
			margin-top: -0.8rem;
			background-color: transparent;
		}
		.codePrompt {
			font-size: 0.2rem;
			line-height: 0.2rem;
			color: #0b0305;
			position: relative;
			// margin-top: -0.68rem;
		}
		.shareContentDiv1 {
			width: 6.46rem;
			height: 8.07rem;
			margin-left: calc(50% - 6.46rem / 2);
			.shareWishImage {
				width: 6.46rem;
				height: 8.07rem;
			}
		}
		.bottom-btn {
			display: flex;
			width: 100%;
			justify-content: center;
			margin-top: 1.14rem;
			position: absolute;
			z-index: 2;
			bottom: -1.2rem !important;

			.backBtn1 {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/56550/26/21639/7478/637c8201E0e5b323f/f90248031f267bfa.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 2.89rem;
				height: 0.73rem;
				margin-right: 0.15rem;
			}
			.joinDrawBtn {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/179548/11/30268/7832/637c8201E1492f586/19db48357a7e9ab1.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 2.89rem;
				height: 0.73rem;
				margin-left: 0.15rem;
			}
		}
	}
}
</style>
