<template>
	<view class="container">
		<view class="myHeader">
			<!-- #ifdef APP -->
			<view class="backArrow">
				<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
				<text style="font-size: 30rpx;">我的团队</text>
			</view>
			<!-- #endif -->
			
			<view class="timeBox" v-if="currentBtn == '2'" @click="showTime1 = true">
				<CommonTimePicker
					:timeData="startDate"
					:visible="showTime1" 
					iconColor="#fff"
					@confirmDate="changeStartTime" 
					@closeTime="showTime1=false"
				/>
			</view>
			<view class="renshu" :style="{marginTop}">
				<view class="top">
					<view class="left">
						<text v-if="currentBtn == '1'">团队有效人数</text>
						<text v-if="currentBtn == '2'">团队标准销售额</text>
					</view>
					<view class="right" @click="changeCurrentBtn">
						<text v-if="currentBtn == '1'">查看业绩</text>
						<text v-if="currentBtn == '2'">查看团队</text>
					</view>
				</view>
				<view class="bottom">
					<text v-if="currentBtn == '1'">{{teamCount}}人</text>
					<text v-if="currentBtn == '2'">￥{{monthStandardSales}}</text>
				</view>
			</view>
			<view class="moneyBox">
				<view class="one">
					<view v-if="currentBtn == '1'" class="">
						￥{{monthStandardSales}}
					</view>
					<view v-if="currentBtn == '2'" class="">
						￥{{totalCoursePrice}}
					</view>
					<view style="margin-top: 5rpx;">
						<text v-if="currentBtn == '1'">本月团队标准销售额</text>
						<text v-if="currentBtn == '2'">总销售额</text>
					</view>
				</view>
				<view class="two">
					<view class="">
						{{totalOrder}}
					</view>
					<view style="margin-top: 5rpx;">
						<text>团队出单数</text>
					</view>
				</view>
			</view>
		</view>
		<view 
			v-if="currentBtn == '2'"
			class="filterBox" 
			style="background: none;margin: 10rpx 0;">
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
				<view
					class="scrollBtn" 
					v-for="item in btnList" 
					:key="item.id"
					:class="{active:item.id == currentFilterBtn }"
					@click="sortswitch(item)" 
				>
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="filterBox" :style="{marginTop:currentBtn=='1'?'20rpx':''}">
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
				<view
					class="scroll-view-item_H" 
					v-for="item in tabList" 
					:key="item.id"
					:class="{active:item.id == currentTab }"
					@click="changeTab(item)"
				>
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="tableBox">
			<view class="table">
				<view class="content-box">
					<view class="content-box-title" v-for="(item,index) in tableHeaderList" :key="index">
						<text class="title">{{item.title}}</text>
					</view>
				</view>
				<view v-if="currentBtn == '1'&&myTeamList.length>0">
					<view class="content-sam-box" v-for="(pointItem,index) in myTeamList" :key="index">
						<span class="content-box-title cell">{{pointItem.parentName}}</span>
						<span class="content-box-title cell">{{pointItem.name}}</span>
						<span class="content-box-title cell">{{pointItem.levelName}}</span>
						<span class="content-box-title cell">{{pointItem.referrer}}</span>
					</view>
				</view>
				<view v-else-if="currentBtn == '2'&&currentFilterBtn!=='3'&& myTeamAchievementList.length>0">
					<view class="content-sam-box" v-for="(pointItem,index) in myTeamAchievementList" :key="index">
						<span class="content-box-title cell">{{pointItem.name}}</span>
						<span class="content-box-title cell">{{pointItem.orderNum}}</span>
						<span class="content-box-title cell">￥{{pointItem.coursePrice}}</span>
						<span class="content-box-title cell" >￥{{pointItem.standardSales  || '0.00'}}</span>
					</view>
				</view>
				<view v-else-if="currentBtn == '2'&& currentFilterBtn=='3'&& myTeamAchievementList.length>0">
					<view class="content-sam-box" v-for="(pointItem,index) in myTeamAchievementList" :key="index">
						<span class="content-box-title cell">{{pointItem.saleDate}}</span>
						<span class="content-box-title cell">{{pointItem.orderNum}}</span>
						<span class="content-box-title cell">￥{{pointItem.coursePrice}}</span>
						<span class="content-box-title cell" >￥{{pointItem.standardSales  || '0.00'}}</span>
					</view>
				</view>
				<view class="empty" v-else>
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonTimePicker from '@/components/commonTimePicker/commonTimePicker.vue';
	import dataHandling from "@/util/dataHandling";
	import api from "@/api/api";
	export default {
		components: {
			CommonTimePicker
		},
		data() {
			return {
				showTime1:false,
				startDate:{year:dataHandling.getDateParts().year,month:dataHandling.getDateParts().month},
				tabList:[
					{title:'全部',id: '1',type:4},
					{title:'直辖团队',id: '2',type:1},
					{title:'所辖团队',id: '3',type:2},
				],
				btnList:[
					{title:'按标准销售额',id: '1',sortType:5},
					{title:'按销售额',id: '2',sortType:2},
					{title:'按销售日期',id: '3',sortType:4},
				],
				
				tableHeaderList:[
					{title:'上级',id:'1'},
					{title:'成员',id:'2'},
					{title:'职级',id:'3'},
					{title:'关系',id:'4'},
				],
				currentTab:'1', 
				currentBtn:'1', // 1代表团队 2代表业绩
				currentFilterBtn:'1',
				teamCount:0,//团队总人数，育成团队人数不算
				userId: uni.getStorageSync('cffp_userId'),
				otherList: null, // 直辖团队
				directList: null, //所辖团队数组
				myTeamList:[],//我的团队表格数据，
				myTeamData:{},//我的团队总数据，
				CffpOrgInfoReqVO: {
					userId: uni.getStorageSync('cffp_userId'),
					startDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1 > 9 ? new Date().getMonth() + 1 : '0'+ (new Date().getMonth() + 1)}`,
					endDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1 > 9 ? new Date().getMonth() + 1 : '0'+ (new Date().getMonth() + 1)}`,
					courseOrPolicy: '1',
					type: '2',
					sortType:5
				},
				totalOrder: '0', //总单数
				totalCoursePrice: '0.00', // 总销售额
				monthStandardSales:'0.00',//本月团队标准销售额
				myTeamAchievementList:[],//我的业绩数据列表,
				marginTop:'30rpx'
			}
		},
		watch: {
		    currentBtn: {
		        deep: true,
		        handler(newVal) {
		            if(newVal == '1') {
		                this.tableHeaderList = [
							{title:'上级',id:'1'},
							{title:'成员',id:'2'},
							{title:'职级',id:'3'},
							{title:'关系',id:'4'},
						]
						// #ifdef H5
						this.marginTop = '30rpx'
						// #endif
						this.getmyseatem()
						return
		            }
					if(newVal == '2') {
					    this.tableHeaderList = [
							{title:'成员',id:'1'},
							{title:'单数',id:'2'},
							{title:'销售额',id:'3'},
							{title:'标准销售额',id:'4'},
						]
						this.getqueryTeamAchievement()
						// #ifdef H5
						this.marginTop = '0rpx'
						// #endif
						return
					}
		        }
		    },
			currentTab: {
			    deep: true,
			    handler(newVal) {
					this.myTeamList = []
			        if(newVal == '1') {
			            if(this.myTeamData.other && this.myTeamData.other.length != 0 && this.myTeamData.other != null){
							this.myTeamList.push(...this.myTeamData['other'])
						}
						if(this.myTeamData.directList && this.myTeamData.directList.length != 0 && this.myTeamData.directList != null){
							this.myTeamList.push( ...this.myTeamData['directList'])
						}
						return
			        }
					if(newVal == '2') {
					   if(this.myTeamData.other && this.myTeamData.other.length != 0 && this.myTeamData.other != null){
					   	this.myTeamList.push(...this.myTeamData['other'])
					   } 
					}
					if(newVal == '3'){
						if(this.myTeamData.directList && this.myTeamData.directList.length != 0 && this.myTeamData.directList != null){
							this.myTeamList.push( ...this.myTeamData['directList'])
						}
					}
			    }
			},
			currentFilterBtn: {
			    deep: true,
			    handler(newVal) {
					if(newVal == '3'&&this.currentBtn=='2') {
					    this.tableHeaderList = [
							{title:'销售日期',id:'1'},
							{title:'单数',id:'2'},
							{title:'销售额',id:'3'},
							{title:'标准销售额',id:'4'},
						]
						this.getqueryTeamAchievement()
						return
					}else {
						this.tableHeaderList = [
							{title:'成员',id:'1'},
							{title:'单数',id:'2'},
							{title:'销售额',id:'3'},
							{title:'标准销售额',id:'4'},
						]
						this.getqueryTeamAchievement()
						return
					}
			    }
			},
		},
		onLoad(){
			this.getmyseatem()
			this.getqueryTeamAchievement()
		},
		methods: {
			sortswitch(obj) {
				this.currentFilterBtn = obj.id
				this.CffpOrgInfoReqVO.sortType = obj.sortType
				this.getqueryTeamAchievement()
				// if(obj.sortType == 4){
				// 	this.CffpOrgInfoReqVO.sortType = obj.sortType
				// 	this.getqueryTeamAchievement()
				// }else{
				// 	delete this.CffpOrgInfoReqVO.sortType
				// 	this.getqueryTeamAchievement()
				// }
			},
			changeTab(item){
				this.currentTab = item.id
				if(this.currentBtn == '2'){
					this.getqueryTeamAchievement()
				}
				
			},
			getqueryTeamAchievement() {
					this.CffpOrgInfoReqVO.queryType = this.tabList.filter(item=>item.id == this.currentTab)[0].type
					this.CffpOrgInfoReqVO.sortType = this.btnList.filter(item=>item.id == this.currentFilterBtn)[0].sortType
				api.queryTeamAchievement(this.CffpOrgInfoReqVO).then(res => {
					if (res['success']) {
						this.myTeamAchievementList = []
						// this.listType = true
						this.myTeamAchievementList = res.data.list || [];
						if(this.myTeamAchievementList.length>0){
							this.myTeamAchievementList.forEach(item=>{
								item.saleDate = dataHandling.dateFormat2(item.saleDate,'yyyy-MM-dd')
								item.coursePrice = Number(item.coursePrice).toFixed(2) || '0.00'
							})
						}
						this.totalOrder = res.data.totalOrder ? res.data.totalOrder : '0';
						this.totalCoursePrice = res.data.totalCoursePrice ? Number(res.data.totalCoursePrice).toFixed(2) : '0.00';
						this.monthStandardSales = res.data.monthStandardSales ? Number(res.data.monthStandardSales).toFixed(2) : '0.00';
					}
				})
			},
			// 获取团队数据
			getmyseatem() {
				this.myTeamList = []
				api.queryMyTeamInfo({
					userId: this.userId,
					type: '1'
				}).then(res =>{
					if(res['success']){
						let data = res.data
						this.myTeamData = res.data
						if(data.orgInfo) {
							this.teamCount = data.orgInfo.count
						}
						if(data.other && data.other.length != 0 && data.other != null){
							this.myTeamList.push(...data['other'])
						}
						if(data.directList && data.directList.length != 0 && data.directList != null){
							this.myTeamList.push( ...data['directList'])
						}
					}
				})
			},
			changeStartTime(obj){
				this.startDate = obj
				this.CffpOrgInfoReqVO.startDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.CffpOrgInfoReqVO.endDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.getqueryTeamAchievement()
				this.showTime1 = false
			},
			changeCurrentBtn(){
				this.currentTab = '1'
				this.currentFilterBtn = '1'
				if(this.currentBtn == '1'){
					this.currentBtn = '2'
					return
				}
				if(this.currentBtn == '2'){
					this.currentBtn = '1'
				}
			},
			goBack(){
				uni.navigateBack({
					delta: 1  
				});
			},
			goteam(item) {
				if(item.type===1){
					uni.navigateTo({
						url:`/pages/personalCenter/teamMembers/teamMembers`,
					})
				}else{
					uni.navigateTo({
						url:`/pages/personalCenter/teamPerformance/teamPerformance`,
					})
				}
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: rgba(235, 239, 247, 1);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.myHeader{
			color: #fff;
			box-sizing: border-box;
			background: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
			.backArrow{
				box-sizing: border-box;
				display: flex;
				height: 60rpx;
				justify-content: space-between;
				align-items: center;
				position: relative;
				width: 100%;
				margin-bottom: 10rpx;
				color: #fff;
				margin-top: 20rpx;
				text:nth-child(2){
					width: 100%;
					text-align: center;
					position: absolute;
				}
			}
			.timeBox{
				margin-top: 30rpx;
				padding-left: 25rpx;
				width: 50%;
			}
			.renshu{
				padding: 10rpx 25rpx;
				color: #fff;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					.right{
						padding: 10rpx 15rpx;
						background-color: #fff;
						border-radius: 30rpx;
						color: rgba(32, 39, 155, 1);
						font-size: 25rpx;
					}
				}
				.bottom{
					font-size: 34rpx;
					font-weight: 500;
				}
			}
			.moneyBox{
				box-sizing: border-box;
				width: 100%;
				background-color: rgba(255,255,255,.15);
				padding:15rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.one{
					font-size: 26rpx;
					text-align: center;
					width: 50%;
					position: relative;
				}
				.one::after{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					content: '';
					height: 40rpx;
					border: 1rpx dashed #fff;
					
				}
				.two{
					font-size: 26rpx;
					text-align: center;
					width: 50%;
				}
			}
		}
		.filterBox{
		    box-sizing: border-box;
			// margin: 20rpx 0;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 60rpx 0 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
				}
				.scroll-view-item {
					text-align: center;
					font-size: 36rpx;
				}
				.scroll-view-item_H {
					margin-bottom: 20rpx;
					display: inline-block;
					margin-right: 20rpx;
					text-align: center;
					font-size: 27rpx;
					padding: 10rpx 20rpx;
					color: rgba(46, 38, 29, 1);
					&.active{
						color: rgba(32, 39, 155, 1);
						position: relative;
						
					}
					&.active::before{
						display: block;
						content: "";
						position: absolute;
						left: 50%;
						transform: translate(-50%);
						bottom: -3%;
						width: 50%;
						// height: 1rpx;
						border: 1rpx solid rgba(32, 39, 155, 1);
						border-radius: 5rpx;
					}
				}
				.scroll-view-item_H:last-child{
					margin-right: 0rpx;
				}
				.scrollBtn {
					display: inline-block;
					margin-right: 20rpx;
					text-align: center;
					font-size: 27rpx;
					padding: 10rpx 20rpx;
					color: rgba(46, 38, 29, 1);
					&.active{
						color: rgba(32, 39, 155, 1);
						
					}
				}
				.scrollBtn:last-child{
					margin-right: 0rpx;
				}
				.filterItem{
					background: #f7f7f7;
					font-size: 27rpx;
					padding: 10rpx;
					color: rgba(46, 38, 29, 1);
					border-radius: 8rpx;
					&.active{
						background: rgba(32, 39, 155, 1);
						color: #fff;
					}
				}
		}
		.tableBox{
			// background-color: #fff;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			border-radius: 20rpx;
			.table{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10rpx 0;
				margin-bottom: 50rpx;
				box-sizing: border-box;
				.content-box {
					display: flex;
					font-weight: 600;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F2F2F2;
					padding: 20rpx 0;
				}
				
				.content-box-title {
					flex: 1;
					font-size: 28rpx;
					text-align: center;
					
				}
				.content-sam-box{
					background-color: #fff;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					justify-content: space-between;
					padding: 20rpx 0;
					color: #333333;
					border-bottom: 1px solid #F2F2F2;
					
					.cell{
						font-size: 24rpx;
					}
				}
				.content-sam-box:last-child{
					border: none;
				}
				.empty{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 200rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}
			
		}
	}
	// 之前的样式
	// .ulBox {
	// 	padding: 0 30rpx;
	
	// 	.liBox {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		border-bottom: 1px solid #E6E6E6;
	// 		height: 92rpx;
	// 		margin-top: 20rpx;
	// 		.infoBox {
	// 			display: flex;
	// 			align-items: center;
	// 			font-size: 28rpx;
	// 			image {
	// 				width: 52rpx !important;
	// 				height: 52rpx;
	// 			}
	// 		}
	// 		& > view:first-child{
	// 			position: relative;
	// 			&::after{
	// 				content:'';
	// 				position: absolute;
	// 				left: 0;
	// 				bottom: -6rpx;
	// 				background: linear-gradient(90deg,#FA882F, #D9D9D9);
	// 				border-radius: 4rpx;
	// 				height: 8rpx;
	// 				width: 80rpx;
	// 			}
	// 		}
	// 		&:last-child {
	// 			border: none;
	// 		}
	// 	}
	// }
</style>