<template>
	<view class="teamList white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('me.teamList.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="list">
				<view class="item" v-for="(item, key) in list" :key="key" @click="getDetail(item)">
					<view class="title">{{ item.teamName | across }}</view>
					<view class="content lineClamp2">{{ item.introduction | across }}</view>
					<view class="follow">
						<view class="follow_user" v-if="item.followers && item.followers.length">
							<template v-for="(i, k) in item.followers">
								<view class="photo" :key="k" v-if="k < 5" :style="'z-index: ' + (parseInt(item.followerNum) - k)">
									<image class="pic" mode="aspectFill" :src="i.avatarUrl"></image>
								</view>
							</template>
							<view class="photo more" v-if="item.followers.length > 5">
								<i class="iconfont icon-gengduo"></i>
							</view>
						</view>
						<view class="follow_total">{{ item.followerNum || 0 }}人关注</view>
					</view>
				</view>
				<!-- noData -->
				<noData v-if="!loading && empty" />
			</view>
		</view>
		<!-- 小队 -->
		<van-dialog
			:closeOnClickOverlay="true"
			:showConfirmButton="false"
			:showCancelButton="false"
			:width="dialogWdith"
		  :show="teamVisible"
		  show-cancel-button
			@close="teamClose"
		  use-slot>
			<view class="team_dialog">
				<view class="th">
					<view class="l">
						<view class="name omit">{{ teamDetail.teamName | across }}</view>
						<view class="attr">{{ teamDetail.memberNum || 0 }}名成员</view>
						<view class="attr">{{ teamDetail.followerNum || 0 }}人关注</view>
					</view>
					<button class="share" open-type="share">
						<i class="iconfont icon-fenxiang"></i>
					</button>
				</view>
				<view class="tr">{{ teamDetail.introduction | across }}</view>
				<view class="admin" v-if="teamDetail.administrator">
					<view class="title">队长</view>
					<view class="admin_list">
							<view class="item">
								<view class="photo">
									<view class="ide">
										<view class="icomoon icon-leaderSymbol_grey" style="font-size: 24rpx;">
											<i class="inline path1"></i>
											<i class="inline path2"></i>
											<i class="inline path3"></i>
										</view>
									</view>
									<image class="pic" mode="aspectFill" :src="teamDetail.administrator.avatarUrl"></image>
								</view>
								<view class="nickname">
									<view class="name omit">{{ teamDetail.administrator.nickname | across }}</view>
									<view class="ico" v-if="teamDetail.administrator.isVolunteer === '1'">
										<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/me_userInfo_logo.png"></image>
									</view>
								</view>
							</view>
					</view>
				</view>
				<view class="flex btns">
					<view class="item" v-if="['0', '2'].includes(teamDetail.followOrJoin)" @click="focusTeam">关注</view>
					<view class="item active" v-if="['1', '3'].includes(teamDetail.followOrJoin)" @click="unfocusTeam">取消关注</view>
					<view class="item" v-if="['0', '3'].includes(teamDetail.followOrJoin)" @click="link(`/pages/me/teamJoin?id=${teamDetail.id}&name=${userInfo.nickname}&groupID=${teamDetail.groupID}`)">加入</view>
					<view class="item disable" v-if="['1', '2'].includes(teamDetail.followOrJoin)">已加入</view>
				</view>
			</view>
		</van-dialog>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'

	export default {
		mixins: [mixins],
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				teamParams: {}, // 小队参数
				teamVisible: false, // 小队信息 是否打开
				teamDetail: {} // 小队信息 内容
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				// 获取列表
				this.getList()
			}
		},
		methods: {
			// 获取列表
			async getList () {
				this.loading = true
				const result = await this.$axios.get(this.API.getCreatedTeams, {
					data: {
						uid: this.options.uid,
						fullQuery: 1
					}
				})
				this.loading = false
				if (result && result.length) {
					this.list = result
					this.empty = false
				} else {
					this.list = []
					this.empty = true
				}
			},
			// 小队 打开
			teamOpen (item) {
				this.getDetail(item.id, item.rid)
			},
			// 查询小队信息详情
			async getDetail (data) {
				this.loading = true
				this.teamParams = data
				const result = await this.$axios.get(this.API.teamGet, {
					params: {
						teamId: data.id
					}
				})
				this.loading = false
				if (result) {
					result.rid = data.rid
					this.teamVisible = true
					this.whetherFocusOrJoinTeam(data.id, result)
				} else {
					this.teamDetail = {}
				}
			},
			// 查询用户是否关注或加入小队
			// 0未加入未关注，1已加入已关注，2已加入未关注，3未加入已关注
			async whetherFocusOrJoinTeam (teamId, data) {
				this.loading = true
				const result = await this.$axios.get(this.API.whetherFocusOrJoinTeam, {
					params: {
						teamId: teamId
					}
				})
				this.loading = false
				if (result) {
					this.teamDetail = Object.assign({}, data, { followOrJoin: result })
				}
			},
			// 取消关注小队
			async unfocusTeam () {
				this.loading = true
				const result = await this.$axios.delete(this.API.unfocusTeam, {
					params: {
						teamId: this.teamDetail.id,
						follower: uni.getStorageSync('uid')
					}
				})
				this.loading = false
				if (result) {
					this.getDetail(this.teamParams)
					this.getList()
				}
			},
			// 关注小队
			async focusTeam () {
				this.loading = true
				const result = await this.$axios.post(this.API.focusTeam, {
					teamId: this.teamDetail.id,
					follower: uni.getStorageSync('uid')
				})
				this.loading = false
				if (result) {
					this.getDetail(this.teamParams)
					this.getList()
				}
			},
			// 小队 关闭
			teamClose () {
				this.teamVisible = false
			},
			// 跳转
			link (path) {
				this.teamClose()
				uni.navigateTo({
					url: path
				})
			}
		},
		// 分享
		onShareAppMessage (e) {
			return {
				title: `邀你加入「${this.teamDetail.teamName}」抱团一起飞！`, // 分享标题
				path: `/pages/share/team?id=${this.teamDetail.id}`, // 页面 path
				imageUrl: 'https://daifeiclub.com/image/pics/team_share.png'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.teamList {
		min-height: calc(100vh);
		.body_scroll {
			.list {
				.item {
					background-color: $white;
					padding: 34rpx 20rpx;
					border-radius: 18rpx;
					margin: 26rpx;
					.title {
						line-height: 44rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: $bg-0;
					}
					.content {
						margin: 20rpx 0 34rpx 0;
						word-break: break-all;
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $B18181;
					}
					.follow {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.follow_user {
							display: flex;
							align-items: center;
							.photo {
								position: relative;
								border-radius: 50%;
								overflow: hidden;
								height: 30rpx;
								width: 30rpx;
								& + .photo {
									margin-left: -10rpx;
								}
								&.more {
									background-color: $f5;
									display: flex;
									align-items: center;
									justify-content: center;
									.iconfont {
										font-size: 22rpx;
										line-height: 1;
										color: $ccc;
									}
								}
							}
						}
						.follow_total {
							margin-left: 16rpx;
							line-height: 36rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: $J49494;
						}
					}
				}
			}
		}
	}
</style>
