<template>
	<view class="bg">

		<!-- 标签栏 -->
		<u-tabs :list="list" lineWidth="30" lineColor="#F1992D" :activeStyle="{
		            color: '#F1992D',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabChange" :current="current" class="tabbg">
		</u-tabs>
		
		<!-- 我的小队 -->
		<view v-if="current == 0" class="content">
			<view v-if="join==null">
				<view class="icon-with-name">
					<image :src="icon" class="icon" @click="showMember" />
					<text class="name" @click="showMember">{{name}}</text>
					<image src="../../static/team/out.png" class="out-team" @click="toggleMessage(1,'')" />
				</view>
				<add-team-activity></add-team-activity>
				<view class="one-activity" v-for="item in activityList" @click="showActivityDetail(item.activityId)">
					<image class="horn-icon" :src="'../../static/team/horn.png'"
						style="width: 60px;height: 60px;margin-left: 10px;" />
					<text class="text-content">{{item.title}}</text>
				</view>
			</view>
			<view v-if="join==false">
				<view class="no-join">
					<view class="nojoin-icon-view">
						<image class="nojoin-icon" :src="'../../static/team/nojoin.png'"
							style="width: 230px;height: 200px;" />
					</view>
					<view class="text-no-view">
						<text class="text-no">您还没有加入任何小队哦~-</text>
					</view>
				</view>
			</view>


		</view>
		<!-- 加入小队 -->
		<view v-if="current == 1" class="content">
			<add-team-tag></add-team-tag>
			<view class="form">
				<input class="form-input" type="text" placeholder="请输入小队的名称" v-model="svalue">
				<image src="../../static/team/search.png" class="search-team" @click="searchTeam()" />
			</view>
			<view class="content1">
				<view class="one-team" v-for="item in teamList">
					<text class="text-content" @click="showTeamDetail(item.discription)">{{item.teamName}}</text>
					<view class="add-icon-view">
						<image class="add-icon" :src="'../../static/team/add.png'" style="width: 30px;height: 30px;"
							@click="toggleMessage(2,item.teamId)" />
					</view>

				</view>
			</view>

		</view>
		<uni-popup ref="popupDialog1" type="dialog">
			<uni-popup-dialog title="提示" content="是否确定退出小队？" :before-close="true" @confirm="dialogConfirm"
				@close="dialogClose" />
		</uni-popup>
		<uni-popup ref="popupDialog2" type="dialog">
			<uni-popup-dialog title="提示" content="是否确定加入该小队？" :before-close="true" @confirm="dialogConfirm1"
				@close="dialogClose1" />
		</uni-popup>
	</view>
</template>

<script>
	let code=200;
	export default {
		data() {
			return {
				icon: '',
				current: 0,
				show: false,
				svalue: '',
				join: null,
				tID: '',
				userId: '',
				teamList: [{
					teamId: '',
					teamName: '',
					createrId: '',
					discription: '',
				}],
				list: [{
					name: '我的小队'
				}, {
					name: '加入小队',
				}, ],
				name: '',
				activityList: [
				]
			};
		},
		methods: {
			tabChange(index) {
				this.current = index.index;
				if (index.index == 1) {
					this.showJoinTeam();
				}
				if (index.index == 0) {
					this.showMyTeam();
				}
			},
			showJoinTeam(){
				uniCloud.callFunction({
						name: 'fe-team-teamList',
						data: {}
					})
					.then(res => {
						console.log(res)
						this.teamList = res.result.data.teamList
					})
			},
			showMyTeam(){
				uniCloud.callFunction({
						name: 'fe-team-activityList',
						data: {
							userId: this.userId
						}
					})
					.then(res => {
						console.log(res),
							this.name = res.result.data.teamname,
							this.activityList = res.result.data.activityList,
							this.join = res.result.join,
							this.icon = res.result.data.teamicon
						console.log(this.join)
					})
			},
			showTeamDetail(discription) {
				console.log("showTeamDetail")
				uni.showModal({
					title: '简介',
					content: discription,
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			searchTeam() {
				uniCloud.callFunction({
						name: 'fe-team-searchTeam',
						data: {
							teamname: this.svalue
						}
					})
					.then(res => {
						console.log(res)
						this.teamList = res.result.data.teamList
					})
			},
			showActivityDetail(activityId) {
				uni.reLaunch({
					url: '/pages/team/activity-detail?activityId=' + activityId,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			showMember() {
				uni.reLaunch({
					url: '/pages/team/member-list',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			async toggleMessage(index, teamId) {
				if (index == 1) {
					await this.$refs['popupDialog1'].open()

				} else if (index == 2) {
					console.log('2222222');
					this.tID = teamId
					console.log(teamId)
					console.log(this.tID)
					await this.$refs['popupDialog2'].open();
				}

			},
			dialogConfirm() {
				uniCloud.callFunction({
						name: 'fe-team-leaveTeam',
						data: {
							userId: this.userId
						}
					})
					.then(res => {
						console.log(res)
						this.join = false
						// this.code=200
						console.log(this.join)
					})
				this.$refs['popupDialog1'].close();
			},
			dialogClose() {
				this.$refs.popupDialog1.close();
			},
			async dialogConfirm1() {
				await uniCloud.callFunction({
						name: 'fe-team-joinTeam',
						data: {
							userId: this.userId,
							teamId: this.tID
						}
					})
					.then(res => {
						this.code = res.result.code,
							console.log(this.userId)
					})
				this.$refs['popupDialog2'].close();
				await this.showTorM();
			},
			dialogClose1() {
				this.$refs['popupDialog2'].close();
			},
			showTorM(){
				if (this.code == 200) {
					uni.showToast({
						title: '加入成功',
						duration: 2000
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '您已加入一个小队，若要加入或创建小队，请先退出已加入的小队再进行相应的操作。',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}

		},
		onPullDownRefresh() {
			this.showMyTeam()
			this.showJoinTeam()
			uni.stopPullDownRefresh();
		},
		onLoad(option) {
			this.userId=getApp().globalData.userId
			if(option.index==1){
				this.showJoinTeam()
			}
			else{
				this.showMyTeam()
			}
		},
		onShow() {
			this.showMyTeam()
			this.showJoinTeam()
		}
	}
</script>

<style>
	.bg {
		/* background-color: #edeef0; */
		/* position: absolute;
		width: 100%;
		height: 100%; */
	}
	.tabbg{
		/* background-color: #edeef0; */
	}

	.content {
		/* background-color: #edeef0; */
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.content1 {
		margin-top: 10px;
	}

	.form {
		float: left;
		width: 85%;
		margin-left: 30px;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.form-input {
		float: left;
		margin-left: 5px;
		width: 80%;
		height: 35px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		background-color: #edeef0;
		padding: 0 10px;
	}

	.icon-with-name {
		width: 100%;
		height: 45px;
		margin-left: 10px;
		margin-top: 15px;
		margin-bottom: 15px;
		float: left;
		overflow: auto;

	}

	.icon {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		float: left;
	}

	.search-team {
		float: right;
		margin-right: 0px;
		width: 30px;
		margin-top: 5px;
		height: 30px;
	}

	.out-team {
		float: right;
		margin-right: 30px;
		width: 30px;
		margin-top: 11px;
		height: 30px;
	}


	.name {
		float: left;
		margin-bottom: auto;
		margin-left: 10px;
		margin-top: 9px;
		font-size: 18px;
		font-weight: bold;
		width: 60%;
	}

	.one-activity {
		width: 85%;
		background-color: rgb(245 154 35 / 30%);
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		border-radius: 15px;
		overflow: auto;
		display: flex;
		flex-direction: row;
		padding: 10px;
	}

	.one-team {
		width: 80%;
		background-color: rgb(245 154 35 / 30%);
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		border-radius: 5px;
		display: flex;
		flex-direction: row;
		padding: 10px;
	}

	.no-join {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		border-radius: 15px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		padding: 10px;
	}

	.text-content {
		font-weight: bold;
		display: flex;
		margin-left: 10px;
		flex-direction: row;
		align-items: center;
		word-wrap: break-word;
	}

	.text-no {
		font-weight: bold;
		display: flex;
		margin: auto;
		flex-direction: column;
		color: #F1992D;

	}

	.horn-icon {
		flex-shrink: 0;
		margin: auto 0;
	}

	.add-icon-view {
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: flex-end;
		flex: 1;
	}

	.add-icon {
		margin-right: 10px;
	}

	.nojoin-icon {
		display: flex;
		flex-direction: column;
		margin: auto;
		display: block;
	}

	.nojoin-icon-view {
		margin-top: 50px;
	}

	.text-no-view {
		margin: 30px auto;
	}
</style>