<template>
	<view class="communication blacks_style">
		<Nav className="black_nav" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('share.communication.title') }}</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"
				:enable-flex="true">
				<view class="communication__contenter">
					<view class="model">
						<view class="th">
							<view class="txt" v-if="room.school && room.school.id">{{ room.school.fullName | across }}</view>
							<view class="txt" v-if="room.team && room.team.id">{{ room.team.teamName | across }}</view>
						</view>
						<view class="name">{{ room.topic | across }}</view>
						<view class="personnel">
							<view class="users" v-if="room.users && room.users.length">
								<template v-for="(i, k) in room.users">
									<view class="photo" :key="k" :style="'z-index: ' + (room.users.length - k)">
										<image class="pic" mode="aspectFill" :src="i.avatarUrl"></image>
									</view>
								</template>
								<view class="photo more" v-if="room.users.length > 5">
									<i class="iconfont icon-gengduo"></i>
								</view>
							</view>
							<view class="in_communication">正在语音交流中</view>
						</view>
					</view>
					<view class="explain">
						<view class="attr">因参与条件限制，需满足以下任一条件：</view>
						<view class="attr" v-if="room.school && room.school.id">- 添加校园「{{ room.school.fullName | across }}」</view>
						<view class="attr" v-if="room.team && room.team.id">- 加入「{{ room.team.teamName | across }}」</view>
					</view>
					<view class="option">
						<!-- // 1既关联校园又关联小队（page51）
						// 2只关联校园不关联小队（page52）
						// 3不关联校园只关联小队（page53） -->
						<view class="btn" v-if="['1', '2'].includes(roomType)" @click="link('/pages/campus/add')">添加校园</view>
						<view class="btn" v-if="['1', '3'].includes(roomType)" @click="link(`/pages/me/teamJoin?id=${room.id}&name=${userInfo.nickname}&groupID=${room.groupID}`)">加入小队</view>
					</view>
				</view>
			</scroll-view>
			<view class="copyright">
				<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/copyright_red.png"></image>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				userInfo: {},
				room: {},
				roomType: null
			}
		},
		onLoad(e) {
			if (e) {
				console.log(e)
				this.options = e
			}
		},
		computed: {
			scrollHeight() {
				return `height: calc(100vh - ${80 + this.CustomBar}px);`
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getDetail()
			} else {
				uni.navigateTo({
					url: `/pages/index/login?type=share`
				})
			}
		},
		methods: {
			// 查询交流详情
			async getDetail () {
				this.loading = true
				const result = await this.$axios.get(this.API.judgeJoinRestrictions, {
					params: {
						rid: this.options.rid
					}
				})
				this.loading = false
				if (result) {
					const { room, roomType } = result
					this.room = room || {}
					this.roomType = roomType
					this.getUserInfo()
				}
			},
			// 查询个人主页信息
			async getUserInfo () {
				this.loading = true
				const result = await this.$axios.get(this.API.getUserInfo)
				this.loading = false
				if (result) {
					this.userInfo = result || {}
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 自定义下拉刷新被触发
			onRefresh () {
				this.triggered = true
				this.getDetail()
			},
			// 自定义下拉刷新被复位
			onRestore () {
				this.triggered = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.communication {
		min-height: calc(100vh);
		.body_scroll {
			display: flex;
			align-items: center;
			justify-content: center;
		
			.communication__contenter {
				background: linear-gradient(216deg, $f5 0%, $D8D8D8 100%);
				border-radius: 18rpx;
				margin: 0 26rpx;
				padding: 60rpx;
				width: 100%;
				.model {
					background: linear-gradient(180deg, $white 0%, transparent 100%);
					border-radius: 20rpx 20rpx 0 0;
					padding: 56rpx 24rpx;
					text-align: center;
					.th {
						position: relative;
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $bg-0;
						.txt {
							display: inline-block;
							position: relative;
							padding: 0 20rpx;
							& + .txt::before {
								background-color: $bg-0;
								position: absolute;
								margin-top: -12rpx;
								height: 24rpx;
								width: 2rpx;
								content: '';
								top: 50%;
								left: 0;
							}
						}
					}
					.name {
						margin: 56rpx 0 64rpx 0;
						line-height: 50rpx;
						font-size: 36rpx;
						font-weight: 500;
						color: $bg-0;
					}
					.personnel {
						justify-content: center;
						align-items: center;
						display: flex;
						.users {
							margin-right: 10rpx;
							align-items: center;
							display: flex;
							.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;
									}
								}
							}
						}
					}
				}
				.explain {
					padding-top: 24rpx;
					.attr {
						line-height: 50rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $mc;
					}
				}
				.option {
					justify-content: center;
					align-items: center;
					margin-top: 48rpx;
					display: flex;
					.btn {
						background-color: $mc;
						border-radius: 100rpx;
						line-height: 70rpx;
						text-align: center;
						font-size: 32rpx;
						color: $white;
						height: 70rpx;
						width: 100%;
						& + .btn {
							margin-left: 64rpx;
						}
					}
				}
			}
		}
		.copyright {
			position: fixed;
			margin: 0 auto;
			width: 100%;
			bottom: 5%;
			right: 0;
			left: 0;
			.pic {
				text-align: center;
				margin: 0 auto;
				width: 540rpx;
				height: 32rpx;
			}
		}
	}
</style>
