<template>
	<view class="content">
		<view class="header">
			<view class="timeSelectContent">
				<time-picker v-if="fields" @change="change" :fields="fields">
				</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">666</span>
				<p>总单数</p>
			</view>
			<view class="classtotal-box">
				<span class="totalsingular">￥89.25.00</span>
				<p>销售额</p>
			</view>
		</view>
		<view class="team">
			<view style="display: flex;">
				<view class="team-a">

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

			<view class="team-c">
				<text>按单数排</text>
			</view>
		</view>
		<view class="">
			<myteam-table :datatitleList="datatitleList" :dataList="dataList"></myteam-table>
		</view>
	</view>
</template>

<script>
	import TimePicker from '@/components/myteam/time-picker.vue';
	import MyteamTable from '@/components/myteam/myteam-table.vue';
	export default {
		components: {
			TimePicker,
			MyteamTable
		},
		data() {
			return {
				fields: 'year',
				datatitleList: ['排名', '所属组织', '姓名', '单数', '销售额'],
				teamList: ['直属团队', '所辖团队', '其他'],
				teamtype: 0,
				montdindex: 0,
				array: ['一季度', '二季度', '三季度', '四季度'],
				mountdList: [],
				index: 0,
				multiArray: [{
						name: '',
						id: 1
					},
					{
						name: '二季度',
						id: 2
					},
					{
						name: '三季度',
						id: 3
					},
					{
						name: '四季度',
						id: 4
					}
				],
				dataList: [{
						title: '所属组织1',
						rank: 1,
						name: 'sun',
						recommend: '很好'
					},
					{
						title: '所属组织2',
						rank: 1,
						name: 'sun',
						recommend: '很好'
					},
					{
						title: '所属组织3',
						rank: 1,
						name: 'sun',
						recommend: '很好'
					},
				]
			}
		},
		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
				}
			},
			mountdchange(e) {
				this.montdindex = e.detail.value
			},
			ckteam(e) {
				this.teamtype = e
				console.log(e, )
			},
			// 这个是时间组件返回的时间值
			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;
	}

	.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 {
		width: 72px;
		height: 20px;
		font-size: 14px;
		text-align: center;
		color: #FFFFFF;
		background: #20269B;
		border-radius: 5px 5px 5px 5px;
		opacity: 1;
	}

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