<template>
	<view class="invite-wrap" v-if="!loadding" style="background: linear-gradient(180deg, #FED1A7, #FCDBD4);">
		<view class="rule">
			<button class="rule_btn" @click="isPopup=true">活动规则</button>
			<button class="rule_btn" @click="ReLaunch()">返回首页</button>
		</view>
		<view class="banner">
			<image :src="detail.file_path" mode="widthFix"></image>
		</view>
		<view class="invite-content">
			<view class="tab d-c-c">
				<view class="item flex-1 d-c-c d-c" :class="tab_active==0?'active':''" @click="tab_active=0">
					<text class="">领取大礼包</text>
					<text class="f18">火热进行中</text>
				</view>
				<view class="item flex-1 d-c-c d-c" :class="tab_active==1?'active':''" @click="tab_active=1">
					<text class="">我的奖励</text>
					<text class="f18">多邀多得</text>
				</view>
			</view>
			<view class="invite-inner">
				<!--type 1-->
				<view class="invite-type" v-if="tab_active==0">
					<view class="content">
						<view class="image" >
							<image src="/static/invite/bg-invite.jpg" mode=""></image>
						</view>
						<view class="list d-a-c">
							<view class="item flex-1 d-c-c d-c"
								:class="detail.count>=item.invitation_num?'select-item':''"
								v-for="(item,index) in detail.Reward" :key="index">
								<text class="invite-num">{{item.invitation_num}}人</text>
							</view>
						</view>
					</view>
					<view class="state-explan d-c-c" v-if="!detail.is_over">
						已邀请{{detail.count}}人，还差<text class="p-0-10"
							style="color: #FF5649;">{{detail.dif}}</text>人就可以领取礼包啦
					</view>
					<view class="state-explan d-c-c" v-if="detail.is_over">
						共邀请<text style="color: #FF5649;">{{detail.count}}</text>人，奖品已全部领取，感谢您的参与
					</view>
					<view class="title" v-if="detail.inv_condition==0">
						注：邀请好友注册即邀请成功
					</view>
					<view class="title" v-if="detail.inv_condition==1">
						注：邀请好友注册且好友消费即邀请成功
					</view>
					<view class="btns-box">
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share">邀请好友得礼包</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<button @click="showShare">邀请好友得礼包</button>
						<!-- #endif -->
					</view>
				</view>

				<!--type 2-->
				<view class="invite-type2" v-if="tab_active==1">
					<view class="list" v-for="(item,index) in detail.prize" :key="index">
						<view class="item p-20-0 d-b-c" v-if="item.coupon_name!=''">
							<view class="d-s-s d-c">
								<view class="d-s-c">
									<image style="width: 36rpx;height: 36rpx;" src="/static/invite/invite-coupon.jpg" mode=""></image>
									<text class="f22 ml10 gray9">{{item.coupon_name}}</text>
								</view>
								<text class="gray9 f18">{{item.create_time}}</text>
							</view>
							<text class="f22" style="color: #06727F;">优惠券</text>
						</view>
						<view class="item p-20-0 d-b-c" v-if="item.point!=0">
							<view class="d-s-s d-c">
								<view class="d-s-c">
									<image style="width: 36rpx;height: 36rpx;" src="/static/invite/invite-points.jpg" mode=""></image>
									<text class="f22 ml10 gray9">+{{item.point}}</text>
								</view>
								<text class="gray9 f18">{{item.create_time}}</text>
							</view>
							<text class="f22" style="color: #06727F;">积分</text>
						</view>
						<view class="item p-20-0 d-b-c" v-if="item.balance!=0">
							<view class="d-s-s d-c">
								<view class="d-s-c">
									<image style="width: 36rpx;height: 36rpx;" src="/static/invite/invite-points.jpg" mode=""></image>
									<text class="f22 ml10 gray9">+{{item.balance}}</text>
								</view>
								<text class="gray9 f18">{{item.create_time}}</text>
							</view>
							<text class="f22" style="color: #06727F;">余额</text>
						</view>
					</view>
					<view class="d-c-c p30" v-if="detail.prize.length==0 && !loading">
						<text class="iconfont icon-wushuju"></text>
						<text class="cont">亲，暂无相关记录哦</text>
					</view>
				</view>
			</view>
		</view>
		<!--底部弹窗-->
		<MpShare :isMpShare="isMpShare" @close="closeShare"></MpShare>
		<!--app分享-->
		<!-- #ifdef APP-PLUS -->
		<AppShare :isAppShare="isAppShare" :appParams="appParams" @close="closeShare"></AppShare>
		<!-- #endif -->
		<Popup :show="isPopup" :width="575" :heigth="550" :padding="0" @hidePopup="hidePopupFunc" backgroundColor="none">
			<view class="pop-center">
				<image class="bg-rule" src="/static/invite/bg-rule.png" mode=""></image>
				<view class="pop-title">活动规则</view>
				<scroll-view scroll-y="true" style="height: 473rpx;">
					<view class="scroll-box">
						<view class="f26 fb mb22">活动时间:</view>
						<view class="f22 gray6 mb35">{{detail.start_time.text+"--"+detail.end_time.text}}</view>
						<view class="f26 fb mb22">活动奖励:</view>
						<view class="reward_items" v-for="(item,index) in detail.Reward" :key="index">
							<view class="d-s-c" style="color: #06727F;">
								<image class="invite-user" src="/static/invite/invite-user.jpg" mode=""></image>
								邀请<text style="color:#FF5649;">{{item.invitation_num}}</text>人后奖励
							</view>
							<view class="d-s-c">
								<template v-if="item.coupon_name!=''">
									<view class="reward_item ">
										<image style="width: 72rpx;height: 72rpx;"
											src="/static/invite/invite-coupon.jpg" mode=""></image>
										<view class="f22 gray9">{{item.coupon_name}}</view>
									</view>
									<view class="f22 gray9 m-0-20" v-if="item.point!=0&&item.balance!=0">+</view>
								</template>
								<template v-if="item.point!=0">
									<view class="reward_item ">
										<image style="width: 72rpx;height: 72rpx;"
											src="/static/invite/invite-points.jpg" mode=""></image>
										<text class="f22 gray9">{{item.point}}{{points_name()}}</text>
									</view>
									<view class="f22 gray9 m-0-20" v-if="item.balance!=0">+</view>
								</template>
								<view v-if="item.balance!=0" class="reward_item">
									<image style="width: 72rpx;height: 72rpx;" src="/static/invite/invite-points.jpg"
										mode=""></image>
									<text class="f22 gray9">{{item.balance}}余额</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</Popup>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	import AppShare from '@/components/app-share.vue';
	import MpShare from '@/components/mp-share.vue';
	export default {
		components: {
			Popup,
			AppShare,
			MpShare
		},
		data() {
			return {
				/*是否加载完成*/
				loadding: false,
				invitation_gift_id: 0,
				/*弹窗是否打开*/
				isPopup: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				tab_active: 0,
				/*活动详情*/
				detail: {
					start_time: {
						text: 0
					},
					end_time: {
						text: 0
					},
					dif: 0,
					count: 0
				},
				url: '',
				/*app分享*/
				isAppShare: false,
				appParams: {
					title: '',
					summary: '',
					path: ''
				},
				/*公众号分享*/
				isMpShare: false
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中'
			});
			this.invitation_gift_id = e.invitation_gift_id;
			//#ifdef H5
			this.url = window.location.href;
			//#endif

		},
		onShow() {
			/*获取数据*/
			this.getData();
		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				self._get('plus.invitationgift.invitation/getDatas', {
					invitation_gift_id: self.invitation_gift_id || 0,
					url: self.url
				}, function(res) {
					self.detail = res.data.data;
					// 配置微信分享参数
					//#ifdef H5
					if (self.url != '') {
						let params = {
							invitation_id: self.invitation_gift_id,
							referee_id: self.getUserId()
						};
						self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
					}
					//#endif
					self.loadding = false;
					uni.hideLoading();
				}, (err) => {
					uni.navigateBack()
				});
			},
			/*分享*/
			onShareAppMessage() {
				let self = this;
				// 构建页面参数
				let params = self.getShareUrlParams({
					invitation_id: self.invitation_gift_id,
					referee_id: self.getUserId()
				});
				return {
					title: self.detail.share_title,
					path: '/pages/index/index?' + params,
					imageUrl: self.detail.share.file_path
				};
			},
			/* 返回首页 */
			ReLaunch() {
				this.gotoPage('/pages/index/index', 'reLaunch');
			},
			//关闭活动规则
			hidePopupFunc() {
				this.isPopup = false;
			},
			/*领奖*/
			getPrize(e) {
				let self = this;
				self._post('user.invitation/getPrize', {
					invitation_reward_id: e,
					invitation_gift_id: self.detail.invitation_gift_id,
				}, function(res) {
					uni.hideLoading();
					uni.showToast({
						title: '领取成功',
						duration: 2000,
						icon: 'success'
					});
					self.getData();
				});
			},
			showShare() {
				let self = this;
				//#ifndef APP-PLUS
				self.isMpShare = true;
				//#endif
				//#ifdef APP-PLUS
				self.appParams.title = self.detail.share_title;
				self.appParams.summary = self.detail.share_desc;
				// 构建页面参数
				let params = self.getShareUrlParams({
					invitation_id: self.invitation_gift_id,
					referee_id: self.getUserId()
				});
				self.appParams.path = '/pages/index/index?' + params;
				self.appParams.image = self.detail.share.file_path;
				self.isAppShare = true;
				//#endif
			},
			//关闭分享
			closeShare(data) {
				this.isAppShare = false;
				this.isMpShare = false;
			},
		}
	}
</script>

<style lang="scss">
	.invite-wrap {
		min-height: 100vh;
		background: none;
		position: relative;
		padding-top: 372rpx;
		padding-bottom: 60rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.banner {
		position: absolute;
		top: 0;
	}

	.invite-wrap .banner image {
		width: 750rpx;
	}

	.invite-wrap .activity-date {
		width: 500rpx;
		height: 40rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		background: #ff5b90;
		color: #FFFFFF;
	}

	.invite-content {
		margin: 50rpx;
		margin-top: 0;
		border-radius: 25rpx;
		background: #FFFFFF;
		position: relative;
	}

	.invite-content .tab {
		/* border-bottom: 1px solid #CCCCCC; */
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		overflow: hidden;
	}

	.invite-content .tab .item {
		height: 84rpx;
		font-size: 28rpx;
		background: #F88E75;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.invite-content .tab .item.active {
		color: #ffffff;
		box-shadow: none;
		background-color: #FF5649;
	}


	.invite-content .tab .item .headtext {
		font-size: 32rpx;
	}

	.invite-content .invite-inner {
		padding:0 50rpx 70rpx 50rpx;
	}

	.invite-content .invite-type .title {
		text-align: center;
		color: #7F675B;
		font-size: 24rpx;
		height: 87rpx;
		line-height: 87rpx;
		border-top: 1rpx dashed #7F675B;
	}

	.state-explan {
		font-size: 24rpx;
		color: #06727F;
		text-align: center;
		padding: 40rpx 0;
	}

	.invite-content .invite-type .content {
		margin-top: 40rpx;
		margin-bottom: 50rpx;
	}

	.invite-content .invite-type .content .image {
		width: 358rpx;
		height: 255rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		image{
			width: 358rpx;
			height: 255rpx;
		}
	}

	.invite-content .invite-type .list {
		width: 414rpx;
		margin: 0 auto;
		border-radius: 25rpx;
		background-color: #ffdbcb;
	}

	.invite-content .invite-type .list .item {
		background-color: #ffdbcb;
		border-radius: 25rpx;
		height: 8rpx;
	}
	.invite-content .invite-type .list .item  .invite-num{
		display: none;
	}
	.select-item {
		position: relative;
		height: 8rpx;
		background-color: #FF5649;
	}
	.select-item:first-child{
		border-top-left-radius: 25rpx;
		border-bottom-left-radius: 25rpx;
	}
	.select-item:last-child {
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
	}

	.select-item .invite-num {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -18rpx;
		color: #7F675B;
		font-size: 24rpx;
	}


	.invite-content .invite-type2 .item {
		border-bottom: 1px dashed #CCCCCC;
	}

	.invite-content .invite-type2 .item .num {
		color: #f62c6d;
	}

	.invite-content .btns-box {
		margin-top: 45rpx;
	}

	.invite-content .btns-box button {
		margin: 0 auto;
		width: 312rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		background: #FF5649;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.progress {
		height: 15rpx;
		width: 100%;
		background-color: #f7d887;
		margin-top: 32rpx;
		margin-bottom: 27rpx;
	}

	.progress .progress_dot {
		width: 15rpx;
		height: 15rpx;
		background-color: #f88035;
		border-radius: 50%;
		margin: 0 auto;
	}

	.invite_rule {}

	.invite_rule .title {
		color: #ffffff;
		text-align: center;
		font-size: 31rpx;
		line-height: 50rpx;
		margin-bottom: 50rpx;
	}

	.rule_list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 50rpx;
	}

	.rule_item {
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF20;
		text-align: center;
		line-height: 128rpx;
	}

	.rule_list .rule_item .icon {
		font-size: 88rpx;
		color: #FFFFFF;
	}

	.oblique {
		color: #f3de8d;
		font-weight: 900;
		margin: 0 30rpx;
	}

	.rule {
		overflow: hidden;
		position: fixed;
		right: 0;
		top: 35rpx;
		z-index: 100;
	}

	.rule_btn {
		margin-bottom: 27rpx;
		width: 131rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: #FF5649;
		border-right: none;
		border-top-left-radius: 22rpx;
		border-bottom-left-radius: 22rpx;
		color: #ffffff;
		font-size: 22rpx;
		padding: 0;
	}

	.reward_items {
		padding: 32rpx 0 40rpx 0;
		border-top: 1px dashed #eeeeee;
		border-bottom: 1px dashed #eeeeee;
	}

	.reward_item {
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.reward_time {
		border-bottom: 1px dashed #CCCCCC;
		padding-bottom: 20rpx;
	}

	.pop-center {
		position: relative;
		width: 575rpx;
		height: 550rpx;
	}

	.pop-title {
		position: relative;
		height: 77rpx;
		line-height: 77rpx;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		z-index: 1;
	}

	.bg-rule {
		width: 575rpx;
		height: 550rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.scroll-box {
		color: #7F685A;
		padding: 64rpx 50rpx 60rpx 43rpx;
	}

	.invite-user {
		margin-right: 9rpx;
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
	}
</style>
