<template>
	<scroll-view
		 :scroll-y="true"
		@scroll="scrollHandler"
		@scrolltoupper="scrollTopHandler"
		style="height: 100vh;">
	<view class="mySupplierindexStyle" :style="{'height':contentHeight}">
		
		<view
		  class="headStatus"
		  v-if="scrollTop > 50"
		  :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 style="width: 100%;height: 100%;" >
			<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="u.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;'>
									{{u.Name?u.Name:''}}
								</Text>
								
							</view>
								
							
					
						</view>	
					</view>
					
				</view>
				<!-- <view style="width: 100%;margin-top: 5px;">
					<span style='font: 12px;color: #FFFFFF;margin-left: 30px;'>等级：{{mySupplierC.UserInfo.GradeName}}</span>
				</view> -->
				
				<view class="Receiptbalance">
					<view class="Receiptbalance_item">
							<span >已结算佣金</span>
							<span style='font-size: 18px;color: #111111;font-weight: 200;'>{{mySupplierC.SettlementIntroduction?(mySupplierC.SettlementIntroduction>10000?(mySupplierC.SettlementIntroduction/10000).toFixed(1)+'w':mySupplierC.SettlementIntroduction):0}}元</span>
							
						
					</view>
					<view style="width: 1px;height: 34px;background: #E8E8E8;"></view>
					<view class="Receiptbalance_item"	>
							<span>未结算佣金</span>
							<span style='font-size: 18px;color: #111111;font-weight: 200;'>{{mySupplierC.NoSettlementIntroduction?(mySupplierC.NoSettlementIntroduction>10000?(mySupplierC.NoSettlementIntroduction/10000).toFixed(1)+'w':mySupplierC.NoSettlementIntroduction):0}}元</span>
							
						
					</view>
				</view>
			</view>
			
			
			<view class="sharebox_menus" >
				<view class="menus_item" @click="goUrl('/pages/mySupplier/myBill')">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<image src="../../../static/images/supplierbill.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;">
						<text :style="{color:mainColor}">{{mySupplierC.TotalDistributorBill!=null ?mySupplierC.TotalDistributorBill: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/mySupplier/mySupplierList')">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<image src="../../../static/images/mysupplier.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;">
						<text :style="{color:mainColor}">{{mySupplierC.SupplierCount!=null ?mySupplierC.SupplierCount: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_t('/pages/mySupplier/myProduct')">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<image src="../../../static/images/supplierShop.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;">
						<text :style="{color:mainColor}">{{mySupplierC.GoodsCount!=null ?mySupplierC.GoodsCount: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/mySupplier/supplierOrder')">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<image src="../../../static/images/supplierFy.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;">
						<text :style="{color:mainColor}">{{mySupplierC.TotalOrderIntroduction!=null ?mySupplierC.TotalOrderIntroduction:0}}</text>
						<text style="color: #A5A3AB;margin-right: 5px;">元</text>
						<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:'',
				 userinfo:{},
				 mySupplierC:{},
				 
				 showAuth:false,
				 nav:0,
				 headStyle:{},
				 scrollTop:0,
				 words:{},
				 u:{},
			}
		},
		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';
		},
		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");
			console.log(this.u)
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}else{
				this.init()
				
			}
		},
		methods: {
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  this.showAuth=false;
			  this.init()
			},
			goback(){
				uni.navigateBack()
			},
			init(){
				uni.showNavigationBarLoading();
				
				this.request2(
				 {
				 	url: '/api/AppletUser/GetUserMemberSupplierCenter',
				 	data: {}
				 },	
			  (res) => {
				uni.hideNavigationBarLoading()
					this.mySupplierC = res.data
				
			  }
			);
		  },
		
		  
		  getUserCenter(){
			  uni.showNavigationBarLoading();
			  	
			  	this.request2(
					{
						url: '/api/AppletUser/GetUserDistrbutorCenter',
						data: {}
					},		
			    (res) => {
			  	uni.hideNavigationBarLoading()
			  	this.mySupplierC = res.data
			    }
			  );
		  },
	
		  redirectPrev() {
		  	
		    if (this.prevPage != "") {
		      uni.navigateBack({
		        delta: 1,
		      });
		    }
		  },
		  goUrl(url){
			  console.log(url)
			  
				  uni.navigateTo({
				    url: url
				  });
			  
			  
		  },
		  goUrl_t(url){
			 uni.navigateTo({
			   url: url+'?ID='+ this.mySupplierC.supplierIds
			 }); 
		  },
		  goUrl2(url){
			  
			  uni.navigateTo({
			    url: url
			  });
		  },
		  scrollHandler(e) {
		    this.scrollTop = e.detail.scrollTop;
		    //this.$forceUpdate();
		  },
		  scrollTopHandler() {
		    this.scrollTop = 0;
		  },
		  
		}
	}
</script>

<style>
	.mySupplierindexStyle{
		background: #f3f4f6;
	}
	image{will-change: transform}
	.mySupplierindexStyle .shareadd{
		width: 100%;
		display: flex;
		flex-direction: column;align-items: center;
		padding-top: 50px;
	}
	.mySupplierindexStyle .shareadd .shareadd_b{
		width: 60%;height: 45px;border-radius: 22.5px;display: flex;align-items: center;justify-content: center;color: #fff;margin-top: 20px;
	}
	.mySupplierindexStyle .sharebox_top{
		width: 100%;
		/* padding: 10px; */
		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../../../static/images/mysupperbg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		
	}
	.mySupplierindexStyle .sharebox_top .sharebox_top_nav{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 10px;
	}
	.mySupplierindexStyle .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;
		
	}
	.mySupplierindexStyle .sharebox_top .sharebox_top_t .top_t_l{
		margin-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;	
		
	}
	.mySupplierindexStyle .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;
	}
	.mySupplierindexStyle .steatus_t{
		width: 100%;display: flex;flex-direction: column;align-items: center;
	}
	.mySupplierindexStyle .sharebox_topc{
		width: 94%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20px;
		margin-top: 18px;
	}
	.mySupplierindexStyle .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;
		
	}
	.mySupplierindexStyle .center_item{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.mySupplierindexStyle .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: 45px;
	}
	.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;
	}
	.mySupplierindexStyle .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;
	 
	}
	.mySupplierindexStyle .headStatus .arrow {
	  height: 24px;
	  margin: 5px 10px;
	  width: 24px;
	}
	.mySupplierindexStyle .headStatus .title {
	  font-size: 16px;
	  color: #000;
	  flex: 1;
	  width: 1px;
	  margin-left: 10px;
	  line-height: 34px;
	  /* text-align: center; */
	}
	.mySupplierindexStyle .buyvip{
		position: absolute;
		width: 116px;
		height: 64px;
		right: 0;
		top: 100px; 
	}
 .mySupplierindexStyle .Receiptbalance{
	width: 94%;
	height: 75px;
	position: absolute;
	left: 3%;
	bottom: -35px;
	background: #FFFFFF;
	border-radius: 6px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding: 0 10px;
}
.mySupplierindexStyle .Receiptbalance_item{
	width: 40%;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-size: 12px;
	color: #111111;
	
}
</style>
