<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 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 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 :src="sharedata.UserInfo.GradeIcon" style="width:67px;height:22px;"></image>
							</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 style="width: 100%;margin-top: 5px;">
					<span style='font: 12px;color: #FFFFFF;margin-left: 30px;'>等级：{{sharedata.UserInfo.GradeName}}</span>
				</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>
				<!-- 会员购买 -->	
				<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">
					<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'>
					<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="sharedata.CustomModel.PromoteQRCodeImage" 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 style="width: 100%;height: 30px;background: #f3f4f6;"></view>
		
		</view>
		
		
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'goback'></auth>
	</view>
	</scroll-view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	export default {
		components:{
			auth,
		},
		data() {
			return {
				 pageTitle: "分销中心",
				 contentHeight:0,
				 mainColor:'',
				 secondary:'',
				 sharestatus:{},
				 userinfo:{},
				 sharedata:{},
				 
				 showAuth:false,
				 nav:0,
				 headStyle:{},
				 scrollTop:0,
				 words:{},
				 UserPageType:{},//校园的数据
			}
		},
		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("UserPageType")?uni.getStorageSync("UserPageType"):{};
		},
		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()
				// this.getuserinfo()
			}
		},
		methods: {
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  // this.showAuth=false;
			  this.init()
			  // this.getuserinfo()
			},
			goback(){
				uni.navigateBack()
			},
			init(){
				uni.showNavigationBarLoading();
				
				this.request2(
				 {
				 	url: '/api/AppletUser/GetUserDistrbutorStatus',
				 	data: {}
				 },	
			  (res) => {
				uni.hideNavigationBarLoading()
				this.sharestatus = res.data
				// if(res.data.is_can_apply==false && res.data.status==1){
				// 	this.getorder()
				// }
				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
			    }
			  );
		  },
		  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;
		    //this.$forceUpdate();
		  },
		  scrollTopHandler() {
		    this.scrollTop = 0;
		  },
		  
		}
	}
</script>

<style>
	.shareindexStyle{
		background: #f3f4f6;
	}
	image{will-change: transform}
	.shareindexStyle .shareadd{
		width: 100%;
		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%;
		/* padding: 10px; */
		height: 242px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../../../static/images/shareTop.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.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;
		/* padding: 5px 0; */
		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: 94%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20px;
		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;
		/* padding: 15px 15px; */
		margin-top: -15px;
		
	}
	.shareindexStyle .center_item{
		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;
		/* padding: 10px 0; */
		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;
	  /* text-align: center; */
	}
	.shareindexStyle .buyvip{
		position: absolute;
		width: 116px;
		height: 64px;
		right: 0;
		top: 100px; 
	}
</style>
