<template>
	<view class="assist">
		<!-- 背景图片 -->
		<image src="../static/assist/zlBg.png" class="bg" mode="widthFix"></image>
		<!-- 内容 -->
		<view class="content">
			<!-- #ifdef H5 -->
			<image v-if="isBack" src="/static/images/index/left.png" class="left_viewimage" @tap="goBack"></image>
			<!-- #endif -->

			<!-- 标题 -->
			<view class="content-title">
				邀好友助力
			</view>
			<!-- 副标题 -->
			<view class="content-titles">
				免费领会员
			</view>
			<!-- 邀请好友展示框 -->
			<view class="content-hy flex align-center justify-center">
				<view class="content-hy-box">
					<view class="content-hy-box-title1" v-if="rlueList[rlueIndex] && rlueList[rlueIndex].inviteMonth>0">
						{{userName}},再邀请<span>{{getUserPeopNum}}</span>位好友,可再得{{rlueList[rlueIndex].inviteMonth}}个月会员
					</view>
					<view class="content-hy-box-title1" v-else>
						{{userName}},再邀请<span>{{getUserPeopNum}}</span>位好友,可升级永久免费无限会员
					</view>
					<view class="" v-for="(item,index) in rlueList" :key="index">
						<view v-if="index>rlueIndex" class="content-hy-box-title2">
							<block v-if="item.inviteMonth>0">
								再邀请{{item.inviteCount - nowPeopNum}}位好友，可再得{{item.inviteMonth}}个月会员
							</block>
							<block v-else>
								再邀请{{item.inviteCount - nowPeopNum}}位好友，可升级永久免费无限会员
							</block>
						</view>
					</view>
					<view class="content-hy-box-peop">
						<view class="content-hy-box-peop-my flex align-center justify-center">
							<image :src="avatar?avatar:'../../static/images/logo.png'" mode=""></image>
						</view>
						<view class="content-hy-box-peop-title">
							您已注册成功，还需邀请
						</view>
						<view class="content-hy-box-peop-list flex align-center justify-between flex-wrap">
							<view class="content-hy-box-peop-list-i flex align-center justify-center"
								v-for="(item,index) in getPeopNum" :key="index">
								<block v-if="getPeopList[index]">
									<view class="content-hy-box-peop-list-ia flex align-center justify-center"
										style="border: none;">
										<image style="width: 100%;height: 100%;border-radius: 50%;"
											:src="getPeopList[index].avatar?getPeopList[index].avatar:'../../static/images/logo.png'"
											mode=""></image>
									</view>
									<view class="content-hy-box-peop-list-it flex align-center justify-center">
										{{getPeopList[index].userName}}
									</view>
								</block>
								<block v-else>
									<view @click="onSaveImg()"
										class="content-hy-box-peop-list-ia flex align-center justify-center">
										<u-icon name="plus" color="#ffffff" size="28"></u-icon>
									</view>
									<view class="content-hy-box-peop-list-it flex align-center justify-center">
										待助力
									</view>
								</block>

							</view>
							<view class="content-hy-box-peop-list-i flex align-center justify-center"
								style="height: 0;">
							</view>
						</view>
					</view>
					<block v-if="getPeopList.length>0">
						<!-- 进度条 -->
						<view class="content-hy-box-schedule">
							<u-line-progress height="16" inactive-color="#f5e0b0" active-color="#edb840"
								:show-percent="false" :percent="getMathNum()" :round="true"></u-line-progress>
						</view>
						<view class="content-hy-box-schedulet">
							距离领取会员仅差<span>{{getUserPeopNum}}</span>位好友
						</view>
						<view class="content-hy-box-peops">
							<swiper class="content-hy-box-peopss" next-margin="80px" :circular="true"
								:indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
								<swiper-item class="content-hy-box-peopssi" v-for="(item,index) in getPeopList"
									:key="index">
									<view class="content-hy-box-peopssis flex align-center">
										<image :src="item.avatar?item.avatar:'../../static/images/logo.png'" mode="">
										</image>
										<view class="content-hy-box-peopssit">
											{{item.userName}}已为您助力
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</block>

				</view>
			</view>
			<!-- 助力按钮 -->
			<!-- #ifndef MP-KUAISHOU -->
			<view class="content-btn flex align-center justify-center" @click="onSaveImg()">
				{{getPeopList.length==0?'开始助力':'继续助力'}}
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-KUAISHOU -->
			<view class="content-btn flex align-center justify-center">
				<u-button open-type="share" :custom-style="customStyle" :hair-line="false"
					style="width: 100%;height: 100%;" shape="circle"
					:ripple="true">{{getPeopList.length==0?'开始助力':'继续助力'}}</u-button>
			</view>

			<!-- #endif -->

			<!-- 活动流程 -->
			<view class="content-lc">
				<view class="content-lc-title flex align-center justify-center">
					活动流程
				</view>
				<view class="content-lc-ls flex justify-between">
					<view class="content-lc-ls-i">
						<image src="../static/assist/as1.png" mode=""></image>
						<view class="content-lc-ls-it">
							点击发起助力
						</view>
					</view>
					<image class="content-lc-ls-ir" src="../static/assist/asr.png" mode=""></image>
					<view class="content-lc-ls-i">
						<image src="../static/assist/as2.png" mode=""></image>
						<view class="content-lc-ls-it">
							邀请对应数量好友
						</view>
					</view>
					<image class="content-lc-ls-ir" src="../static/assist/asr.png" mode=""></image>
					<view class="content-lc-ls-i">
						<image src="../static/assist/as3.png" mode=""></image>
						<view class="content-lc-ls-it">
							每位好友注册成功
						</view>
					</view>
					<image class="content-lc-ls-ir" src="../static/assist/asr.png" mode=""></image>
					<view class="content-lc-ls-i">
						<image src="../static/assist/as4.png" mode=""></image>
						<view class="content-lc-ls-it">
							领取对应时间会员
						</view>
					</view>
				</view>
			</view>
			<!-- 活动规则 -->
			<view class="content-rule">
				<view class="content-rule-title flex align-center justify-center">
					活动规则
				</view>
				<view class="content-rule-list">
					<view class="content-rule-list-i flex align-center" v-for="(item,index) in rlueList" :key="index">
						<image :src="item.inviteImg" mode=""></image>
						<view class="content-rule-list-i-r">
							<view class="content-rule-list-i-r-t" v-if="item.inviteMonth>0">
								领取{{item.inviteMonth}}个月会员
							</view>
							<view class="content-rule-list-i-r-t" v-else>
								领取永久会员
							</view>
							<view class="content-rule-list-i-r-b" v-if="item.inviteMonth>0">
								邀请{{item.inviteCount}}位好友,您可以免费{{item.inviteMonth}}个月无限看短剧。
							</view>
							<view class="content-rule-list-i-r-b" v-else>
								邀请{{item.inviteCount}}位好友,您可以永久免费无限看短剧。
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <image src="../../static/images/logo.png" mode=""></image> -->

		<tki-qrcode ref="qrcode" :val="erweima" :size="100" background="#ffffff" foreground="#000000" pdground="#000000"
			:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>

		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="bgImg && erweimapath && haibaoShow" @tap="hideModal">
				<view class="bg-img">
					<wm-poster @success="posterSuccess" @successH5="successH5" :imgSrc="bgImg"
						:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :LineType="false"></wm-poster>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
	import wmPoster from '../components/wm-poster/wm-posterordershd.vue';
	import config from '../../common/config.js'
	export default {
		components: {
			tkiQrcode,
			wmPoster
		},
		data() {
			return {
				customStyle: {
					width: '100%',
					height: '98rpx',
					border: 'none',
					background: 'transparent',
					color: '#ffffff',
					fontSize: '12px',
					fontWeight: '500',

					// padding: '24px 20px',
				},
				avatar: '',
				inviteAwardId: '', //等级id
				rlueList: [], //规则列表
				getPeopNum: 0, //当前需要邀请的人数
				getUserPeopNum: 0, //还需要邀请的人数
				rlueIndex: 0, //当前等级对应的下标
				nowPeopNum: 0, //已经邀请的人数
				getPeopList: [], //已经邀请的人列表
				userName: '', //用户名称
				avatar: '', //用户头像
				erweima: '',
				modalName: '',
				bgImg: '',
				erweimapath: '',
				haibaoShow: false,
				invitationCode: 0,
				erweimapath: '',
				haibaoImgH5: '',
				qdCode: '', //渠道码
				isBack: false,
				bgImgs: '',
				tuiguang: '',
			}
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.bgImgs
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.bgImgs
			}
		},
		onLoad() {
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				this.isBack = false
			} else {
				this.isBack = true
			}
			// #endif

			if (uni.getStorageSync('qdCode')) {
				this.qdCode = uni.getStorageSync('qdCode')
			}
			this.getBgImg()
			this.invitationCode = uni.getStorageSync('invitationCode')
			// h5携带邀请码去首页
			// #ifdef H5
			this.erweima = config.APIHOST2 + '/?invitation=' + this
				.invitationCode + '&qdCode=' + this.qdCode
			// #endif
			// app直接去app注册页面
			// #ifdef APP
			this.erweima = config.APIHOST2 + '/pages/login/registerApp?invitation=' + this
				.invitationCode + '&qdCode=' + this.qdCode
			// #endif
			// #ifdef MP-WEIXIN
			this.getWxEq()
			// #endif
			// #ifdef MP-TOUTIAO
			this.getTouTiao()
			// #endif
			this.getUserInfo()
			this.getActivity()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			//获取头条二维码
			getTouTiao() {
				let that = this
				uni.downloadFile({
					url: config.APIHOST +
						'/app/invite/dyCreateQr?invitationCode=' + that
						.invitationCode + ',' + that.qdCode + '&page=/pages/index/index',
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							that.erweimapath = res.tempFilePath
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: err => {
						console.log(err)
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败',
							icon: 'none'
						});
					}
				});
			},
			//获取微信二维码
			getWxEq() {
				let that = this
				uni.downloadFile({
					url: config.APIHOST +
						'/app/invite/mpCreateQr?invitationCode=' + that
						.invitationCode + ',' + that.qdCode,
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							that.erweimapath = res.tempFilePath
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: err => {
						console.log(err)
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败',
							icon: 'none'
						});
					}
				});
			},
			//获取背景图
			getBgImg() {
				this.$Request.get('/app/common/type/812').then(res => {
					if (res.code == 0 && res.data.value) {
						this.bgImg = res.data.value
					}
				})
				this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
					if (res.code == 0) {
						this.bgImgs = res.data[0].imageUrl
						this.tuiguang = res.data[0].describes
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				});
			},
			showModal() {
				console.log(this.erweima, '二维码地址')
				// #ifndef H5
				if (!this.haibaoImg) {
					this.haibaoShow = true;
					uni.showLoading({
						title: '海报生成中'
					});
				} else {
					this.modalName = 'Image';
				}
				// #endif
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf('micromessenger') !== -1) {
					//微信浏览器
					if (!this.haibaoImg) {
						this.haibaoShow = true;
						uni.showLoading({
							title: '海报生成中'
						});
					} else {
						this.modalName = 'Image';
					}
				} else {
					if (!this.haibaoImgH5) {
						this.haibaoShow = true;
						uni.showLoading({
							title: '海报生成中'
						});
					} else {
						uni.previewImage({
							urls: [this.haibaoImgH5],
							current: 1,
						})
					}

				}
				// #endif
			},
			onSaveImg() {
				this.showModal();
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
				uni.hideLoading();
			},
			successH5(haibaoImg) {
				this.haibaoImgH5 = haibaoImg
				uni.previewImage({
					urls: [haibaoImg],
					current: 1,
				})
			},
			hideModal() {
				this.modalName = null;
			},
			qrR(path) {
				console.log(path, '二维码回调地址')
				this.erweimapath = path;
			},
			//计算百分比
			getMathNum() {
				return (this.getPeopList.length / this.getPeopNum).toFixed(2) * 100
			},
			//获取登录用户信息
			getUserInfo() {
				this.$u.api.userinfo().then(res => {
					if (res.code == 0) {
						this.userName = res.data.userName;
						this.avatar = res.data.avatar;
					}
				})
			},
			// 获取活动等级
			getActivity() {
				this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.inviteAwardId = res.data.inviteAwardId
							this.getPeopNum = res.data.inviteCount
							this.getActivityrule()
						}
					}
				})
			},
			//获取活动规则列表
			getActivityrule() {
				this.$Request.getT('/app/invite/selectInviteAwardList', {
					page: 1,
					limit: 100
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.rlueList = res.data.records
							this.rlueIndex = this.rlueList.findIndex(item => item.inviteAwardId === this
								.inviteAwardId)
							this.getActivityList()
						}
					}
				})
			},
			//获取邀请人列表
			getActivityList() {
				this.$Request.getT('/app/invite/selectInviteUserListByUserId').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.nowPeopNum = res.data.length

							this.getPeopList = res.data
							this.getUserPeopNum = Number(this.getPeopNum) - Number(res.data.length)
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.assist {
		background-color: #F22947;
		position: relative;
	}

	page {
		background-color: #f8cfc3;
	}

	.left_viewimage {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 60rpx;
		left: 40rpx;
		z-index: 99;
	}

	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.content {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.content-title {
		width: 100%;
		text-align: center;
		font-size: 78rpx;
		font-weight: bold;
		color: #FFF4E4;
		text-shadow: 0rpx 6rpx 9rpx rgba(118, 4, 17, 0.26);
		margin-top: 40rpx;
	}

	.content-titles {
		width: 100%;
		text-align: center;
		font-size: 100rpx;
		font-weight: bold;
		color: #FFF4E4;
		text-shadow: 0rpx 6rpx 9rpx rgba(118, 4, 17, 0.26);
	}

	.content-hy {
		width: 100%;
		height: auto;
		margin-top: 40rpx;

		.content-hy-box {
			padding: 40rpx 0;
			width: 615rpx;
			height: 100%;
			background: linear-gradient(0deg, #FBEDCC 0%, #FFF7F0 98%);
			border-radius: 48rpx 48rpx 24rpx 24rpx;

			.content-hy-box-title1 {
				width: 90%;
				margin: 0 auto;
				text-align: center;
				color: #F22947;
				font-size: 30rpx;
				font-weight: bold;

				span {
					font-size: 54rpx;
				}
			}

			.content-hy-box-title2 {
				width: 100%;
				text-align: center;
				margin-top: 16rpx;
				color: #F22947;
				font-size: 26rpx;
			}

			.content-hy-box-peop {
				width: 550rpx;
				height: auto;
				background: linear-gradient(45deg, #f27e8c 0%, #fa3653 100%);
				border-radius: 24rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				padding: 30rpx 0;
			}

			.content-hy-box-peop-my {
				width: 100%;
				height: 90rpx;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}

			.content-hy-box-peop-title {
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				color: #ffffff;
				font-weight: 500;
				font-size: 24rpx;
			}

			.content-hy-box-peop-list {
				width: calc(100% - 60rpx);
				margin: 0 auto;
				margin-top: 30rpx;
			}

			.content-hy-box-peop-list-i {
				width: 32%;
				flex-direction: column;
				margin-bottom: 20rpx;
				font-size: 24rpx;

				.content-hy-box-peop-list-ia {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 1px dashed #ffffff;
				}

				.content-hy-box-peop-list-it {
					color: #ffffff;
					margin-top: 14rpx;
				}
			}

			.content-hy-box-schedule {
				width: 550rpx;
				margin: 0 auto;
				margin-top: 26rpx;
			}

			.content-hy-box-schedulet {
				width: 550rpx;
				margin: 0 auto;
				font-size: 22rpx;

				span {
					color: #F22A48;
					font-size: 26rpx;
				}
			}

			.content-hy-box-peops {
				width: 550rpx;
				margin: 0 auto;
				margin-top: 26rpx;
				height: 50rpx;
			}

			.content-hy-box-peopss {
				width: 100%;
				height: 100%;

				.content-hy-box-peopssi {
					width: 100%;
					height: 100%;
				}

				.content-hy-box-peopssis {
					width: 90%;
					// width: 300rpx;
					height: 100%;
					background-color: green;
					padding: 0 10rpx;
					background: linear-gradient(-90deg, #FCE9A4 0%, #FDFBD4 100%);
					border-radius: 25rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}

					.content-hy-box-peopssit {
						width: 80%;
						font-size: 24rpx;
						margin-left: 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.content-btn {
		width: 666rpx;
		height: 98rpx;
		background: linear-gradient(-90deg, #F22C49 0%, #FF7989 100%);
		border: 1px solid #FFD4CF;
		border-radius: 49rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
	}

	.content-lc {
		width: 666rpx;
		height: 344rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 50rpx;

		.content-lc-title {
			width: 434rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #FF969B 0%, #FF345B 100%);
			border-radius: 0rpx 0rpx 50rpx 50rpx;
			margin: 0 auto;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content-lc-ls {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			margin-top: 50rpx;

			.content-lc-ls-ir {
				width: 26rpx;
				height: 16rpx;
				margin-top: 50rpx;
			}

			.content-lc-ls-i {
				width: 100rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.content-lc-ls-it {
					width: 100%;
					text-align: center;
					font-size: 26rpx;
					color: #9C2A2A;
					font-weight: bold;
					margin-top: 14rpx;
				}
			}
		}
	}

	.content-rule {
		width: 666rpx;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 50rpx;

		.content-rule-title {
			width: 434rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #FF969B 0%, #FF345B 100%);
			border-radius: 0rpx 0rpx 50rpx 50rpx;
			margin: 0 auto;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content-rule-list {
			width: 626rpx;
			height: auto;
			margin: 0 auto;
			margin-top: 40rpx;
			padding-bottom: 20rpx;

		}

		.content-rule-list-i {
			padding: 18rpx 12rpx;
			background-color: #FFF8E6;
			border-radius: 14rpx;
			margin-bottom: 30rpx;

			image {
				width: 106rpx;
				height: 82rpx;
			}

			.content-rule-list-i-r {
				margin-left: 18rpx;

				.content-rule-list-i-r-t {
					color: #9C2A2A;
					font-size: 30rpx;
					font-weight: bold;
				}

				.content-rule-list-i-r-b {
					font-size: 24rpx;
					color: #9C2A2A;
					font-weight: 500;
				}
			}
		}
	}
</style>