<template>
	<view class="team black_style">
		<Nav className="black_nav" :scroll="scroll">
			<block slot="content" class="title">
				<view class="name omit">{{ $t('tabs.team') }}</view>
				<view class="btns">
					<view class="btn" @click="link('/pages/index/news')">
						<view class="iconfont">
							<i class="icomoon icon-news"></i>
							<text class="value" v-if="options.messagesNum > 0">{{ options.messagesNum > 9 ? `9+` : options.messagesNum }}</text>
						</view>
					</view>
					<view class="btn" @click="openChage">
						<view class="iconfont">
							<i class="icomoon icon-add"></i>
						</view>
						<!-- menus -->
						<meuns :visible="isOpen" :params="openInfo" @callback="menusCallback" />
					</view>
				</view>
			</block>
		</Nav>
		<view :style="{paddingTop: `${CustomBar}px;`}">
			<scroll-view
				class="body_scroll clearfix"
				:scroll-y="true"
				:style="scrollHeight"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore">
				<view class="square_list" v-if="squareList && squareList.length">
					<view class="th arrow" @click="link('/pages/team/square')">
						<view class="title">关注</view>
						<view class="more" :class="{active: options.hasNewRooms !== '0'}">{{ options.exchangingNum }}场交流进行中</view>
					</view>
					<view class="list" v-if="squareList && squareList.length">
						<view class="item" :style="scrollItem" v-for="(item, key) in squareList" :key="key" @click="toRoom(item)">
							<view class="line">
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/square_room_line.gif" v-if="item.onlineNum !== 0"></image>
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/quiet_line.png" v-else></image>
							</view>
							<view class="subtitle">{{ item.teamName | across }}</view>
							<view class="highlight">
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/highlight.png"></image>
							</view>
							<view class="core">
								<view class="number_of__people">{{ item.onlineNum || 0 }}人</view>
								<view class="name lineClamp2">{{ item.topic | across }}</view>
								<view class="member" v-if="item.users && item.users.length">
									<view class="user" v-for="(i, k) in item.users" :key="k" :class="'user_0' + (k + 1)">
										<image class="pic" mode="aspectFill" :src="i.avatarUrl" v-if="i.id"></image>
										<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/member_mask.png" v-else></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="me_list" :style="'padding-bottom: ' + (60 + bottom) + 'px;'">
					<view class="th" v-if="squareList && squareList.length">
						<view class="title">我的</view>
					</view>
					<view class="list" v-if="list && list.length">
						<view class="item" :style="scrollItems" v-for="(item, key) in list" :key="key" @click="link(`/pages/team/voiceRoom?teamId=${item.teamId}&rid=${item.rid}`)">
							<view class="line">
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/square_room_line.gif" v-if="item.onlineNum !== 0"></image>
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/quiet_line.png" v-else></image>
							</view>
							<view class="subtitle">{{ item.teamName | across }}</view>
							<view class="highlight">
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/highlight.png"></image>
							</view>
							<view class="core">
								<view class="number_of__people">
									<view class="attr">{{ item.unreadCount >= 999 ? '999+' : item.unreadCount }}条新消息</view>
								</view>
								<view class="info" :style="scrollItemInfo">
									<view class="info_content">
										<view class="name omit">{{ item.topic | across }}</view>
										<view class="abstract omit" v-if="item.reminder">{{ item.reminder | across }}</view>
									</view>
								</view>
								<view class="member">
									<view class="user" v-for="(i, k) in item.users" :key="k" :class="'user_0' + (k + 1)">
										<image class="pic" mode="aspectFill" :src="i.avatarUrl" v-if="i.id"></image>
										<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/member_mask.png" v-else></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- noData -->
					<view class="no_data">
						<view>
							<view class="name">定个小目标， 邀伙伴一起助力实现</view>
							<view class="more arrow" @click="link('/pages/team/add')">创建小队</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'
	import Meuns from '@/wxcomponents/menus/menus.vue'
	import sdkService from '@/api/sdk_service'
	import imgDict from '@/utils/img'

	export default {
		components: {
			Meuns
		},
		props: {
			scroll: {
				type: [Number, String],
				default: 0
			},
			active: [Number, String],
			teamRandom: [Number, String]
		},
		mixins: [mixins],
		data() {
			return {
				imgDict,
				isOpen: false,
				openInfo: {},
				options: {
					exchangingNum: 0,
					messagesNum: 0, // 用户未读的消息数
					hasNewRooms: '0'
				},
				squareList: [] // 查询关注
			}
		},
		watch: {
			active() {
				const index = uni.getStorageSync('index')
				if (index === 1) {
					this.getRoomsInSquare()
					this.getJoinedTeams()
					this.getUnreadMessagesNum()
				}
			},
			teamRandom() {
				this.getRoomsInSquare()
				this.getJoinedTeams()
				this.getUnreadMessagesNum()
			}
		},
		computed: {
			classifyWidth() {
				let width = this.System.screenWidth - 100
				return `width: ${width}px;`
			},
			scrollHeight() {
				let height = this.CustomBar
				return `height: calc(100vh - ${height}px);`
			},
			scrollItem() {
				let height = ((this.System.screenWidth - 14) / 2) * 0.8770949720670391
				return `height: ${height}px;`
			},
			scrollItems() {
				let height = (this.System.screenWidth - 14) * 0.4373259052924791
				return `height: ${height}px;`
			},
			scrollItemInfo() {
				let width = this.System.screenWidth - 14 - 50 - 32
				return `width: ${width}px; min-height: 88rpx;`
			}
		},
		mounted() {
			uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated, this)
		},
		created() {
			this.bottom = this.System.safeAreaInsets.bottom
		},
		methods: {
			// 会话列表更新
			onConversationListUpdated (result) {
				const data = result.data
				for (let i = 0; i < this.list.length; i++) {
					for (let y = 0; y < data.length; y++) {
						if (this.list[i].groupID === data[y].groupProfile.groupID) {
							this.list[i].unreadCount = data[y].unreadCount
						}
					}
				}
			},
			// 查询用户未读的消息数
			async getUnreadMessagesNum () {
				this.options.messagesNum = 0
				const result = await this.$axios.get(this.API.getUnreadMessagesNum)
				if (result) {
					this.options.messagesNum = result
				}
			},
			// 查询关注
			async getRoomsInSquare () {
				this.loading = true
				const result = await this.$axios.get(this.API.getFocusTeamsExternal)
				this.loading = false
				if (result) {
					const { focusTeamsExternal, exchangingNum, hasNewRooms } = result
					this.squareList = focusTeamsExternal || []
					this.options.exchangingNum = exchangingNum
					this.options.hasNewRooms = hasNewRooms || '0'
				}
			},
			// 查询用户加入的小队
			async getJoinedTeams () {
				this.loading = true
				const result = await this.$axios.get(this.API.getJoinedTeams)
				this.loading = false
				this.triggered = false
				if (result && result.length) {
					for (let i = 0; i < result.length; i++) {
						result[i].unreadCount = 0
					}
					this.list = result
				} else {
					this.list = []
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 交流房间跳转
			async toRoom (item) {
				this.loading = true
				const result = await this.$axios.get(this.API.judgeJoinRestrictions, {
					data: {
						rid: item.rid
					}
				})
				this.loading = false
				if (result) {
					// 是否可以进入房间，0否1是
					const { canJoin, room } = result
					if (canJoin === '1') {
						this.link(`/pages/campus/voiceRoom?teamId=${room.teamId}&rid=${room.rid}`)
					} else {
						this.link(`/pages/share/communication?rid=${room.rid}`)
					}
				}
			},
			// open 打开
			openChage (e) {
				this.openInfo = {
					right: -2,
					top: 40
				}
				setTimeout(() => {
					this.isOpen = !this.isOpen
				}, 200)
			},
			// 菜单回调
			menusCallback (e) {
				this.isOpen = false
			},
			// 自定义下拉刷新被触发
			onRefresh () {
				this.triggered = true
				this.getRoomsInSquare()
				this.getJoinedTeams()
			},
			// 自定义下拉刷新被复位
			onRestore () {
				this.triggered = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team {
		min-height: calc(100vh);
		
		.title {
			display: flex;
			align-items: center;
			.name {
				color: $J49494;
				flex: 1;
			}
			.btns {
				display: flex;
				align-items: center;
				.btn {
					position: relative;
					min-height: 48rpx;
					padding: 0 20rpx;
					font-size: 36rpx;
					font-weight: 100;
					color: $D2D2D2;
					display: flex;
					align-items: center;
					justify-content: center;
					.value {
						background-color: $FF0000;
						border-radius: 50%;
						position: absolute;
						line-height: 26rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 400;
						color: $white;
						height: 26rpx;
						width: 26rpx;
						right: 10rpx;
						top: -4rpx;
					}
					.iconfont {
						height: 40rpx;
						width: 40rpx;
					}
				}
			}
		}
		.body_scroll {
			.th {
				padding: 20rpx 52rpx 20rpx 26rpx;
				position: relative;
				align-items: center;
				line-height: 48rpx;
				height: 48rpx;
				display: flex;
				&::after {
					right: 26rpx;
				}
				.title {
					font-size: 34rpx;
					font-weight: 600;
					color: $J49494;
					flex: 1;
				}
				.more {
					padding-left: 50rpx;
					position: relative;
					text-align: right;
					font-size: 26rpx;
					font-weight: 400;
					color: $J49494;
					&::after {
						border-bottom: 3rpx solid rgba($color: $J49494, $alpha: 0.6);
						border-left: 3rpx solid rgba($color: $J49494, $alpha: 0.6);
					}
					&.active {
						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 20rpx;
							width: 16rpx;
							height: 16rpx;
							margin-top: -8rpx;
							border-radius: 50%;
							background: $FF0000;
						}
					}
				}
			}
			// 关注
			.square_list {
				position: relative;
				.list {
					box-sizing: border-box;
					overflow: hidden;
					padding: 7px;
					.item {
						background: url('https://daifeiclub.com/image/pics/campus_item.png') no-repeat center center;
						background-size: 100% 100%;
						box-sizing: border-box;
						padding: 32rpx;
						float: left;
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						position: relative;
						.line {
							position: absolute;
							top: 24rpx;
							right: 16rpx;
							left: 18rpx;
							z-index: 1;
							height: 30rpx;
						}
						.subtitle {
							background: url('https://daifeiclub.com/image/pics/identification.png') no-repeat center center;
							background-size: 100% 100%;
							position: absolute;
							top: 9rpx;
							right: 13rpx;
							z-index: 2;
							width: 176rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 20rpx;
							font-weight: 400;
							color: $E8E8E8;
						}
						.highlight {
							position: absolute;
							top: 14rpx;
							right: 20rpx;
							z-index: 3;
							width: 54rpx;
							height: 54rpx;
							color: $E8E8E8;
						}
						.core {
							position: relative;
							flex: 1;
							.number_of__people {
								position: absolute;
								text-align: center;
								line-height: 32rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: $J49494;
								width: 136rpx;
								bottom: -62rpx;
								right: -10rpx;
								z-index: 4;
							}
							.name {
								padding: 18rpx 0 0 70rpx;
								line-height: 44rpx;
								min-height: 88rpx;
								font-size: 32rpx;
								font-weight: 400;
								color: $white;
							}
							.member {
								.user {
									border-radius: 50%;
									overflow: hidden;
									height: 32rpx;
									width: 32rpx;
									position: absolute;
									background-color: $ccc;
									-wekit-filter: blur(1px);
									filter: blur(1px);
									&::before {
										content: '';
										position: absolute;
										top: 0;
										right: 0;
										bottom: 0;
										left: 0;
										height: 32rpx;
										width: 32rpx;
										border-radius: 50%;
										overflow: hidden;
										background: url('https://daifeiclub.com/image/pics/member_mask.png') no-repeat center center;
										background-size: 100% 100%;
									}
									&.user_01 {
										top: -45rpx;
										left: 120rpx;
									}
									&.user_02 {
										top: -45rpx;
										left: 24%;
									}
									&.user_03 {
										top: -28rpx;
										left: 8%;
									}
									&.user_04 {
										top: 20rpx;
										left: 0;
									}
									&.user_05 {
										bottom: 2rpx;
										left: 0;
									}
									&.user_06 {
										bottom: -48rpx;
										left: 8%;
									}
									&.user_07 {
										bottom: -62rpx;
										left: 24%;
									}
									&.user_08 {
										bottom: -62rpx;
										left: 120rpx;
									}
								}
							}
						}
					}
				}
			}
			// 我的
			.me_list {
				padding-bottom: 60px;
				position: relative;
				.list {
					box-sizing: border-box;
					overflow: hidden;
					padding: 7px;
					.item {
						background: url('https://daifeiclub.com/image/pics/campus_items.png') no-repeat center center;
						background-size: 100% 100%;
						box-sizing: border-box;
						padding: 32rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						position: relative;
						.line {
							position: absolute;
							top: 12rpx;
							right: 16rpx;
							left: 22rpx;
							z-index: 1;
							height: 63rpx;
						}
						.subtitle {
							background: url('https://daifeiclub.com/image/pics/identifications.png') no-repeat center center;
							background-size: 100% 100%;
							position: absolute;
							top: 5rpx;
							right: 9rpx;
							z-index: 2;
							width: 240rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							font-size: 26rpx;
							font-weight: 400;
							color: $E8E8E8;
						}
						.highlight {
							position: absolute;
							top: 10rpx;
							right: 14rpx;
							z-index: 3;
							width: 74rpx;
							height: 74rpx;
							color: $E8E8E8;
						}
						.core {
							position: relative;
							flex: 1;
							.number_of__people {
								position: absolute;
								text-align: center;
								line-height: 32rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: $J49494;
								bottom: -62rpx;
								right: -10rpx;
								z-index: 4;
								display: flex;
								align-items: center;
								.attr {
									position: relative;
									padding: 0 20rpx;
									& + .attr::before {
										content: '';
										position: absolute;
										top: 50%;
										left: 0;
										width: 2rpx;
										height: 20rpx;
										margin-top: -10rpx;
										background-color: $S93939;
									}
								}
							}
							.info {
								padding-left: 100rpx;
								display: flex;
								align-items: center;
								.info_content {
									overflow: hidden;
									flex: 1;
									.name {
										line-height: 44rpx;
										font-size: 32rpx;
										font-weight: 400;
										color: $white;
									}
									.abstract {
										line-height: 44rpx;
										font-size: 26rpx;
										font-weight: 400;
										color: $J49494;
									}
								}
							}
							.member {
								.user {
									border-radius: 50%;
									overflow: hidden;
									height: 32rpx;
									width: 32rpx;
									position: absolute;
									background-color: $ccc;
									-wekit-filter: blur(1px);
									filter: blur(1px);
									&::before {
										content: '';
										position: absolute;
										top: 0;
										right: 0;
										bottom: 0;
										left: 0;
										height: 32rpx;
										width: 32rpx;
										border-radius: 50%;
										overflow: hidden;
										background: url('https://daifeiclub.com/image/pics/member_mask.png') no-repeat center center;
										background-size: 100% 100%;
									}
									&.user_01 {
										top: -52rpx;
										left: 152rpx;
									}
									&.user_02 {
										top: -52rpx;
										left: 102rpx;
									}
									&.user_03 {
										top: -32rpx;
										left: 8%;
									}
									&.user_04 {
										top: 10rpx;
										left: 26rpx;
									}
									&.user_05 {
										bottom: -4rpx;
										left: 26rpx;
									}
									&.user_06 {
										bottom: -52rpx;
										left: 8%;
									}
									&.user_07 {
										bottom: -62rpx;
										left: 102rpx;
									}
									&.user_08 {
										bottom: -62rpx;
										left: 152rpx;
									}
								}
							}
						}
					}
				}
				.no_data {
					height: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.name {
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $C2C2C2;
					}
					.more {
						margin: 40rpx auto 0 auto;
						line-height: 44rpx;
						text-align: center;
						font-size: 32rpx;
						font-weight: 600;
						color: $AA2929;
						width: 128rpx;
						&::after {
							border-bottom: 4rpx solid $AA2929;
							border-left: 4rpx solid $AA2929;
						}
					}
				}
			}
		}
	}
</style>
