<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></members>
			</view>
			<view  v-if="tabType===2">
				<jurisdiction></jurisdiction>
			</view>
			<view class="other" v-if="tabType===3">
				<other-team></other-team>
			</view>
		</view>
	</view>
</template>

<script>
	 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: '1'
			}
		},
		methods: {
			userStudyList() {
				api.userStudyList({
					userId: this.userId
				}).then(res => {
					if (res['success']) {
						this.userStudyLists = res['data']['userStudyTimeInfos'];
					}
					console.log(res)
				})
			},
			switchTab(type) {
				console.log(type, 784758)
				this.tabType = type;
			},
			dateFormat(val) {
				return dataHandling.dateFormat(val);
			}
		},
		onLoad() {

		},
		mounted() {
			this.switchTab(1)
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100%;
		text-align: center;
		margin-bottom: 20px;
		.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>