<template>
	<view class="share_team blacks_style">
		<Nav className="black_nav" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('share.team.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="team_dialog share_team__contenter">
					<view class="th">
						<view class="l">
							<view class="name omit">{{ form.teamName | across }}</view>
							<view class="attr">{{ form.memberNum || 0 }}名成员</view>
							<view class="attr">{{ form.followerNum || 0 }}人关注</view>
						</view>
						<button class="share" open-type="share">
							<i class="iconfont icon-fenxiang"></i>
						</button>
					</view>
					<view class="tr">{{ form.introduction | across }}</view>
					<view class="admin" v-if="form.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="form.administrator.avatarUrl"></image>
								</view>
								<view class="nickname">
									<view class="name omit">{{ form.administrator.nickname | across }}</view>
									<view class="ico" v-if="form.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(form.followOrJoin)" @click="focusTeam">关注</view>
						<view class="item active" v-if="['1', '3'].includes(form.followOrJoin)" @click="unfocusTeam">取消关注</view>
						<view class="item" v-if="['0', '3'].includes(form.followOrJoin)" @click="link(`/pages/me/teamJoin?id=${form.id}&name=${userInfo.nickname}&groupID=${form.groupID}`)">加入</view>
						<view class="item disable" v-if="['1', '2'].includes(form.followOrJoin) && options.type === 'brisk'">已加入</view>
						<view class="item" v-if="['1', '2'].includes(form.followOrJoin) && options.type !== 'brisk'" @click="link(`/pages/team/voiceRoom?teamId=${form.id}&rid=${form.rid}`)">进入</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: {}
			}
		},
		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.teamGet, {
					params: {
						teamId: this.options.id
					}
				})
				this.loading = false
				this.triggered = false
				if (result) {
					this.whetherFocusOrJoinTeam(this.options.id, result)
				}
			},
			// 查询用户是否关注或加入小队
			// 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.form = Object.assign({}, { followOrJoin: result }, data)
					this.getUserInfo()
				}
			},
			// 查询个人主页信息
			async getUserInfo () {
				this.loading = true
				const result = await this.$axios.get(this.API.getUserInfo)
				this.loading = false
				if (result) {
					this.userInfo = result || {}
				}
			},
			// 取消关注小队
			async unfocusTeam () {
				this.loading = true
				const result = await this.$axios.delete(this.API.unfocusTeam, {
					params: {
						teamId: this.form.id,
						follower: uni.getStorageSync('uid')
					}
				})
				this.loading = false
				if (result) {
					this.getDetail()
				}
			},
			// 关注小队
			async focusTeam () {
				this.loading = true
				const result = await this.$axios.post(this.API.focusTeam, {
					teamId: this.form.id,
					follower: uni.getStorageSync('uid')
				})
				this.loading = false
				if (result) {
					this.getDetail()
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 自定义下拉刷新被触发
			onRefresh () {
				this.triggered = true
				this.getDetail()
			},
			// 自定义下拉刷新被复位
			onRestore () {
				this.triggered = false
			}
		},
		// 分享
		onShareAppMessage (e) {
			return {
				title: `邀你加入「${this.form.teamName}」抱团一起飞！`, // 分享标题
				path: `/pages/share/team?id=${this.form.id}`, // 页面 path
				imageUrl: 'https://daifeiclub.com/image/pics/team_share.png'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share_team {
		min-height: calc(100vh);
		.body_scroll {
			display: flex;
			align-items: center;
			justify-content: center;
		
			.share_team__contenter {
				background-color: $white;
				border-radius: 12rpx;
				margin: 20rpx;
				width: 100%;
			}
		}
		.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>
