<template>
	<view class="content">
		<view class="header">
			<view class="timeSelectContent">
				<time-picker @change="change" fields="month">
				</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 v-if="totalOrder" class="totalsingular">￥{{totalOrder}}</span>
				<p>总单数</p>
			</view>
			<view class="classtotal-box">
				<span class="totalsingular">￥{{totalCoursePrice}}</span>
				<p>总销售额</p>
				<p style="font-size: 5px;">温馨提示：业绩以最终核算为准</p>
			</view>
			<view class="classtotal-box">
				<span class="totalsingular">￥{{totalIncome}}</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()">
				<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: Number, //总单数
				totalCoursePrice: Number, // 总销售额
				totalIncome: Number, //总销售收入
				teListsort: true,
				multiArray: [{
						name: '',
						id: 1
					},
					{
						name: '二季度',
						id: 2
					},
					{
						name: '三季度',
						id: 3
					},
					{
						name: '四季度',
						id: 4
					}
				],
				CffpOrgInfoReqVO: {
					userId: '1',
					queryDate: `${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() {
				this.CffpOrgInfoReqVO.queryType = this.teamtype + 1
				api.queryTeamAchievement(this.CffpOrgInfoReqVO).then(res => {
					if (res) {
						this.dataList = res.data.list
						this.totalOrder = res.data.totalOrder
						this.totalCoursePrice = res.data.totalCoursePrice
						this.totalIncome = res.data.totalIncome
						// var dataForm = {
						// 	courseIncome: 20,
						// 	coursePrice: 1455555555,
						// 	orderNum: 2
						// }
						// this.dataList.push(dataForm)
					}
				})
			},
			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) {
				this.queryDate = time
			},
		}
	}
</script>

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

	.header {
		display: flex;
		justify-content: space-between;
		margin: 0 20px;
	}

	.content-btn {
		display: flex;
		justify-content: space-between;
		margin: 20px;
	}

	.content-btn_under-Check {
		width: 100px;
		height: 40px;
		background: #20279B;
		border-radius: 5px 5px 5px 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
	}

	.content-btn_under {
		width: 100px;
		height: 40px;
		border-radius: 5px 5px 5px 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #20279B;
		opacity: 1;
	}

	.content-btn_under-text-Check {
		text-align: center;
		width: 64px;
		height: 24px;
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 19px;
	}

	.content-btn_under-text {
		text-align: center;
		width: 64px;
		height: 24px;
		font-size: 16px;
		font-weight: 500;
		color: #20279B;
		line-height: 19px;
	}

	.classtotal {
		height: 80px;
		display: flex;
		justify-content: space-between;
	}

	.classtotal-box {
		flex: 1;
		padding-top: 20px;
		text-align: center;

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

	.totalsingular {
		width: 35px;
		height: 30px;
		font-size: 20px;
		font-weight: 500;
		line-height: 23px;
	}

	.team {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20px 10px;
	}

	.team-a {
		width: 2px;
		margin-right: 5px;
		background: #FA882F;
		border-radius: 2px 2px 2px 2px;
		opacity: 1;
	}

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

	.team-c {
		height: 20px;
		font-size: 14px;
		text-align: center;
		color: #FFFFFF;
		background: #20269B;
		border-radius: 5px 5px 5px 5px;
		opacity: 1;
	}

	.title {
		margin: auto;
	}
</style>
