<template>
	<view class="content">
		<view class="inviteFriendsModel" id="pagePoster">
			<!-- <image class="init_image" :src="pageBg" mode=""></image>
			<image :src="pageCode" class="imgCode" mode=""></image> -->
			<canvas canvas-id="shareCanvas" class="canvas" bindlongpress="saveImg" catchtouchmove="true"
				:style="{height: canvasHeight+'px',width:canvasWidth+'px'}">
			</canvas>
		</view>
		<view class="inviteFriendsBottom">
			<u-button type="primary" class="shareBtn" :plain="true" open-type="share" shape="circle" color="#D3195E"
				text="分享给好友"></u-button>
			<u-button type="primary" class="saveBtn" @click="bcimg" style="margin-left:30rpx;" shape="circle"
				color="#D3195E" text="保存"></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageBg: '',
				pageCode: '',
				pageData: {
					post_img: '',
					codePng: null
				},
				ctx: null,
				windowObj: {},
				page_data: {
					first_post_img: ""
				},
				canvasWidth: 300,
				canvasHeight: 500,
				inviteCode: '',
				userInfo: null
			}
		},
		onLoad(option) {
			if (option.code || uni.getStorageSync('inviteCode')) {
				if (option.code) {
					uni.setStorageSync('inviteCode', option.code)
				}
				this.inviteCode = option.code || uni.getStorageSync('inviteCode')
			}
		},
		onReady() {
			this.ctx = uni.createCanvasContext('shareCanvas');
			this.getUserInfo();


		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/user-info', 'GET', {}).then(res => {
					console.log('请求成功');
					this.userInfo = res.data;
					this.applyinviteFriendsbg();
				}).catch(err => {
				})
			},
			saveHB() {
				// console.log('点击了图片')
				uni.previewImage({
					urls: this.hbUrl
				})
			},
			// 获取图片信息
			//获取图片的基本信息，即将网络图片转成本地图片，
			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					wx.getImageInfo({
						src,
						success: (res) => resolve(res),
						fail: (res) => reject(res)
					})
				});
			},
			//分享相片
			sharePicture() {
				uni.share({
					provider: 'weixin',
					imageUrl: this.hbUrl,
					type: 2,
					scene: 'WXSceneTimeline'
				})
			},
			onShareAppMessage(e) {
				if (e.from === 'button') {
					return {
						title: '爱美约邀请你！',
						path: `/pageSub-index/pages/inviteFriends/inviteFriends?code=${this.userInfo.user_id}`,
						imageUrl: this.page_data.first_post_img,
						success() {
							uni.showToast({
								title: '分享成功'
							})
						},
						fail() {
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							})
						}
					}
				}
			},
			applyinviteFriendsbg() {
				this.$request('/get-invite-bj', 'GET', {}).then(res => {
					console.log(res.data)
					this.pageBg = res.data.bj;
					this.applyinviteFriendscode()
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			applyinviteFriendscode() {
				this.$request('/qrCode', 'GET', {}).then(res => {
					console.log(res.data)
					this.pageCode = res.data.filepath;
					this.exportPost()
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			exportPost() {
				let _this = this
				uni.showLoading({
					title: '海报生成中'
				})
				//image是画布的底图，后期可以换成自己需要的
				let image = _this.pageBg
				//获取系统的基本信息，为后期的画布和底图适配宽高
				uni.getSystemInfo({
					success: function(res) {
						console.log(res)
						_this.windowObj = res
						Promise.all([_this.getImageInfo(image), _this.getImageInfo(_this.pageCode)])
							.then(res => {
								let arr = [{
										width: 300,
										height: 500
									},
									{
										width: 100,
										height: 100
									}
								]
								_this.ctx.drawImage(res[0].path, 0, 0, 300, 500);
								_this.ctx.drawImage(res[1].path, 100, 200, arr[1].width, arr[1].height);
								_this.ctx.draw(false, function() {
									wx.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: 300,
										height: 500,
										destWidth: _this.windowObj.windowWidth * 2,
										destHeight: _this.windowObj.windowHeight * 2,
										canvasId: 'shareCanvas',
										fileType: 'jpg', //设置导出图片的后缀名
										success: function(res) {
											// uni.showToast({
											// 	icon: 'success',
											// 	mask: true,
											// 	title: '绘制完成',
											// });
											uni.hideLoading()
											if (_this.inviteCode != '') {
												_this.$utils.user_share(_this
													.inviteCode);
											}
											_this.page_data.first_post_img = res
												.tempFilePath

										}
									})
								});
							})
					}
				})
			},
			bcimg() {
				let _this = this;
				//保存图片到本地
				uni.saveImageToPhotosAlbum({
					filePath: _this.page_data.first_post_img,
					success: function() {
						uni.showToast({
							title: '保存成功'
						})
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		// height: calc(100vh - 30rpx);
		overflow-y: scroll;
		padding-top: 30rpx;
		background: #ffffff;
	}

	.inviteFriendsModel {
		width: 300px;
		margin: 60rpx auto;
		height: 500px;
		border-radius: 20rpx;
		position: relative;
	}

	.imgCode {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		left: calc(50% - 100rpx);
		top: calc(50% - 100rpx);
	}

	.inviteFriendsBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 120rpx);
		padding: 60rpx;
		padding-top: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 30rpx;

		::v-deep .u-button {
			width: calc((100% - 15rpx) / 2);
		}

		.shareBtn {
			height: 88rpx;
			line-height: 88rpx;
		}

		.saveBtn {
			height: 88rpx;
			line-height: 88rpx;
		}
	}
</style>