<style>
	.cdetailStyle .sharebox_top {
		width: 100%;
		height: 210px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../../static/images/shareTop.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

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

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

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

	.cdetailStyle .sharebox_topc {
		width: 94%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20px;
		margin-top: 18px;
	}

	.cdetailStyle .center_item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.cdetailStyle .listbox {
		width: 100%;
		background: #fff;
		padding: 0 15px;
		/* margin-top: 15px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 5px auto;
		border: 1px solid #F7F7F7;
		border-radius: 10px;
	}

	.cdetailStyle .box_top {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
	}

	.cdetailStyle .box_r {
		width: calc(100vw - 30px - 32px - 20px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cdetailStyle .box_r .l_name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 14px;
		color: #000000;
		font-weight: bold;
	}

	.cdetailStyle .box_b {
		width: 100%;
		height: 35px;
		padding: 0 10px;
		background: #F7F5F5;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 6px;
		margin: 10px 0;
		font-size:13px;
		color: #878787;
	}

	.cdetailStyle .redStyle {
		color: #FF3F47
	}

	.cdetailStyle .grayStyle {
		color: #999999
	}

	.cdetailStyle .greenStyle {
		color: green
	}

	.cdetailStyle .buy_List {
		width: 100%;
		margin: 10px auto;
		display: flex;
		justify-content: space-between;
	}

	.cdetailStyle .bug_GoodImg {
		width: 65px;
		height: 65px;
		border-radius: 6px;
		overflow: hidden;
	}

	.cdetailStyle .bug_GoodImg img {
		width: 100%;
		height: 100%;
	}

	.cdetailStyle .share_gdtitle {
		font-size: 13px;
		color: #111111;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.cdetailStyle .share_gg {
		color: #555555;
		font-size: 12px;
	}

	.cdetailStyle .share_yj {
		padding: 3px 10px;
		background-color: #F7F5F5;
		font-size: 12px;
		color: #111111;
	}

	.cdetailStyle .viewBox {
		width: 123px;
		height: 174px;
		margin-right: 4px;
		border: 1px solid #F7F7F7;
		padding: 4px;
	}

	.cdetailStyle .view_main {
		position: relative;
		margin-bottom: 12px;
		border: 1px solid #F7F7F7;
		border-radius: 10rpx;
		overflow: hidden;
		padding-bottom: 10rpx;

	}

	.cdetailStyle .view_imgbox {
		width: 100%;
		height: 0;
		padding-top: 100%;
		position: relative;
	}

	.cdetailStyle .viewImg {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.cdetailStyle .viewImg img {
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}

	.cdetailStyle .view_title {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 3px 0;
		font-size: 13px;
		height: 37px;
		margin: 5px;
	}

	.cdetailStyle .Sone_Line {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.cdetailStyle .order_userName {
		max-width: 130px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.cdetailStyle .popupbox_t{
		width: 100%;
		border-radius: 10px;
		background: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		position: relative;
		font-family: aa;
		/* overflow: auto; */
		
	}
	.cdetailStyle .time-l{
		width: 96%;
		height: 60px;
		border-radius: 10px;
		background: #F5F7F7;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.cdetailStyle .u-node {
	  width: 24rpx;
	  height: 24rpx;
	  border-radius: 100rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  
	}
	.cdetailStyle .u-time-axis-node.data-v-dba4c432{
		top:35rpx
	}
	.cdetailStyle .u-time-axis.data-v-bd98783e:before{
		top: 32rpx;

	}
</style>
<template>
	<view class="cdetailStyle" :style="{'height':contentHeight}">
		<view style="width:100%;height:100%">
			<view class="sh_head">
				<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="headData.Photo" size="130"></u-avatar>
							<view style="display: flex;flex-direction: column;color: #fff;margin:7px 0 0 16px;">
								<view style="display: flex;flex-direction: row;align-items: center">
									<Text style='font-size: 18px;max-width: 120px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
										{{headData.Name}}
									</Text>
									<image :src="headData.Icon" style="width:67px;height:22px;margin-left:5px;"></image>
								</view>
								<Text style="font-size: 12px;margin-top: 5px;height:19px;font-family:'cuIcon'">{{headData.createDateStr}}</Text>
							</view>
						</view>
						
						<image mode="widthFix" @click="godiagram" src="../../static/images/useRrelationship.png" style="width:75px;height:24px;"></image>
						
					</view>
					<view class="sharebox_topc">
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;justify-content: space-between;">
							<Text>累计返佣</Text>
							<Text>{{headData.totalCommission}}元</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>本月返佣</Text>
							<Text>{{headData.currentCommission}}元</Text>
						</view>
					</view>
				</view>
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color='mainColor'></u-tabs>
			</view>

			<view style="background-color: #fff;" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
				<scroll-view v-if="current==0" :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				 :style="{ height: '100%' }">
					<template v-if="customData.length==0">
						<u-empty text="暂无数据" mode="data"></u-empty>
					</template>
					<template v-else>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<view v-for="(item, index) in customData" :key="index" class="listbox">
								<view class="box_top">
									<u-avatar :src="item.Photo" size="64"></u-avatar>
									<view class="box_r" style="margin-left:10px;">
										<view style="width: 100%;display: flex;flex-direction: row;align-items: center;
										justify-content: space-between;">
											<view style="width: 190px;">
												<Text class='l_name'>{{item.UserName}}</Text>
											</view>
											<Text style='font-size: 12px;'>推广{{item.GeneralizeNum}}人</Text>
										</view>
										<Text style='font-size: 12px;color: #999999;margin-top:3px;'>{{item.CreateDate}}</Text>
									</view>
								</view>
								<view class="box_b">
									<Text><text style='color: #FF3F47;'> {{item.Income}}</text> 元</Text>
									<Text>{{item.OrderNum}}个订单</Text>
								</view>
							</view>
						</view>
						<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" />
					</template>
				</scroll-view>
				<!-- 订单列表	 -->
				<scroll-view v-if="current==1" :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				 :style="{ height: '100%' }">
					<template v-if="orderData.length==0">
						<u-empty text="暂无数据" mode="data"></u-empty>
					</template>
					<template v-else>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<view v-for="(item, index) in orderData" :key="index" class="listbox">
								<view class="box_top">
									<u-avatar :src="item.Photo" size="64"></u-avatar>
									<view class="box_r" style="margin-left:10px;display:flex;align-items: center;">
										<view style="width: 100%;display: flex;flex-direction: row;align-items: center;
										justify-content: space-between;">
											<view style="display:flex;">
												<Text class='order_userName'>{{item.UserName}}</Text>
												<img :src="item.Icon" style="width:67px;height:22px;margin-left:5px;" alt="" />
											</view>
											<Text style='font-size: 12px;' :class="{'redStyle':item.StatusName=='已完成',
											'grayStyle':item.StatusName=='已付款','greenStyle':item.StatusName=='待付款'}">{{item.StatusName}}</Text>
										</view>
									</view>
								</view>
								<view class="buy_List" v-for="(subItem,subIndex) in item.DetailList" :key="subIndex" @click="redirectToDetail(item.OrderId)">
									<view class="bug_GoodImg">
										<img :src="subItem.CoverImagePath" alt="" />
									</view>
									<view style="width:77%;">
										<view class="share_gdtitle">{{subItem.GoodsName}}</view>
										<view class="share_gg Sone_Line" style="margin:8px 0">规格：
											<text v-for="(tItem,tindex) in subItem.SpecificationList" :key="tindex" style="margin-right:5px;">
												{{tItem}}
											</text>
										</view>
										<view style="display:flex;justify-content: space-between;">
											<view class="share_gg">×{{subItem.Number}}</view>
											<view class="share_yj">
												已得佣金：<text style="color:#FF3F47">{{item.Commission}}</text>元
											</view>
										</view>
									</view>
								</view>
								<view class="box_b">
									<Text>
										<text>订单号：{{item.OrderNo}}</text>
									</Text>
									<text @click="copyHandler(item.OrderNo)">复制</text>
								</view>
							</view>
						</view>
						<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" />
					</template>
				</scroll-view>
				<!-- 浏览记录 -->
				<scroll-view v-if="current==2" :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				 :style="{ height: '100%',padding:'12px'}">
					<template v-if="viewData.length==0">
						<u-empty text="暂无数据" mode="data"></u-empty>
					</template>
					<template v-else>
						<u-row gutter="24">
							<u-col span="6" v-for="(item, gli) in viewData" :key="gli">
								<view class="view_main" @click="openGood(item)">
									<view class="view_imgbox">
										<view class="viewImg">
											<img :src="item.GoodsImgPath" alt="" />
										</view>
									</view>
									<view class="view_title">{{item.GoodsName}}</view>
									<view style="display:flex;justify-content: space-between;margin:0 5px;align-items: center;">
										<text style="color:#E73727;">¥{{item.Price}}</text>
										<text style="font-size:12px;font-family:'cuIcon'">{{getTime(item.CreateDate)}}</text>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" />
					</template>
				</scroll-view>
			</view>
		</view>
		<u-popup v-model="ISpopup"
			mode="center"
			length="90%"
		>
				<view class="popupbox_t" :style="{'height':'423px'}">
					<view style="padding: 10px 0;">
						用户关系
					</view>
					<view style="width: 100%;overflow-y: auto;">
						<view style="width: 100%;margin-left: 10px;">
							<u-time-line>
							  <u-time-line-item v-for="(x, i) in RelationList" :key="i" >
							    <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
								<template v-slot:node>
								  <view
								   class="u-node"
								   :style="{ background: mainColor, }"
								   ></view
								  >
								</template>
							    <template v-slot:content>
							      <view  class="time-l">
									  <u-avatar :src="x.UserInfo.Photo" size="80" style='margin-left: 10px;'></u-avatar>
							        
									<view style="display: flex;flex-direction: column;margin-left: 10px;height: 35px;justify-content: space-between;">
										<text style="font-size: 12px;color: #111111;font-weight: bold;max-width: 200px;
											overflow: hidden;
											white-space: nowrap;
											text-overflow: ellipsis;
											font-weight: bold;
											font-family: aa;
										">{{x.MySelf==true?'(我自己)':''}}{{x.UserInfo.Name}}</text>
										<text style="font-size: 11px;color: #999999;">{{x.UserInfo.CreateDate}}</text>
									</view>		
							      </view>
							    </template>
								
							  </u-time-line-item>
							</u-time-line>
						</view>
						
					</view>
					
					
					
					
					<view style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;" @click="ISpopup= false">
						<u-icon name="cross" size="24" color="#000" ></u-icon>
					</view>
				</view>
		</u-popup>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "团队成员信息",
				contentHeight: 0,
				mainColor: '',
				secondary: '',
				list: [{
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}],
				current: 0,
				nav: 0,
				//获取顶部msg
				headMsg: {
					UserId: 0
				},
				headData: {},
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				//客户详情数据
				customData: [],
				customMsg: {
					pageIndex: 1,
					pageSize: 10,
					FXGradeId: 0,
					Name: '', //昵称
					SortNum: 0, // 0时间降序 1时间升序 2人数倒序 3人数升序
					NewUserId: 0
				},
				page_count: 1,
				page_count2: 1,
				page_count3: 1,
				//订单信息
				orderMsg: {
					pageIndex: 1,
					pageSize: 10,
					UserId: 0,
					SupplierId: 0,
					GoodsName: '',
					CommissionState: 0,
					StartTime: '',
					EndTime: '',
					NewUserId: 0
				},
				orderData: [],
				//浏览记录
				viewMsg: {
					pageIndex: 1,
					pageSize: 18,
					StartTime: '',
					EndTime: '',
					NewUserId: 0
				},
				viewData: [],
				scrollHeight: 0,
				ISpopup:false,
				RelationList:[],

			}
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = uni.getStorageSync("basedata") ?
				uni.getStorageSync("basedata").bar_title :
				[];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.getHeadHeight();
		},
		onLoad(option) {
			if (option.UserId) {
				this.headMsg.UserId = option.UserId;
				this.customMsg.NewUserId = option.UserId;
				this.orderMsg.NewUserId = option.UserId;
				this.viewMsg.NewUserId = option.UserId;
			}
			this.getHead();
			this.getCustomData();
			this.getOrder();
			this.getView();
		},
		methods: {
			//跳转至订单详情
			redirectToDetail(id) {
				uni.navigateTo({
					url: "/pages/order/order-detail?id=" + id + '&NewUserId=' + this.headMsg.UserId
				});
			},
			//跳转至商品详情
			openGood(item) {
				uni.navigateTo({
					url: '/pages/goods/goods?GoodsId=' + item.GoodsId
				});
			},
			getHeadHeight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".sh_head")
					.boundingClientRect((data) => {
						that.scrollHeight = data.height + "px";
					})
					.exec();
			},
			//复制文字
			copyHandler(OrderNo) {
			  uni.setClipboardData({
			    data: OrderNo
			  });
			},
			change(index) {
				this.current = index;
				this.customData = [];
				this.orderData = [];
				this.viewData = [];
				if (index == 0) {
					this.customMsg.pageIndex = 1;
					this.getCustomData();
				}
				if (index == 1) {
					this.orderMsg.pageIndex = 1;
					this.getOrder();
				}
				if (index == 2) {
					this.fun_date(60);
					this.viewMsg.pageIndex = 1;
					this.getView();
				}
			},
			getHead() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletUser/GetTeamUserInfo',
						data: this.headMsg
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.headData = res.data;
						}
					}
				);
			},
			//获取客户详情数据
			getCustomData() {
				this.customCount = ''
				this.request2({
						url: '/api/AppletUser/GetUserMyTeamPageListForFX',
						data: this.customMsg
					},
					(res) => {
						if (res.resultCode == 1) {
							this.customData = this.customData.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
							if (this.list[0].name == '') {
								this.list[0].name = '客户详情(' + res.data.count + ')'
							}
						}
					}
				);
			},
			//获取订单列表
			getOrder() {
				this.request2({
						url: '/api/AppletOrder/GetUserDistributionOrdersPageList',
						data: this.orderMsg
					},
					(res) => {
						this.orderData = this.orderData.concat(res.data.pageData);
						this.page_count2 = res.data.pageCount;
						if (this.page_count2 == 1) {
							this.status = "nomore";
						}
						if (this.list[1].name == '') {
							this.list[1].name = '订单列表(' + res.data.count + ')'
						}
					}
				);
			},
			//获取浏览记录
			getView() {
				this.request2({
						url: '/api/AppletUser/GetUserFootMarkPageList',
						data: this.viewMsg
					},
					res => {
						if (res.resultCode == 1) {
							this.viewData = this.viewData.concat(res.data.pageData);
							this.page_count3 = res.data.pageCount;
							if (this.page_count3 == 1) {
								this.status = "nomore";
							}
							if (this.list[2].name == '') {
								this.list[2].name = '浏览记录(' + res.data.count + ')'
							}
						}
					}
				);
			},
			//日期返回月-日
			getTime(date) {
				var year = "",
					month = "",
					day = "",
					str = '';
				if (date) {
					month = date.substr(5, 2);
					day = date.substr(8, 2);
					str = month + '-' + day;
				}
				return str;
			},
			//获取往前一个月日期
			fun_date(num) {
				let that = this
				let date1 = new Date();
				//今天时间
				let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() + ' ' + '23:59:59'
				let date2 = new Date(date1);
				date2.setDate(date1.getDate() - num);
				//num是正数表示之后的时间，num负数表示之前的时间，0表示今天
				let time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate() + ' ' + '00:00:00';
				let time3 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate() + ' ' + '23:59:59';
				that.viewMsg.StartTime = time2;
				that.viewMsg.EndTime = time1;
			},
			//返回上一页
			redirectPrev() {
				uni.navigateBack({
					delta: 1,
				});
			},
			//滚动加载
			lower() {
				//加载客户详情
				if (this.current == 0) {
					if (this.customMsg.pageIndex < this.page_count) {
						this.customMsg.pageIndex++;
						this.status = "loading";
						this.getCustomData();
					} else {
						this.status = "nomore";
					}
				}
				//加载订单列表
				if (this.current == 1) {
					if (this.orderMsg.pageIndex < this.page_count2) {
						this.orderMsg.pageIndex++;
						this.status = "loading";
						this.getOrder();
					} else {
						this.status = "nomore";
					}
				}
				if (this.current == 2) {
					if (this.viewMsg.pageIndex < this.page_count3) {
						this.viewMsg.pageIndex++;
						this.status = "loading";
						this.getView();
					} else {
						this.status = "nomore";
					}
				}
			},
			godiagram(){//打开关系图
				this.ISpopup = true;
				this.request2({
						url: '/api/AppletUser/GetMyUserHierarchicalRelationList',
						data: this.headMsg
					},
					res => {
						if (res.resultCode == 1) {
							
							this.RelationList = res.data
						}
					}
				);
				
			}
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
		},
	}
</script>

<style>
	.cdetailStyle {
		background: #f3f4f6;
	}
</style>
