<template>
	<view class="container">
		<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop placeholder
			:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
		<view class="bg-image"></view>
		<view class="content">
			<view style="display: flex;justify-content: center;position: relative;flex-direction: column;align-items: center;margin-top: 72rpx;height: 800rpx;" class="">
				<image  style="width: 640rpx;position: absolute; top: 0;" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/yaoqinghaoyouzhuanjiangli.png" mode="widthFix"></image>
				<image class="head-box" src="https://oss.jimeigroup.cn/static/poster-head21.png" mode="widthFix"></image>
				<view class="poster-btn">
					<view class="poster-wrapper">
						<view class="poster-desc">
							<view class="poster-desc-title">
								邀请好友奖励如下
							</view>
							<view class="poster-list">
								<view class="item">邀请<text class="b">注册用户</text>：获得好友充值的奖励</view>
								<view class="item">邀请<text class="b">普通会员</text>：获得好友充值的奖励</view>
								<view class="item">邀请<text class="b">尊享用户</text>：获得好友充值的奖励</view>
							</view>
						</view>
						<image @click="$push('sub_pages/user/poster/poster2')" class="btn-share" src="https://oss.jimeigroup.cn/static/haibaofenxiang.png" mode="widthFix"></image>
						<!-- <u-button text="海报分享" color="#ffffff"
							:customStyle="{color: '#000000',fontWeight: '600', marginBottom: '70rpx'}" :disabled="disabled"
							shape="circle" @click="$push('sub_pages/user/poster/poster2')"></u-button> -->
					</view>
				</view>
			</view>
			
			<view class="">
				<image class="rank-top" src="https://oss.jimeigroup.cn/static/yaoqinghaoyouzhuanjiangli2.png" mode="widthFix"></image>
				<view class="ranking">
					<!-- <view class="title">—— 排行榜 ——</view> -->
					<view class="list">
						<u-list height="600rpx" @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in ranking" :key="index">
								<view style="display: flex;justify-content: space-between; margin-top: 10rpx; padding: 20rpx; height: 50rpx;align-items: center;" class="cell">
									<view style="display: flex;align-items: center; line-height: 50rpx;" class="">
										<view v-if="index >= 3" style="margin-right: 22rpx;width: 64rpx;display: flex;justify-content: center;" class="">{{index + 1}}</view>
										<image v-if="index < 3" style="width: 64rpx; height: 64rpx;margin-right: 22rpx; padding-top: 20rpx;" :src="item.icon" mode="widthFix"></image>
										<u-avatar shape="circle" size="30" :src="item.avatar"></u-avatar>
										<view style="color: rgb(255, 235, 211);font-size: 28rpx; margin-left: 10rpx;" class="">{{item.nickname}}</view>
									</view>
									<view  style="color: rgb(255, 235, 211);font-size: 28rpx;" class="">
										共奖励<text style="color: rgb(242, 67, 116);">{{item.value}}</text>元
									</view>
								</view>
							</u-list-item>
						</u-list>
					</view>
				</view>
			</view>
			
		</view>
		<!-- <view class="form" @click="onShowQrcode">
			<view class="btn">

			</view>
		</view> -->
		<u-popup :show="showQrcode" mode="center" :round="10" @close="showQrcode = false">
			<view class="qrcode-box">
				<view class="poster">
					<image :src="posterUrl" mode="widthFix">
					
				</view>
				<view class="gap">立即分享</view>
				<view class="share">
					<view class="btn">
						<!-- <image src="../../../static/icon/share01.png" mode="widthFix"></image> -->
						<u-button @click="onSahreQuan" text="朋友圈" icon="https://file.wsdns.cn/20230710/447306d3788a4fcdb6c5a9c7b8d9147d.png" :plain="true" size="normal" :customStyle="{border: 'none'}" :hairline="false" open-type="share"></u-button>
					</view>
					<view class="btn">
						<u-button @click="onShareWeixin" text="微信好友" icon="https://file.wsdns.cn/20230710/ebb9586ef759415585db3bbc55574321.png" :plain="true" size="normal" :customStyle="{border: 'none'}" open-type="share"></u-button>
					</view>
					<view class="btn">
						<u-button @click="onShareAlbum" text="保存相册" icon="https://file.wsdns.cn/20230710/da05c38686b349debde3063f4203e20a.png" :plain="true" size="normal" :customStyle="{border: 'none'}"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 海报绘制  -->
		<l-painter custom-style="position: fixed; left: 200%" isCanvasToTempFilePath @success="drawSuccess" css="height: 732rpx; width: 580rpx;" file-type="png">
			<template v-if="userInfo && QrcodeUrl" >
				<l-painter-view
					css="height: 732rpx; width: 580rpx;borderRadius: 20rpx; backgroundColor: #fff; position: relative;"
				>
					<!-- 小程序码 -->
					<l-painter-image
				      src="https://oss.jimeigroup.cn/static/invite-head.png?x-oss-process=image/resize,w_1500/format,webp"
				      css="width: 580rpx; height: 632rpx; borderRadius: 20rpx 20rpx 0 0;"
				    />
					<l-painter-view
						css=" position: absolute; bottom: 110rpx;left:20rpx;"
					>	
						<l-painter-view>
							<l-painter-image
							  :src="QrcodeUrl"
							  css="width: 140rpx; height: 140rpx;"
							/>
						</l-painter-view>
						
						<l-painter-view
							css="width: 280rpx; height: 80rpx; display: flex;  align-items: center;"
						>
							<l-painter-image
							  :src="userInfo.avatar"
							  css="width: 40rpx; height: 40rpx; borderRadius:50%;margin-right: 20rpx;"
							/>
							<l-painter-view
								css="font-size: 26rpx; display: flex; flex-direction: column;"
							>
								<l-painter-text :text="userInfo.nickname" css="textAlign: left; color: #FFFFFF;"/>
								<!-- <l-painter-text :text="userInfo.mobile" css="textAlign: left; color: #999999;"/> -->
							</l-painter-view>
						</l-painter-view>
						
						
					</l-painter-view>
					
					<l-painter-view css="width: 100%;textAlign: center;height: 100rpx;line-height:100rpx;">
					 <l-painter-text
					      text="长按识别二维码"
					      css="textAlign: center; color: #000000;"
					    />
					</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: [{
					icon: 'https://oss.jimeigroup.cn/static/1.png',
					avatar: 'https://oss.jimeigroup.cn/20230724/204f1dd2920648b49703255daf51b494.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
					nickname: '茶色',
					value: '5142.00'
				},{
					icon: 'https://oss.jimeigroup.cn/static/2.png',
					avatar: 'https://oss.jimeigroup.cn/20230724/4fd091aca58f4dcface4e906e0a2d50f.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
					nickname: '李开心',
					value: '3006.12'
				},{
					icon: 'https://oss.jimeigroup.cn/static/3.png',
					avatar: 'https://oss.jimeigroup.cn/20230724/19898741661d443a9afb9fe83ab513cf.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
					nickname: 'Kris',
					value: '1982.06'
				},{
					avatar: 'https://oss.jimeigroup.cn/20230724/302bf7b247344c8dbac162eca421cf20.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
					nickname: '薄荷',
					value: '1306.60'
				},{
					avatar: 'https://oss.jimeigroup.cn/20230724/7fb23c8cabfc4588b91ecbf1087ffe0e.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
					nickname: '米兰',
					value: '1013.96'
				}],
				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://oss.jimeigroup.cn/static/mp-share.png'
			}
		},
		methods: {
			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 lang="scss" scoped>
	.bg-image{
		position: fixed;
		width: 750rpx;
		height: 100vh;
		background-image: url('https://oss.jimeigroup.cn/static/poster-bg21.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.content{
		z-index: 90;
	}
	.head-box{
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: 750rpx;
		top: -130rpx;
	}
	.rank-top{
		width: 634rpx;
		margin: 30rpx 58rpx;
	}
	.container {
	
		
		.poster-title {
			width: 750rpx;
			padding: 60rpx 0;
			text-align: center;
			font-family: FZZongYi;
			font-weight: 400;
			font-size: 70rpx;
			color: rgba(255, 255, 255, 1);
			font-style: normal;
			letter-spacing: 0px;
			line-height: 70rpx;
			text-decoration: none;
		}

		.poster-btn {
			width: 600rpx;
			margin: 20rpx auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			top: 150rpx;
			
			.poster-wrapper {
				color: #333333;
				width: 450rpx;
				height: 520rpx;
				display: flex;
				flex-direction: column;

				.poster-desc {
					

					.poster-desc-title {
						padding-top: 60rpx;
						padding-bottom: 30rpx;
						font-size: 44rpx;
						text-align: center;
						line-height: 40rpx;
						font-weight: bold;
					}

					.poster-list {
						text-align: center;
						font-size: 28rpx;
						line-height: 64rpx;
						.b{
							font-weight: bold;
						}
					}
				}
			}
			.btn-share{
				width: 200rpx;
				margin: 95rpx auto 0;
			}

			// width: 600rpx;
			// margin: auto;
			// background: url('https://file.wsdns.cn/20230710/b68c9d11ad744dc880217ee82af24f07.png');
			// background-repeat: no-repeat;
			// background-size: 100%;
		}

		.ranking {
			margin: 0 auto;
			width: 634rpx;
			height: 500rpx;
			background: rgba(15, 0, 32, 0.5);
			border: 1px solid rgb(151, 99, 157);
			color: #ffffff;
			border-radius: 20rpx;
			
			.title {
				text-align: center;
				padding: 20rpx 0;
				font-size: 34rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.form {
			background-color: #ffffff;

			.btn {
				position: absolute;
				top: 350rpx;
				width: 750rpx;
				height: 500rpx;
			}
		}
	}

	.btn-wrapper {
		background: none;
		width: 360rpx;
		margin: 50rpx auto;
		// display: flex;
		// align-items: center;
		padding: 0 20rpx;
	}

	.qrcode-box {
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 660rpx;
		height: 1000rpx;

		.poster {
			width: 580rpx;
			height: 733rpx;
			margin: 40rpx auto;
			box-shadow: 0px 0px 10px #cccccc;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;

			image {
				width: 580rpx;
				border-radius: 20rpx 20rpx 0 0;
			}

			.user {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.avatar {
					display: flex;
					align-items: center;
					height: 200rpx;

					.user-info {
						display: flex;
						flex-direction: column;
						font-size: 26rpx;

						.phone {
							color: #999999;
						}
					}
				}

				.qrcode-img {
					width: 140rpx;
				}
			}

			.long-press {
				color: #999999;
				font-size: 26rpx;
				text-align: center;
			}
		}

		.gap {
			font-size: 28rpx;
			margin: auto;
			color: #999999;
		}

		.share {
			margin: auto;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;

			.btn {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #666666;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

	}
</style>