<template>
	<view class="container">
		<!-- tab选项 -->
		<view class="tabTitle">
			<text :class="{'actived': tabType===1}" @click="switchTab(1)">直属团队</text>
			<text :class="{'actived': tabType===2}" @click="switchTab(2)">所辖团队</text>
			<text :class="{'actived': tabType===3}" @click="switchTab(3)">其他</text>
		</view>
		<!-- tab内容 -->
		<view class="tabContent">
			<view v-if="tabType===1">
				<members v-if="directList" :directList="directList" :levelName = "levelName" :count= "count"></members>
			</view>
			<view v-if="tabType===2">
				<jurisdiction v-if="raiseList" :raiseList="raiseList"></jurisdiction>
			</view>
			<view class="other" v-if="tabType===3">
				<other-team v-if="otherList" :otherList="otherList"></other-team>
			</view>
		</view>
	</view>
</template>

<script>
    import api from "../../../api/api";
	import Members from './members.vue';
	import OtherTeam from './otherteam.vue';
	import Jurisdiction from './jurisdiction.vue';
	export default {
		components: {
			OtherTeam,
			Members,
			Jurisdiction
		},
		data() {
			return {
				tabType: 1,
				userStudyLists: [],
				userId: '1111',
				count:'',
				directList: null, //直属团队数组
				raiseList: null,  //所辖团队数组
				otherList: null, // 其他
				levelName: null
			}
		},
		onLoad() {

		},
		mounted() {
			this.switchTab(1)
			this.getmyseatem()
		},
		methods:{
			getmyseatem() {
				api.queryMyTeamInfo({
					userId: this.userId
				}).then(res =>{
					console.log(res, 7744)
					if(res['success']){
						this.levelName = res.data.orgInfo.levelName;
						this.count = res.data.orgInfo.count;
						this.directList = res['data']['directList'];
						this.directList.forEach((x)=>{
							this.$set(x, 'hasChildren' , true)
							this.$set(x, 'children' , [])
						})
						this.raiseList = res['data']['raiseList'];
						this.raiseList.forEach((x)=>{
							this.$set(x, 'hasChildren', true)
							this.$set(x, 'children' , [])
						})
						this.otherList = res['data']['other'];
					}
				})
			},
			// userStudyList() {
			// 	api.userStudyList({
			// 		userId: this.userId
			// 	}).then(res => {
			// 		if (res['success']) {
			// 			this.userStudyLists = res['data']['userStudyTimeInfos'];
			// 		}
			// 		console.log(res)
			// 	})
			// },
			switchTab(type) {
				this.tabType = type;
			},
			dateFormat(val) {
				return dataHandling.dateFormat(val);
			}
		},
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100%;
		text-align: center;
		margin-bottom: 20px;
		padding-top: 50px;

		.tabTitle {
			color: #666666;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// justify-content: space-around;
			padding: 30rpx 60rpx 0;

			text {
				&.actived {
					color: #333;
					border-bottom: 4rpx solid #20269B;
				}
			}
		}

		.tabContent {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.direct-team {
				width: 223px;
				height: 40px;
				opacity: 1;
				border: 1px solid #3F52B7;
				margin: 15px auto;

				text {
					color: #333;
				}
			}

		}



	}
</style>
