<!-- 我的邀请 -->
<template>
	<view class="container">
		<view class="head">
			<up-image src="/static/share/share-bg.png" alt="" width="100%" mode="widthFix"></up-image>
			<view class="top-title">
				<view>
					<up-image src="/static/share/title.png" alt="" width="550rpx" height="92rpx" mode="widthFix"></up-image>
				</view>
				<view style="padding-right:70rpx;justify-content: flex-end">
					<up-image src="/static/share/rule.png" alt="" width="430rpx" height="92rpx" mode="widthFix"></up-image>
				</view>
			</view>

		</view>
		<view class="inviteBox">
			<view class="top">
				<u-image src="/static/share/bg1.png" alt="" width="422rpx" height="76rpx"></u-image>
				<view class="u-absolute">
					<text>邀请详情</text>
				</view>
			</view>
			<view class="codeTitle">
				您的邀请码
			</view>
			<view class="content">
				<view class="code" style="">
					{{data.invitationCode}}
				</view>
				<view class="u-flex u-row-between" style="padding: 0 88rpx;">
					<u-button @tap="sharurl" :custom-style="data.customStyle" :hair-line="false"
						:ripple="true">一键分享</u-button>
					<u-button style="margin-left: 50rpx;" @click.stop="createPoster()" :custom-style="data.customStyle"
						:hair-line="false" :ripple="true">保存海报</u-button>
				</view>

			</view>
			<view class="gap u-m-t-32"></view>
			<view class="u-m-t-32">
				<view style="font-size: 32rpx;font-weight:bold;color: #000;text-align: center;">我的邀请战绩</view>
				<view class="u-m-t-32" style="line-height: 46rpx;font-weight: bold;text-align: center;display: flex;justify-content: space-around;">
					<view>
						<view class="">已邀请</view>
						<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.inviteCount}}</text>人</view>
					</view>
					<view>
						<view class="">签到</view>
						<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.inviteSignCount}}</text>人</view>
					</view>
					<view @click="goNav('/pages/me/withdraw/moneyList?moneyType=2&viewType=1')">
						<view class="">金币收益</view>
						<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.earning.inviteGoldMoney||0}}</text></view>
					</view>
					<view @click="goNav('/pages/me/withdraw/moneyList?moneyType=1&viewType=1')">
						<view class="">红包收益</view>
						<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.earning.inviteMoney||0}}</text></view>
					</view>
				</view>
				<view class="u-m-t-16 u-p-b-32" style="text-align: center;color: #999;">好友签到成功可额外获得1元现金红包</view>
			</view>

		</view>
		<view class="u-m-t-40 u-m-b-32" style="background-color: #fff;padding: 32rpx;border-radius: 16rpx;margin: 32rpx;">
			<view class="u-font-32 " style="text-align: center;color: #333;font-weight: bold;">已邀请列表</view>
			<view v-if="data.inviterList.length" class="u-m-t-20">
				<view class="u-m-b-20" style="line-height: 80rpx;display: flex;justify-content: space-between;" v-for="(item, index) in data.inviterList"
					:key='index'>
					<view style="display: flex;">
						<image src="/static/share/5.png" style="width: 80rpx;" mode="widthFix"></image>
						<text class="margin-left-sm">{{item.userName}}</text>
					</view>
					<view style="width: 160rpx;" class="u-flex u-row-right font-bold">
						<text class="text-red" v-if="item.recordNum>0">已签到</text>
						<text class="color-999" v-else>未签到</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="u-p-t-30 u-p-b-30" v-if="!data.inviterList.length">
			<up-divider text="没有更多了"></up-divider>
		</view>
		
		<view style="width: 0;height: 0;overflow: hidden;">
			<up-qrcode :size="200" :val="data.erweima" @result="qrR"></up-qrcode>
			<canvas id="canvas" canvas-id="poster" :style="{width: data.canvasW+'px', height: data.canvasH+'px'}"></canvas>
		</view>
		
	</view>
</template>

<script setup>
	import { reactive, nextTick, ref } from 'vue';
	import { onReady,onLoad,onShow,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { updateUser } from '@/api/me/withdraw.js';
	import { selectInviteMoney, selectInviteByUserIdLists, selectBannerList } from '@/api/share/index.js';
	import { commonType } from '@/api/init.js';
	import config from '@/commons/config.js';
	let data = reactive({
		loading:false,
		qrcode: false,
		earning: {
			inviteMoney: 0,
			inviteGoldMoney: 0,
		},
		erweimapath: '',
		haibaoImg: null,
		customStyle: {
			background: '#DDDCFF',
			border: '8rpx',
			color: '#4544FF',
			fontSize: '28rpx',
			fontWeight: '700',
			padding: '10rpx 32rpx',
		},
		page: 1,
		limit: 10,
		isEnd:false,
		inviteCount: '', //邀请人数
		inviterList: [], //邀请列表
		erweima: '',
		bgImg: '',
		tuiguang: '',
		invitationCode: uni.getStorageSync('userInfo').invitationCode,
		h5SaveImg: '',
		haibaoImgH5: '',
		inviteSignCount:0,
		canvasW: 350,
		canvasH: 667,
	})
	let settingWritePhotosAlbum = false;
	onLoad(() => {
		getInviter()
		queryInviter()
		getBgImg()
		data.erweima = config.baseUrl + `/pages/login/register/?invitation=${data.invitationCode}&qdCode=${uni.getStorageSync('userInfo').qdCode}`
		console.log(data.erweima)
	})
	
	/**
	 * 获取邀请战绩
	 */
	function queryInviter() {
		selectInviteMoney().then(res => {
			data.inviteCount = res.inviteCount //邀请人数
			data.inviteSignCount = res.inviteSignCount
			data.earning.inviteGoldMoney = res.earning.inviteGoldMoney||0
			data.earning.inviteMoney = res.earning.inviteMoney||0
			console.log(data.earning)
			// Object.assign(data.earning,res.earning)
		})
	}
	
	/**
	 * 获取已邀请列表
	 */
	function getInviter() {
		data.loading=true;
		selectInviteByUserIdLists({
			page: data.page,
			limit: data.limit
		}).then(res => {
			data.loading=false;
			data.inviterList =data.inviterList.concat(res.list)
			data.isEnd=data.page>=res.totalPage?true:false;
		})
	}
	
	/**
	 * 跳转收益列表
	 * @param {Object} url
	 */
	function goNav ( url) {
		uni.navigateTo({
			url: url
		})
	}
	
	/**
	 * 一键分享
	 */
	function sharurl() {
		uni.showModal({
			title: '链接推广',
			content: data.tuiguang + data.erweima,
			showCancel: true,
			cancelText: '关闭',
			confirmText: '一键复制',
			success: res => {
				if (res.confirm) {
					uni.setClipboardData({
						data: data.tuiguang + data.erweima,
						success: function() {
							console.log('success');
							uni.showToast({
								title: '复制成功',
								duration: 1000,
								icon: 'none'
							});
						}
					});
				}
			}
		});
	}
	
	function posterSuccess(haibaoImg) {
		data.haibaoImg = haibaoImg;
		uni.hideLoading();
	}
	function successH5(haibaoImg) {
		if ( haibaoImg ) {
			data.haibaoImgH5 = haibaoImg
			uni.previewImage({
				urls: [haibaoImg],
				current: 1,
			})
		}
		
	}
	
	function qrR(path) {
		data.erweimapath = path;
	}
	
	/**
	 * 获取海报图
	 */
	function getBgImg() {
		selectBannerList({
			classify: 5
		}).then(res => {
			data.bgImg = res[0].imageUrl
			data.tuiguang = res[0].describes
			// data.bgImg = "https://jiaoyu.xianmxkj.com/img/20230822/27d37f847db9481bb3dc54cd12258147.jpg"
		});
	}
	function createdCanvas(imageInfos){
		return new Promise((resolve, reject) => {
			//绘图上下文
			const ctx = uni.createCanvasContext('poster');
			uni.createSelectorQuery()
				.in(this)
				.select('#canvas')
				.boundingClientRect(rect => {
					if(!rect) return
					
					// 背景图
					ctx.drawImage( data.bgImg, 0, 0, data.canvasW, data.canvasH ); 
					console.log(data.canvasW)

					// 二维码图片
					ctx.drawImage( data.erweimapath, data.canvasW - 174, data.canvasH - 134, 64, 64 );
					ctx.draw();
				  }).exec()
			resolve()
		})
	}
	
	/**
	 * 生成海报
	 */
	async function createPoster() {
		uni.showLoading({
			title: '海报生成中'
		});
		const Images = [data.bgImg, data.erweimapath];
		Promise.all(Images.map(img => uni.getImageInfo({ src: img }))).then(
		    imageInfos => {
		    console.log('Images then>>>>>>', imageInfos);
		    data.bgImg = imageInfos[0].path;
		    data.erweimapath = imageInfos[1].path;
	
		    //根据参数开始绘图
		    createdCanvas(imageInfos[0]).then(()=>{
		       // 绘制需要延迟，不然第一次加载为空白
		      setTimeout(() => {
				// 将生成的canvas图片，转为真实图片-地址
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					canvasId: "poster",
					success: res => {
						data.haibaoImg =  res.tempFilePath;
						// #ifdef H5
						uni.previewImage({
							urls: [data.haibaoImg],
							current: 1,
						})
						// #endif
						// #ifndef H5
						uni.previewImage({
							urls: [data.haibaoImg],
							current: 1,
						})
						uni.saveImageToPhotosAlbum({
							filePath: data.haibaoImg,
							success: function() {
								uni.showToast({
									title: '海报已保存相册',
									icon: 'none',
								});
							}
						});
						// #endif
						
						console.log('真实图片>>>>>>', res);
						uni.hideLoading();
					},
					fail: (err) => { console.log('error', err) }
				},this); 
			  }, 500);
		    })
		});
		
	}
	onReachBottom(() => {
		if(data.isEnd||data.loading){
			return 
		}
		data.page+=1
		getInviter()
	})
	
	
	
</script>

<style lang="scss" scoped>
	$color1: #5857FF;
	page {
		background: #F3F4F8;
	}
	.container {
		background: #F3F4F8;
		min-height: 100vh;
		.head{
			position: relative;
			.top-title {
				position: absolute;
				left: 0;
				right: 0;
				top: 192rpx;
				>view{
					display: flex;
					justify-content: center;
				}
			}
		}
	}
	.inviteBox {
		position: relative;
		margin-top: -240rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-left: 28rpx;
		margin-right: 28rpx;
		.top {
			position: absolute;
			display: flex;
			justify-content: center;
			left: 134rpx;
			right: 134rpx;
			top: -24rpx;
			
			.u-absolute {
				position: absolute;
				left: 0;
				right: 0;
				z-index: 1;
				top: 0;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		.codeTitle{
			padding-top: 84rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			color: #000;
		}
		.content{
			.code{
				font-size: 44rpx;
				font-weight: bold;
				text-align: center;
				color: #5857FF;
				margin: 32rpx auto;
			}
		}
		
	}
	.cu-dialog {
		background-color: transparent;
	}

	.text-red {
		color: $color1;
	}

	.gap {
		width: 100%;
		height: 0;
		position: relative;
		border-bottom: 1px dashed #eee;

		&:before,
		&::after {
			display: block;
			content: '';
			position: absolute;
			width: 34rpx;
			height: 34rpx;
			background: #F3F4F8;
			border-radius: 50%;
			z-index: 2;
			top: 50%;
			transform: translateY(-50%);
			background-size: 100% 18px;
			background-repeat: repeat-x
		}

		&:before {
			left: -16rpx;
		}

		&::after {
			right: -16rpx;
		}
	}

	.bg-img {
		background-color: transparent;
	}
	

</style>