<template>
	<view class="container-wrap">
		<view class="flex justify-start align-center text-333" style="width: 100%;"
			:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
			<view class="header-title">
				<view class="cuIcon-back header-left" @click="handleJump" data-type="BACK"></view>
				<view class="header-center text-333">海报</view>
			</view>
		</view>
		<image class="canvas-img" :src="canvasImg" mode="widthFix"></image>
		<!-- <view class="content-wrap flex flex-direction align-center justify-center">
			<image class="logo" src="/static/logo.png" mode="widthFix"></image>
			<image class="avatar" :src="userInfo.head_img" mode="widthFix"></image>
			<view class="name text-lg text-333 margin-top-sm">{{userInfo.user_nickname}}</view>
			<view class="code text-df text-333 margin-top-sm">{{ i18n['邀请码'] }}：{{userInfo.invite_code}}</view>
			<image class="code-img" :src="userInfo.qrcode" mode="widthFix"></image>
			<view class="desc text-df text-333 margin-top-sm">{{ i18n['扫码下载，即享新世界'] }}</view>
			<view class="app-name text-sm text-999 margin-top-sm">{{ i18n['来啰外卖'] }}</view>
		</view> -->
		<view class="share-wrap flex align-center justify-center">
			<!-- #ifndef MP-WEIXIN -->
			<!-- <view @click="share(1)" class="item flex-sub flex flex-direction justify-center align-center ">
				<image src="../static/1.png" mode="widthFix"></image>
				<text class="text-sm text-333">{{ i18n['微信'] }}</text>
			</view>
			<view @click="share(2)" class="item flex-sub flex flex-direction justify-center align-center">
				<image src="../static/2.png" mode="widthFix"></image>
				<text class="text-sm text-333">{{ i18n['朋友圈'] }}</text>
			</view> -->
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- 	<button open-type="share" class="item flex-sub flex flex-direction justify-center align-center ">
				<image src="../static/1.png" mode="widthFix"></image>
				<text class="text-sm text-333">{{ i18n['微信'] }}</text>
			</button> -->
			<!-- #endif -->
			<view @click="savaImg" class="item flex-sub flex flex-direction justify-center align-center">
				<image src="../static/3.png" mode="widthFix"></image>
				<text class="text-sm text-333">保存图片</text>
			</view>
		</view>
		<canvas
			style="width: 504px; height: 700px; background-color: #fff;  position: fixed; top: -10000px; left: -10000px;"
			canvas-id="canvas" id="canvas"></canvas>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				userInfo: null,
				canvasImg: null
			};
		},
		/**
		 * @param {Object} options 入参
		 */
		onLoad(options) {
			this.getMyInviteData();


		},
		methods: {
			async getPictureInformation(url) {
				// let downLoadImgInfo = await uni.downloadFile({
				//   url: url
				// });
				// console.log(downLoadImgInfo[1].tempFilePath);
				let imgInfo = await uni.getImageInfo({
					src: url
				})
				console.log(imgInfo[1]);
				return imgInfo[1]
			},
			async createPoster1() {
				const that = this;
				let logo = '/static/logo.png'
				var context = uni.createCanvasContext('canvas', this)
				context.setFillStyle('white')
				context.fillRect(0, 0, 504, 818)
				// 绘制圆角矩形
				context.save();
				context.beginPath();
				context.arc(66, 66, 34, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
				context.closePath();
				context.clip();


				// 绘制图片
				context.drawImage(logo, 32, 32, 68, 68);

				context.restore(); // 恢复之前保存的绘图上下文状态
				// 绘制圆角矩形
				context.save();
				context.beginPath();
				context.arc(252, 130, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
				// 　　　　 context.setStrokeStyle('#333333')
				// 　　　　 context.stroke()
				context.closePath();
				context.clip();
				console.log(369);
				let imageResult = await this.getPictureInformation(this.userInfo.avatar)
				console.log(369);
				// uni.getImageInfo({
				// 	src: this.storeLogo,
				// 	success: function (image) {
				// 		console.log(image);

				// 	}
				// });
				console.log(imageResult.path);
				context.drawImage(imageResult.path, 204, 82, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
				console.log(368);
				// context.drawImage(this.userInfo.head_img, 204, 82, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200

				context.restore(); // 恢复之前保存的绘图上下文状态

				context.setFillStyle('#333') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 32px 微软雅黑'; // 字体样式
				context.fillText(this.userInfo.nickname, 252, 225)

				context.setFillStyle('#333') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 28px 微软雅黑'; // 字体样式
				context.fillText('邀请码' + ':' + this.userInfo.invite_code, 252, 286)
				console.log(369);
				let imageResult1 = await this.getPictureInformation(this.userInfo.invite_url)
				console.log(123);
				// uni.getImageInfo({
				// 	src: this.storeLogo,
				// 	success: function (image) {
				// 		console.log(image);

				// 	}
				// });
				context.drawImage(imageResult1.path, 92, 330, 320,
				320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200

				// #ifndef MP-WEIXIN
				// context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
				// #endif

				context.setFillStyle('#333') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 28px 微软雅黑'; // 字体样式
				context.fillText('扫码下载，即享新世界', 252, 703)

				context.setFillStyle('#999') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 24px 微软雅黑'; // 字体样式
				context.fillText('萬家商超', 252, 760)
				context.draw()
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'canvas',
						success: res => {
							console.log(res.tempFilePath);
							that.canvasImg = res.tempFilePath
						},
						fail: err => {
							console.log(err);
						}
					});
				}, 300);
			},
			async createPoster() {
				const that = this;
				let logo = '/static/logo.png'
				var context = uni.createCanvasContext('canvas', this)
				let imageResult11 = await this.getPictureInformation(
					'https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/invite_bg.png')
				context.drawImage(imageResult11.path, 0, 0, 504, 700); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200

				let imageResult111 = await this.getPictureInformation(
					'https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/153.png')
				context.drawImage(imageResult111.path, 32, 32, 440,
				500); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200

				// 绘制圆角矩形
				// context.save();
				// context.beginPath();
				// context.arc(252, 90, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
				// context.closePath();
				// context.clip();
				// let imageResult = await this.getPictureInformation(this.userInfo.avatar)
				// console.log(imageResult.path);
				// context.drawImage(imageResult.path, 204, 42, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
				// context.restore(); // 恢复之前保存的绘图上下文状态

				context.setFillStyle('#fff') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 28px 微软雅黑'; // 字体样式
				// context.fillText('邀请人' + ':' + this.userInfo.nickname, 252, 405)
				context.fillText(this.userInfo.nickname, 252, 445)

				context.setFillStyle('#333') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 28px 微软雅黑'; // 字体样式
				context.fillText('邀请码' + ':' + this.userInfo.invite_code, 252, 344)
				let imageResult1 = await this.getPictureInformation(this.userInfo.invite_url)
				context.drawImage(imageResult1.path, 132, 64, 240,
				240); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200

				// #ifndef MP-WEIXIN
				// context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
				// #endif

				context.setFillStyle('#fff') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 28px 微软雅黑'; // 字体样式
				context.fillText('扫码下载，即享新世界', 252, 583)

				context.setFillStyle('#fff') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 24px 微软雅黑'; // 字体样式
				context.fillText('萬家商超', 252, 640)
				context.draw()
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'canvas',
						success: res => {
							console.log(res.tempFilePath);
							that.canvasImg = res.tempFilePath
						},
						fail: err => {
							console.log(err);
						}
					});
				}, 300);
			},
			getMyInviteData() {
				console.log(123)
				this.$api.post(global.apiUrls.post5c78c4772da97).then(res => {
					console.log(123)
					console.log('res=', res.data.data)
					if (res.data.code == 1) {
						this.userInfo = res.data.data
						this.createPoster()
					}
				})
			},
			savaImg() {
				let that = this;
				let url = this.userInfo.invite_url;
				console.log('长按了', url);
				uni.saveImageToPhotosAlbum({
					filePath: this.canvasImg,
					success: res => {
						console.log(res);
						this.$message.info('已保存到相册')
					},
					fail: err => {
						console.log(err);
					}
				});
				// uni.getImageInfo({
				//   src: url,
				//   success: function(image) {
				//     console.log('图片信息：', JSON.stringify(image));
				//     uni.saveImageToPhotosAlbum({
				//       filePath: image.path,
				//       success: function() {
				//         console.log('save success');
				//         that.$message.info(that.i18n['已保存到相册'])
				//       }
				//     });
				//   }
				// });
			},
			share(type) {
				if (type == 1) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.canvasImg,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 2,
						imageUrl: this.canvasImg,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},
		}
	};
</script>

<style lang="scss">
	.container-wrap {
		width: 100%;
		min-height: 100vh;
		background-image: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/code_bg.png);
		// background-color: #fff;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.content-wrap {
		margin: 40rpx auto;
		width: 504rpx;
		height: 818rpx;
		background-color: #fff;
		border-radius: 24rpx;
		position: relative;

		.logo {
			position: absolute;
			left: 32rpx;
			top: 32rpx;
			border-radius: 16rpx;
			width: 68rpx;
			height: 68rpx;
			z-index: 100;
		}

		.avatar {
			margin-top: 76rpx;
			width: 96rpx;
			height: 96rpx;
			border-radius: 48rpx;
		}

		.code-img {
			margin-top: 24rpx;
			width: 300rpx;
			height: 300rpx;
		}
	}

	//头部 start
	.header-title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;

		.header-left {
			font-size: 42rpx;
		}

		.header-center {
			text-align: center;
			font-size: 36rpx;
			font-family: 'msgothic' !important;
			font-weight: 500;
			letter-spacing: 1rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		// view {
		// 	width: 33.3%;
		// }
	}

	.header-right {
		font-size: 28rpx;
		font-family: 'msgothic' !important;
		color: #ffffff;
		letter-spacing: 1rpx;
		text-align: right;

		&.mp-wx {
			position: absolute;
			right: 32rpx;
			top: 10rpx;
		}
	}

	// .canvas-img {
	//   margin: 120rpx auto;
	//   display: block;
	//   width: 580rpx;
	//   height: 920rpx;
	// }

	.share-wrap {
		position: fixed;
		bottom: 0;
		// margin-bottom: 60rpx;
		height: 260rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.share-wrap image {
		margin-bottom: 16rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.canvas-img {
		margin: 100rpx auto;
		display: block;
		width: 504rpx;
		height: 818rpx;
	}

	button::after {
		border: none;
	}

	button {
		background-color: #fff;
	}

	button:hover {
		background-color: #fff;
	}
</style>