<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="shareindexStyle">
			<view class="headStatus" v-if="sharestatus.Status!=3" :style="[headStyle]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title">{{pageTitle}}</view>
			</view>
			<view class="headStatus" v-if="scrollTop > 50 && sharestatus.Status==3" :style="[
		    headStyle,
		    {
		      zIndex: scrollTop < 10 ? 'unset' : 2,
		      opacity: scrollTop < 10 ? '100' : scrollTop,
		    },]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
			</view>
			<view class="shareadd" v-if=" sharestatus.Status==1">
				<u-empty text=" " mode="data"></u-empty>
				<Text style='margin: 10px 0;'>{{sharestatus.Msg}}</Text>
				<view class="shareadd_b" :style="{background:mainColor}" @click="goaddurl">
					<Text>{{sharestatus.ApplyForName}}</Text>
				</view>
			</view>
			<view v-if="sharestatus.Status==2" class="steatus_t" :style="{'margin-top':44+nav+'px'}">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/img-share-status.png" style="width: 100%;height: 165px;"></image>
				<Text style='margin-top: 70px;'>谢谢您的支持，请等待审核</Text>
				<view style="display: flex;align-items: center;justify-content: center;margin-top: 60rpx;">
					<u-button shape="circle" type="error" size="medium" @click='goshoping'>去商城逛逛</u-button>
				</view>
			</view>
			<view v-if="sharestatus.Status==4" class="steatus_t" :style="{'margin-top':44+nav+'px'}">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/img-share-status.png" style="width: 100%;height: 165px;"></image>
				<Text style='margin-top: 70px;'>{{sharestatus.Msg}}</Text>
			</view>
			<view style="width: 100%;height: 100%;" v-if="sharestatus.Status==3">
				<view class="sharebox_top">
					<view class="sharebox_top_nav" :style="{paddingTop:nav+'px'}">
						<view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
						</view>
						<view class="title" style="color: #FFFFFF;font-size: 16px;">{{pageTitle}}</view>
						<view style="width: 24px;height: 24px;"></view>
					</view>
					<view class="sharebox_top_t">
						<view class="top_t_l">
							<u-avatar :src="sharedata.UserInfo.Photo" size="130"></u-avatar>
							<view style="display: flex;flex-direction: column;color: #fff;margin-left: 16px;">
								<view style="display: flex;flex-direction: row;align-items: center">
									<Text style='font-size: 18px;max-width: 150px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
										{{sharedata.UserInfo.UserName}}
									</Text>
									<view class="sj_style" style="" @click="goUrl('/pages/share/level/level_t')" v-if="sharedata.UserInfo.IsEnableFXGrade==1">
										<image src="../../../static/images/sj.png" style="width: 9px;height: 10px;"></image>
										<text style="font-size: 10px;color: #fff;">
											升级规则
										</text>
									</view>
									<!-- 不是粉象模式 -->
									<view class="sj_style" style="" @click="goUrl('/pages/share/level/level')" v-if="sharedata.UserInfo.IsEnableFXGrade!=1 && sharedata.UserInfo.DistributorGradeEntrance==1">
										<image src="../../../static/images/sj.png" style="width: 9px;height: 10px;"></image>
										<text style="font-size: 10px;color: #fff;">
											升级条件
										</text>
									</view>
								</view>
								<Text style='font-size: 12px;margin-top: 5px;'>{{sharedata.CustomModel.ReferrerName}}：{{sharedata.UserInfo.SuperiorName!=''&&sharedata.UserInfo.SuperiorName!=null?sharedata.UserInfo.SuperiorName:'总部'}}</Text>
								<view style="display:flex;align-items: center;margin-top: 5px;">
									<Text style='font-size: 12px;'>等级：</Text>
									<image v-if="sharedata.UserInfo.GradeIcon!=null && sharedata.UserInfo.GradeIcon!=''" :src="sharedata.UserInfo.GradeIcon" style="width:67px;height:22px;"></image>
									<text v-else style="font-size: 12px;">{{sharedata.UserInfo.GradeName}}</text>
								</view>
								<Text style='font-size: 12px;margin-top: 5px;height:19px;'>{{sharedata.UserInfo.IsEnableFXGrade==1 && sharedata.UserInfo.IsVip==1?'会员日期：'+ sharedata.UserInfo.VipExpiryDate:''}}</Text>
							</view>
						</view>
					</view>
					<view class="sharebox_topc">
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;justify-content: space-between;">
							<Text>{{sharedata.CustomModel.CommissionWithdrawnName}}</Text>
							<Text>{{sharedata.UserInfo.TXCommission!=null ?sharedata.UserInfo.TXCommission:0}}元</Text>
						</view>
						<view style="width: 2px;height: 25px;background: #FFFFFF;justify-content: space-between;"></view>
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;">
							<Text>{{sharedata.CustomModel.OutstandingCommissionName}}</Text>
							<Text>{{sharedata.UserInfo.WJSCommission!=null ?sharedata.UserInfo.WJSCommission:0}}元</Text>
						</view>
						<view style="width: 2px;height: 25px;background: #FFFFFF;justify-content: space-between;"></view>
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;" @click="gosales()">
							<Text>销售额</Text>
							<Text>{{sharedata.UserInfo.MySellMoney!=null ?sharedata.UserInfo.MySellMoney:0}}元</Text>
						</view>
					</view>
					<!-- 会员购买 -->
					<view class="buyvip" v-if="words.isshowvipbuypic==1" @click="goUrl(words.vipbuyurl)">
						<image :src="words.vipbuyico" style="width: 100%;height: auto;" mode='widthFix'></image>
					</view>
				</view>
				<view class="sharebox_c">
					<view style="display: flex;flex-direction: row;align-items: center;height: 55px;margin-left: -30px;">
						<image src="../../../static/images/yue.png" style="width: 25px;height: auto;" mode='widthFix'></image>
						<view style="display: flex;flex-direction: column;margin-left: 17px;height: 100%;justify-content: space-between;">
							<Text style='font-size: 22px;'>{{sharedata.UserInfo.CommissionWithdrawal!=null ?sharedata.UserInfo.CommissionWithdrawal:0}}
								<Text style='font-size: 14px;'>元</Text> </Text>
							<text>{{sharedata.CustomModel.CommissionForWithdrawalName}}</text>
						</view>
					</view>
					<view style="width: 60px;height: 30px;border-radius: 15px;color: #fff; margin-right: -30px;background-image: linear-gradient( to right,#FF8585,#ED4353);text-align: center;line-height: 30px;"
					 @click="goUrl2('/pages/share/cash/cash')">
						<Text>{{sharedata.CustomModel.WithdrawDepositName}}</Text>
					</view>
				</view>
				<view class="sharebox_menus">
					<view class="menus_item" @click="goUrl('/pages/share-money/share-money')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="sharedata.CustomModel.DistributionCommissionImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{sharedata.CustomModel.DistributionCommissionName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{sharedata.UserInfo.TotalCommission!=null ?sharedata.UserInfo.TotalCommission:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<view class="menus_item" @click="goUrl('/pages/share-order/share-order')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="sharedata.CustomModel.DistributionOrderImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{sharedata.CustomModel.DistributionOrderName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{sharedata.UserInfo.OrderCommission!=null ?sharedata.UserInfo.OrderCommission:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<view class="menus_item" @click="goUrl('/pages/cash-detail/cash-detail')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="sharedata.CustomModel.WithdrawDetialsImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{sharedata.CustomModel.WithdrawDetialsName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{sharedata.UserInfo.RemitMoney!=null ?sharedata.UserInfo.RemitMoney:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<view class="menus_item" @click="goUrl('/pages/share-team/share-team')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="sharedata.CustomModel.MyTeamImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{sharedata.CustomModel.MyTeamName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{sharedata.UserInfo.ReferralsNum!=null ?sharedata.UserInfo.ReferralsNum:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">人</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>

					<view class="menus_item" @click="goUrl('/pages/share/vipBuyCommission/vipBuyCommission')" v-if="sharedata.UserInfo.IsEnableFXGrade==1 && IsEducation !=1">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image src="../../../static/images/vipbuyc.png" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">VIP购买返佣</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{sharedata.UserInfo.VipBuyCommission!=null ?sharedata.UserInfo.VipBuyCommission:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<view class="menus_item" @click="goUrl('/pages/share/examine')" v-if='sharedata.UserInfo.HpReferralsGradeAudit==1&& IsEducation !=1'>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image src="../../../static/images/icon/GradeAudit.png" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">分销商审核</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<view class="sharebox_menus" v-if="UserPageType.UserPageType!=2">
					<view class="menus_item" @click="goUrl('/pages/share-qrcode/share-qrcode',1)">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="sharedata.CustomModel.PromoteQRCodeImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{sharedata.CustomModel.PromoteQRCodeName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">

							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<view class="sharebox_menus" v-if="UserPageType.IsOpenSchool==1">
					<view class="menus_item" @click="goUrl('/pages/share-qrcode/share-qrcode',2)">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/xiaoyuanewm.png" style="width: 20px;height: auto;"
							 mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">校园二维码</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">

							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 30px;background: #f3f4f6;"></view>
			</view>
			<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='goback'></auth>
			<orderPopup v-if='showorder' :orderPopupdata='orderPopupdata' @gosalesvolume='gosalesvolume' @closeBtn="closeBtn"></orderPopup>
		</view>
	</scroll-view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	import orderPopup from "@/components/coupons/orderPopup.vue";
	export default {
		components: {
			orderPopup,
		},
		data() {
			return {
				pageTitle: "分销中心",
				contentHeight: 0,
				mainColor: '',
				secondary: '',
				sharestatus: {},
				userinfo: {},
				sharedata: {},
				showAuth: false,
				nav: 0,
				headStyle: {},
				scrollTop: 0,
				words: {},
				UserPageType: {}, //校园的数据
				IsEducation: 0,
				orderPopupdata:{},//离线收益的弹窗
				showorder:false,//显示弹出
			}
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.headStyle.paddingTop = this.nav + 'px';
			this.UserPageType = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo") : {};
			this.IsEducation = uni.getStorageSync('basedata') ?
				(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall.setting.mallStyle
					.IsEducation : 0) :
				0;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			this.words = wx.getStorageSync("basedata") ? wx.getStorageSync("basedata").share_setting_custom.words : {},
				pages.forEach((x) => {
					if (x.value == u) {
						this.pageTitle = x.new_name ? x.new_name : x.name;
					}
				});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad() {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init()
			}
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.init()
			},
			goback() {
				uni.navigateBack()
			},
			init() {
				uni.showNavigationBarLoading();
				this.request2({
						url: '/api/AppletUser/GetUserDistrbutorStatus',
						data: {}
					},
					(res) => {
						uni.hideNavigationBarLoading()
						this.sharestatus = res.data
						if (res.data.Status == 3) {
							this.getUserCenter()
						}
					}
				);
			},
			goshoping() {
				uni.redirectTo({
					url: "/pages/index/index"
				});
			},
			getUserCenter() {
				uni.showNavigationBarLoading();
				this.request2({
						url: '/api/AppletUser/GetUserDistrbutorCenter',
						data: {}
					},
					(res) => {
						uni.hideNavigationBarLoading()
						this.sharedata = res.data;
						//2021-4-9新加订单弹窗处理
						let openOfflineEarnings = uni.getStorageSync('basedata')?uni.getStorageSync('basedata').user_info.openOfflineEarnings:0
						if(openOfflineEarnings==1){//打开弹窗
							let now = new Date()
							let Month = (now.getMonth()+1)<10?'0'+(now.getMonth()+1):now.getMonth()+1
							let day = now.getDate()<10?'0'+now.getDate():now.getDate()+1
							let nowtime = now.getFullYear()+'-'+Month+'-'+day+' '+ now.getHours()+':'+ now.getMinutes()+':'+ now.getSeconds()
							if(uni.getStorageSync('order_old_time')){
								let oldtime = uni.getStorageSync('order_old_time').time;
								if(new Date(nowtime).getTime()!= new Date(oldtime).getTime()){
									this.getUserOffline(nowtime,oldtime)
								}
							}
							uni.setStorageSync("order_old_time",{time:nowtime});//吧当前时间存起来
						}
					}
				);
			},
			getUserOffline(now,old){
				this.request2({
						url: '/api/AppletUser/GetUserOfflineEarningsInfo',
						data: {
							StartTime: old,
							EndTime: now,
						}
					},
					(res) => {
						this.orderPopupdata = res.data
						if(res.data.State==1){
							if(res.data.OrderNum>1){
								this.showorder = true
							}
						}
					}
				);
			},
			closeBtn(){
				this.showorder = false
			},
			gosalesvolume(){
				this.showorder = false;
				setTimeout(()=>{
					let UserId = uni.getStorageSync('mall_UserInfo')?uni.getStorageSync('mall_UserInfo').UserId : 0;
					uni.navigateTo({
						url: '/pages/share/salesvolume?UserId='+UserId
					});
				},10)
			
			},
			goaddurl() {
				if (this.sharestatus.Status == 1 && (this.sharestatus.ApplyFor == 1 || this.sharestatus.ApplyFor == 2)) {
					uni.navigateTo({
						url: "/pages/share/add/add",
					});
				} else if (this.sharestatus.Status == 1 && (this.sharestatus.ApplyFor == 3 || this.sharestatus.ApplyFor == 4)) {
					this.request2({
							url: '/api/AppletUser/SetUserApplyForBeDistrbutor',
							data: {
								Name: '',
								Mobile: '',
							}
						},
						(res) => {
							this.init()
						}
					);
				}
			},
			redirectPrev() {
				if (this.prevPage != "") {
					uni.navigateBack({
						delta: 1,
					});
				}
			},
			goUrl(url, type = 1) {
				console.log(url)
				if (url == '/pages/share-team/share-team' && this.sharedata.UserInfo.IsEnableFXGrade == 1) { //判断我的团队是否粉象模式
					uni.navigateTo({
						url: url + '?IsEnableFXGrade=' + this.sharedata.UserInfo.IsEnableFXGrade
					});
				} else if (url == '/pages/share-qrcode/share-qrcode') {
					uni.navigateTo({
						url: url + '?type=' + type
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			goUrl2(url) {
				uni.navigateTo({
					url: url
				});
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			gosales(){//跳转销售额
				let UserId = uni.getStorageSync('mall_UserInfo')?uni.getStorageSync('mall_UserInfo').UserId : 0;
				uni.navigateTo({
					url: '/pages/share/salesvolume?UserId='+UserId
				});
			}
		}
	}
</script>

<style>
	.shareindexStyle {
		background: #f3f4f6;
	}

	image {
		will-change: transform
	}

	.shareindexStyle .shareadd {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 50px;
	}

	.shareindexStyle .shareadd .shareadd_b {
		width: 60%;
		height: 45px;
		border-radius: 22.5px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-top: 20px;
	}

	.shareindexStyle .sharebox_top {
		width: 100%;
		height: 242px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/shareTop.png);
	}

	.shareindexStyle .sharebox_top .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 10px;
	}

	.shareindexStyle .sharebox_top .sharebox_top_t {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
	}

	.shareindexStyle .sharebox_top .sharebox_top_t .top_t_l {
		margin-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.shareindexStyle .sj_style {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: rgba(55, 55, 55, 0.1);
		width: 70px;
		height: 20px;
		border-radius: 10px;
		margin-left: 20px;
	}

	.shareindexStyle .steatus_t {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shareindexStyle .sharebox_topc {
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		margin-top: 18px;
	}

	.shareindexStyle .sharebox_c {
		width: 94%;
		margin-left: 3%;
		height: 99px;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-top: -15px;
	}

	.shareindexStyle .center_item {
		width: calc((100vw - 25px)/3);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.shareindexStyle .sharebox_menus {
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}

	.sharebox_menus .menus_item {
		width: 100%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}

	.sharebox_menus .menus_item .item_text {
		font-size: 13px;
		margin: 5px 0;
	}

	.shareindexStyle .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
	}

	.shareindexStyle .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.shareindexStyle .headStatus .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}

	.shareindexStyle .buyvip {
		position: absolute;
		width: 116px;
		height: 64px;
		right: 0;
		top: 100px;
	}
</style>
