<template>
	<view class="container">
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text>
		<!-- <text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text> -->
		<!-- 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 v-else class="zdata" >
					<text>暂无数据!</text>
				</view>
			</view>
			<view v-if="tabType===2">
				<jurisdiction v-if="raiseList" :raiseList="raiseList"></jurisdiction>
				<view v-else class="zdata" style="">
					<text>暂无数据!</text>
				</view>
			</view>
			<view class="other" v-if="tabType===3">
				<other-team v-if="otherList" :otherList="otherList"></other-team>
				<view v-else class="zdata" style="">
					<text>暂无数据!</text>
				</view>
			</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: uni.getStorageSync('cffp_userId'),
				count:0,
				directList: null, //直属团队数组
				raiseList: null,  //所辖团队数组
				otherList: null, // 其他
				levelName: null
			}
		},
		onLoad() {

		},
		mounted() {
			this.switchTab(1)
			this.getmyseatem()
		},
		methods:{
			goBack(){
				uni.navigateBack({
					delta: 1  
				});
			},
			getmyseatem() {
				api.queryMyTeamInfo({
					userId: this.userId
				}).then(res =>{
					if(res['success']){
						console.log(res, 11215)
						let data = res.data
						if(data.orgInfo) {
							this.levelName =data.orgInfo.areaCenterName;
							this.count = data.orgInfo.count;
						}
						if(data.directList.length != 0 && data.directList != null){
							this.directList = data['directList'];
							this.directList.forEach((x)=>{
								this.$set(x, 'hasChildren' , true)
								this.$set(x, 'children' , [])
							})
						}
						if(data.raiseList.length != 0 && data.raiseList != null) {
							this.raiseList = data['raiseList'];
							this.raiseList.forEach((x)=>{
								this.$set(x, 'hasChildren', true)
								this.$set(x, 'children' , [])
							})
						}
						if(data.other.length != 0 && data.other != null){
							this.otherList = 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;
		background: #FFFFFF;
		.zuojiantou{
			display: inline-block;
			transform: rotate(180deg);
			font-size: 30rpx;
			z-index: 1;
			position: absolute;
			top: 20rpx;
		}
		.tabTitle {
			color: #666666;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// justify-content: space-around;
			padding: 80rpx 30rpx 0;
			font-size: 28rpx;

			text {
				&.actived {
					color: #333;
					border-bottom: 4rpx solid #20269B;
				}
			}
		}
.text-ce{
	margin: auto;
}
.zdata{
	width: 100vw;
	text-align: center;
	margin-top: 40rpx;color: #666666;
}
		.tabContent {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			.direct-team {
				width: 223px;
				height: 40px;
				opacity: 1;
				border: 1px solid #3F52B7;
				margin: 15px auto;

				text {
					color: #333;
				}
			}

		}



	}
</style>
