<template>
	<view class="container">
		<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop
			:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
		<view class="poster-main">
			<image class="poster-main-img" src="https://oss.jimeigroup.cn/static/hunjie-bg.png"
				mode="widthFix"></image>
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" mode="widthFix"></image>
					<view class="info">
						<view class="nickname">
							{{userInfo.nickname}}
						</view>
						<view class="phone">
							{{userInfo.phone}}
						</view>
					</view>
				</view>
			<image class="qrcode" :src="QrcodeUrl">
		</view>

		<view class="poster-footer">
			<!-- <view class="poster-footer-title">
				— 立即分享 —
			</view> -->
			<view class="poster-footer-btns">
				<button open-type="share" class="poster-footer-btn u-reset-button">
					<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-share.png" mode="aspectFill">
					</image>
					<view class="poster-footer-btn-text">分享微信好友</view>
				</button>
				<view @click="drawPoster" class="poster-footer-btn">
					<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-save.png" mode="aspectFill"></image>
					<view class="poster-footer-btn-text">保存相册分享</view>
				</view>
			</view>

		</view>
		<!-- 海报绘制  -->
		<l-painter custom-style="position: fixed;left: 200%;" ref="painter" @success="drawSuccess"
			css="height: 1067px; width: 750px;" file-type="jpg">
			<template>
				<l-painter-view
					css="background-image: url(https://oss.jimeigroup.cn/static/post-bg3.jpg); width: 750px;height: 1067px;">
					<l-painter-view
						css="background-image: url(https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/hunjie-bg.png); width: 750px;height: 1067px;position:relative;">
						<!-- 用户头像、昵称 -->
						<l-painter-view style="display: flex;" css="display: flex;align-items: center;position: absolute;left: 150px; bottom: 150px;">
							<l-painter-image
								css="width: 75px;height: 75px;border-radius: 50%"
								:src="userInfo.avatar"></l-painter-image>
							<l-painter-view css="margin-left: 20px;">
								<l-painter-view css="height: 40px;line-height: 40px;"><l-painter-text :text="userInfo.nickname" css="font-size: 28px" style=";"></l-painter-text></l-painter-view>
								<l-painter-view css="height: 40px;line-height: 40px;"> <l-painter-text :text="userInfo.phone"  css="font-size: 24px"></l-painter-text></l-painter-view>
							</l-painter-view>
						</l-painter-view>
						<!-- 二维码 -->
						<l-painter-image
							css="position: absolute;right: 150px;bottom: 150px;width: 160px;height: 160px;"
							:src="QrcodeUrl"></l-painter-image>
							
					</l-painter-view>
				</l-painter-view>
			</template>
		</l-painter>
	</view>
</template>

<script>
	import * as WxLoginApi from '@/api/wx-login.js'
	import store from '@/store/index.js'
	import storage from '@/utils/storage'

	const userId = uni.getStorageSync('userId')
	const userInfo = uni.getStorageSync('userInfo')

	export default {
		data() {
			return {
				userId,
				userInfo,
				form: {},
				showQrcode: false,
				QrcodeUrl: '',
				ranking: [{
					avatar: '',
					nickname: '别来无恙',
					value: '共奖励5012.00元'
				}],
				posterUrl: ''
			}
		},
		onLoad() {
			this.getQrCode()
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '爱尚家',
				path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
			}
		},
		onShareAppMessage() {
			return {
				title: '爱尚家找房',
				path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
				imageUrl: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/mp-share.png'
			}
		},
		methods: {
			drawPoster() {
				this.$refs.painter.canvasToTempFilePath({
					// x: 0,
					// y: 170,
					// with: 750,
					// height: 1067,
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						// console.log(res.tempFilePath);
						// uni.previewImage({
						// 	urls: [res.tempFilePath]
						// })
						// 非H5 保存到相册
						uni.saveImageToPhotosAlbum({
						    filePath: res.tempFilePath,
						    success: function () {
						        uni.showToast({
						        	title: '已保存相册'
						        })
						    }
						});
					},
				});
			},
			drawSuccess(e) {
				this.posterUrl = e
				// uni.previewImage({
				// 	urls: [e]
				// })
			},
			onShowQrcode() {
				this.showQrcode = true
				this.getQrCode()
			},
			// 获取微信小程序码
			getQrCode() {
				const app = this

				WxLoginApi.getWxQrCodeFile().then(res => {
					app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
					// app.showQrcode = true
					storage.set('QrcodeUrl', res.message)
				}).catch(err => {
					app.$error(err.message)
				})
			},
			onShareQuan() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 2,
					imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			onShareWeixin() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
					title: '爱尚家',
					miniProgram: {
						id: 'gh_39f1f8019c3f',
						path: 'pages/index/index',
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			onShareAlbum() {
				// uni.saveImageToPhotosAlbum({
				// 	filePath: res.tempFilePaths[0],
				// 	success: function () {
				// 		console.log('save success');
				// 	}
				// });
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存相册分享",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {

				let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功，请从相册选择再分享',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								uni.hideLoading();
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						uni.hideLoading();
						//console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #730070;
	}
</style>
<style lang="scss" scoped>
	
	.container {
		background-image: url(https://oss.jimeigroup.cn/static/login-bg01.png);
		background-repeat: no-repeat;
		min-height: 100vh;
		width: 750rpx;
		background-size: 100%;
	}

	.poster-main {
		margin: 170rpx auto 0;
		display: flex;
		justify-content: center;
		position: relative;

		.qrcode {
			position: absolute;
			right: 150rpx;
			bottom: 150rpx;
			width: 160rpx;
			height: 160rpx;

		}

		.poster-main-img {
			width: 750rpx;
		}
	}

	.poster-footer {
		color: #FFFFFF;
	}

	.poster-footer-title {
		// height: 80rpx;
		font-size: 32rpx;
		// font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
		// line-height: 80rpx;
	}

	.poster-footer-btns {
		display: flex;
		justify-content: space-between;
		width: 600rpx;
		margin: 0 auto;
	}

	.poster-footer-btn {
		flex: 1;
		text-align: center;

		&-icon {
			width: 80rpx;
			height: 80rpx;
		}

		&-text {
			font-size: 28rpx;
		}
	}
	
	.user-info{
		position: absolute;
		left: 150rpx;
		bottom: 160rpx;
		display: flex;
		align-items: center;
		.avatar{
			width: 75rpx;
			height: 75rpx;
			border-radius: 50%;
		}
		.info {
			margin-left: 20rpx;
		}
		.nickname{
			font-size: 28rpx;
			height: 40rpx;
			line-height: 40rpx;
		}
		.phone {
			font-size: 24rpx;
			height: 40rpx;
			line-height: 40rpx;
		}
	}
</style>