<template>
	<view class="content">
		<view class="header">
			<view class="header-time" style="">
				<time-picker @change="change" fields="month" icon="true">
				</time-picker>
			</view>
			<view style="margin: 10rpx 20rpx;">
				<text>-</text>
			</view>
			<view class="header-time">
				<time-picker @change="changetimeend" fields="month" icon="true">
				</time-picker>
			</view>
			<!-- 			<view class="timeSelectContent">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index] || "选择季度"}} </view>
				</picker>

			</view>
			<view class="timeSelectContent">
				<picker @change="mountdchange" :value="montdindex" :range="mountdList">
					<view class="uni-input"> {{mountdList[montdindex] || "选择月份"}} </view>
				</picker>
			</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>总单数</p>
			</view>
			<view class="classtotal-box" style="width: 40%;">
				<span class="totalsingular">￥{{totalCoursePrice || 0}}</span>
				<p>总销售额</p>
				<p style="font-size: 18rpx;white-space:nowrap">温馨提示：业绩以最终核算为准</p>
			</view>
			<view class="classtotal-box">
				<span class="totalsingular">￥{{totalIncome || 0}}</span>
				<p>总销售收入</p>
			</view>
		</view>
		<view class="team">
			<view style="display: flex;">
				<view class="team-a">

				</view>
				<text>团队排名</text>
			</view>

			<view class="team-c" @click="sortswitch()">
				<view class="" style="width: 30rpx;height: 30rpx;">
					<image style="width: 30rpx;height: 30rpx;" src="../../../static/sort.png" mode=""></image>
				</view>
				<text v-if="teListsort == true">按销售额收入排序</text>
				<text v-else>按销售额排序</text>
			</view>
		</view>
		<view class="">
			<myteam-table :datatitleList="datatitleList" :dataList="dataList" felTyle="achievement"></myteam-table>
		</view>
	</view>
</template>

<script>
	import api from "../../../api/api";
	import TimePicker from '@/components/myteam/time-picker.vue';
	import MyteamTable from '@/components/myteam/myteam-table.vue';
	export default {
		components: {
			TimePicker,
			MyteamTable
		},
		data() {
			return {
				datatitleList: ['姓名', '所属组织', '单数', '销售额', '销售收入'],
				teamList: ['直属团队', '所辖团队', '其他'],
				teamtype: 0,
				montdindex: 0,
				array: ['一季度', '二季度', '三季度', '四季度'],
				mountdList: [],
				index: 0,
				totalOrder: '', //总单数
				totalCoursePrice: '', // 总销售额
				totalIncome: '', //总销售收入
				teListsort: true,
				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}`,
					endDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
					queryType: '',
					courseOrPolicy: '1'
				},
				dataList: []
			}
		},
		onLoad() {
			this.getqueryTeamAchievement()
		},
		methods: {
			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) {
						this.dataList = res.data.list
						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'
						this.sortswitch()
					}
				})
			},
			sortswitch() {
				this.teListsort = !this.teListsort
				this.dataList.sort((a, b) => {
					//排序基于的数据
					if (this.teListsort == false) {
						return b.courseIncome - a.courseIncome;
					} else {
						return b.coursePrice - a.coursePrice;
					}

				})
			},
			mountdchange(e) {
				this.montdindex = e.detail.value
			},
			ckteam(e) {
				this.teamtype = e
				this.getqueryTeamAchievement()
			},
			// 这个是时间组件返回的时间值
			change(time) {
				console.log(time, 88)
				this.CffpOrgInfoReqVO.startDate = time
				this.getqueryTeamAchievement()
			},
			changetimeend(timeend) {
				this.CffpOrgInfoReqVO.endDate = timeend
				this.getqueryTeamAchievement()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100%;
	}

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

		.timeSelectContent {
			margin: 0 40rpx;
		}
	}

	.header-time {
		border: 1px solid #EFEDED;
		padding: 10rpx 15rpx;
	}

	.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: 32rpx;
		font-weight: 800;
		color: #20279B;
		line-height: 48rpx;
	}

	.content-btn_under-text {
		text-align: center;
		width: 128rpx;
		height: 48rpx;
		font-weight: 800;
		font-size: 32rpx;
		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;
	}

	.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 {
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		height: 40rpx;
		font-size: 28rpx;
		text-align: center;
		color: #FFFFFF;
		background: #20269B;
		border-radius: 5rpx;
		opacity: 1;
	}

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