<template>
	<view class="content">
		<view class="header">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<view class="header-time" @click="openTime('start')">
				<CommonTimePicker 
					:timeData="startDate"
					:visible="showTime1" 
					@confirmDate="changeStartTime" 
					@closeTime="showTime1=false"
				/>
			</view>
			<view style="margin: 10rpx 20rpx;font-size: 28rpx;">
				<text>-</text>
			</view>
			<view class="header-time" @click="openTime('end')">
				<CommonTimePicker 
					:timeData="endDate"
					:birthDay="false"
					:visible="showTime2" 
					@confirmDate="changeEndTime" 
					@closeTime="showTime2=false"
				>
				</CommonTimePicker>
			</view>
		</view>
		<view class="content-btn">
			<view class="" v-for="(item,index) in teamList" :key="index">
				<view :class="teamtype===index ? 'content-btn_under-Check' : 'content-btn_under'"
					@click="ckteam(index)">
					<text
						:class="teamtype===index ? 'content-btn_under-text-Check' : 'content-btn_under-text'">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="classtotal">
			<view class="classtotal-box">
				<span class="totalsingular">{{totalOrder || 0}}</span>
				<p class="desTxt">总单数</p>
			</view>
			<view class="classtotal-box" style="width: 40%;">
				<span class="totalsingular">￥{{totalCoursePrice || 0}}</span>
				<p class="desTxt">总销售额</p>
				<p style="font-size: 18rpx;white-space:nowrap">温馨提示：业绩以最终核算为准</p>
			</view>
			<view class="classtotal-box">
				<span class="totalsingular">￥{{totalIncome || 0}}</span>
				<p class="desTxt">总销售收入</p> 
			</view>
		</view>
		<view class="team">
			<view style="display: flex;">
				<view class="team-a">
				</view>	
				<text style="font-size: 30rpx;">团队排名</text>
			</view>
		</view>
		<view class="sortBox">
			<view 
				class="team-c" 
				@click="sortswitch(item)" 
				v-for="(item,index) in sortArr" 
				:key="index"
				:class="{active:item.id == currentSort }"
			>
				<text style="margin-left: 10rpx;">{{item.name}}</text>
			</view>
		</view>
		<view  v-if="listType == true">
			<myteam-table  :datatitleList="datatitleList" :dataList="dataList" felTyle="achievement" :currentTitle="currentSort"></myteam-table>
		</view>
		<h4 class="noListTip" v-else>暂无数据！</h4>
	</view>
</template>

<script>
	import api from "../../../api/api";
	import TimePicker from '@/components/myteam/time-picker.vue';
	import CommonTimePicker from '@/components/commonTimePicker/commonTimePicker.vue';
	import MyteamTable from '@/components/myteam/myteam-table.vue';
	import dataHandling from "@/util/dataHandling";
	export default {
		components: {
			TimePicker,
			MyteamTable,
			CommonTimePicker
		},
		data() {
			return {
				startDate:{year:dataHandling.getDateParts().year,month:dataHandling.getDateParts().month},
				endDate:{year:dataHandling.getDateParts().year,month:dataHandling.getDateParts().month},
				showTime1:false,
				showTime2:false,
				datatitleList1: ['姓名', '单数', '销售额', '销售收入'],
				datatitleList2: ['销售日期', '单数', '销售额', '销售收入'],
				teamList: ['直辖团队', '所辖团队', '育成团队'],
				teamtype: 0,
				montdindex: 0,
				array: ['一季度', '二季度', '三季度', '四季度'],
				mountdList: [],
				index: 0,
				totalOrder: '', //总单数
				totalCoursePrice: '', // 总销售额
				totalIncome: '', //总销售收入
				teListsort: true,
				listType: false,
				multiArray: [{
						name: '',
						id: 1
					},
					{
						name: '二季度',
						id: 2
					},
					{
						name: '三季度',
						id: 3
					},
					{
						name: '四季度',
						id: 4
					}
				],
				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)}`,
					queryType: '',
					courseOrPolicy: '1',
					type: '2'
				},
				dataList: [],
				sortArr:[
					{
						name:'销售额',
						value:'coursePrice',
						sortDirection:1,
						id:'1',
					},
					// {
					// 	name:'销售额收入',
					// 	value:'courseIncome',
					// 	sortDirection:1,
					// 	id:'2'
					// },
					{
						name:'销售日期',
						value:'courseIncome',
						sortDirection:1,
						id:4
					}
				],
				currentSort:'1',
				currentTitle:'1',
			}
		},
		computed: {
			datatitleList(){
				return this.currentSort =='1' || this.currentSort =='2' ?this.datatitleList1:this.datatitleList2
			}
		},
		onLoad() {
			this.getqueryTeamAchievement()
		},
		methods: {
			changeStartTime(obj){
				this.startDate = obj
				this.CffpOrgInfoReqVO.startDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.getqueryTeamAchievement()
				this.showTime1 = false
			},
			changeEndTime(obj){
				this.endDate = obj
				this.CffpOrgInfoReqVO.endDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.getqueryTeamAchievement()
				this.showTime2 = false
			},
			openTime(key){
				if(key=='start'){
					this.showTime1 = true
					return
				}
				if(key=='end'){
					this.showTime2 = true
					return
				}
			},
			goBack(){
				uni.navigateBack({  
					delta: 1  
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				this.montdindex = 0
				this.mountdList = []
				switch (this.index) {
					case 0:
						this.mountdList.push('一月', '二月', '三月')
						break
					case 1:
						this.mountdList.push('四月', '五月', '六月')
						break
					case 2:
						this.mountdList.push('七月', '八月', '九月')
						break
					case 3:
						this.mountdList.push('十月', '十一月', '十二月')
						break
				}
			},

			// 获取列表数据
			getqueryTeamAchievement() {
				if (this.CffpOrgInfoReqVO.endDate < this.CffpOrgInfoReqVO.startDate) {
					uni.showToast({
						title: '截止日期不能小于起始日期',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				this.CffpOrgInfoReqVO.queryType = this.teamtype + 1
				api.queryTeamAchievement(this.CffpOrgInfoReqVO).then(res => {
					if (res['success']) {
						this.listType = true
						this.dataList = res.data.list || [];
						if(this.dataList.length>0){
							this.dataList.forEach(item=>{
								item.saleDate = dataHandling.dateFormat2(item.saleDate,'yyyy-MM-dd')
							})
						}
						this.totalOrder = res.data.totalOrder ? res.data.totalOrder : '0';
						this.totalCoursePrice = res.data.totalCoursePrice ? res.data.totalCoursePrice : '0';
						this.totalIncome = res.data.totalIncome ? res.data.totalIncome : '0';
						
					}
				})
			},
			sortswitch(obj) {
				this.currentSort = obj.id
				if(obj.id == 4){
					this.CffpOrgInfoReqVO.sortType = obj.id
					this.getqueryTeamAchievement()
				}else{
					delete this.CffpOrgInfoReqVO.sortType
					this.getqueryTeamAchievement()
				}
				
				// 以前的写法
				// this.teListsort = !this.teListsort
				// this.dataList.sort((a, b) => {
				// 	//排序基于的数据
				// 	if (this.teListsort == false) {
				// 		return b.courseIncome - a.courseIncome;
				// 	} else {
				// 		return b.coursePrice - a.coursePrice;
				// 	}
				// })
				// this.dataList.sort((a, b) => {
				// 	return b.key - a.key;
				// })
			},
			mountdchange(e) {
				this.montdindex = e.detail.value
			},
			ckteam(e) {
				this.teamtype = e
				this.listType = false
				this.currentSort = '1'
				if(this.CffpOrgInfoReqVO?.sortType){
					delete this.CffpOrgInfoReqVO.sortType
				}
				this.getqueryTeamAchievement()
			},
			// 这个是时间组件返回的时间值
			change(time) {
				this.CffpOrgInfoReqVO.startDate = time
				this.getqueryTeamAchievement()
			},
			changetimeend(timeend) {
				this.CffpOrgInfoReqVO.endDate = timeend
				this.getqueryTeamAchievement()
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
			 margin: 0 !important;
	}
	.desTxt{
		font-size: 26rpx;
	}
	.content {
		width: 100%;
		height: 100%;
	}

	.header {
		display: flex;
		justify-content: center;
		margin: 40rpx;
		.timeSelectContent {
			margin: 0 40rpx;
		}
	}

	.header-time {
		background: rgba(245, 245, 245, 1);
		padding: 10rpx 15rpx;
		.timeBox{
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx 10rpx 0 0;
		}
	}

	.content-btn {
		display: flex;
		justify-content: space-between;
		margin: 40rpx;
	}

	.content-btn_under-Check {
		width: 160rpx;
		height: 80rpx;
		// background: #20279B;''
		border-bottom: 4rpx solid #20269B;
		// border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
	}

	.content-btn_under {
		width: 160rpx;
		height: 80rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
	}

	.content-btn_under-text-Check {
		text-align: center;
		// width: 128rpx;
		// height: 48rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #20279B;
		line-height: 48rpx;
	}

	.content-btn_under-text {
		text-align: center;
		width: 128rpx;
		height: 48rpx;
		font-weight: 800;
		font-size: 28rpx;
		color: #666666;
		line-height: 48rpx;
	}

	.classtotal {
		height: 160rpx;
		display: flex;
		justify-content: space-between;
	}

	.classtotal-box {
		flex: 1;
		// padding-top: 40rpx;
		text-align: center;

		// border: 1rpx solid #20279B;
		p {
			margin-top: 16rpx;
			color: #666666;
		}
	}

	.totalsingular {
		width: 70rpx;
		height: 60rpx;
		font-size: 40rpx;
		font-weight: 500;
		line-height: 46rpx;
	}
	.sortBox{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 20rpx 40rpx;
	}
	.team {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 20rpx;
	}

	.team-a {
		width: 4rpx;
		margin-right: 10rpx;
		background: #FA882F;
		border-radius: 4rpx;
		opacity: 1;
	}

	.team-b {
		background: #FBFBFB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.team-c {
		margin-right: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 10rpx 20rpx;
		// height: 40rpx;
		font-size: 28rpx;
		// text-align: center;
		color: rgba(46, 38, 29, 1);
		background: rgba(247, 247, 247, 1);
		border-radius: 5rpx;
		opacity: 1;
		&.active{
			background: rgba(32, 39, 155, 1);
			color: #fff;
		}
	}
	.team-c:last-child{
		margin-right: 0rpx;
	}

	.title {
		margin: auto;
	}

	.box-title {
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.box-content {
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.box-title-flex {
		flex: 1;
		font-size: 26rpx;
	}
</style>
