<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 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.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) {
				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;
			},
			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%;
		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/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;
		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;
		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;
		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;
	}

	.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>
