<template>
	<view class="team_info white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('team.info.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="team_info__group">
				<view class="cell" v-if="options.roomRoot !== '3'">
					<view class="item">
						<view class="title">入队申请</view>
						<view class="content">
							<view class="num arrow" @click="link(`/pages/team/apply?id=${form.id}&groupID=${form.groupID}`)">
								<view class="txt" v-if="form.inHandApplyNum > 0">{{ form.inHandApplyNum > 9 ? `${form.inHandApplyNum}+` : form.inHandApplyNum }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="item">
						<view class="title">队名</view>
						<view class="content arrow" @click="link(`/pages/team/edit?teamId=${form.id}&name=${form.teamName}`)">
							<view class="name omit">{{ form.teamName | across }}</view>
						</view>
					</view>
					<view class="item brief_introduction">
						<view class="title">小目标</view>
						<view class="content arrow" @click="link(`/pages/team/synopsis?teamId=${form.id}&name=${form.introduction}`)">{{ form.introduction || '暂未写下小目标' }}</view>
					</view>
				</view>
				<view class="cell">
					<view class="item member">
						<view class="title">成员</view>
						<view class="content">
							<view class="list clearfix">
								<view class="range">
									<view class="package" v-for="(item, key) in form.members" :key="key">
										<view class="packageBlock" @click="link(`/pages/share/he?uid=${item.uid}`, 'ignore')" v-if="item.uid">
											<view class="ico">
												<view class="ide" v-if="key === 0">
													<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="item.avatarUrl"></image>
											</view>
											<view class="txt omit">{{ item.nickname | across }}</view>
										</view>
									</view>
									<view class="package">
										<view class="packageBlock">
											<view class="ico no_ico">
												<button class="share" open-type="share"></button>
												<i class="iconfont icon-jiahao"></i>
											</view>
											<view class="txt omit">&nbsp;</view>
										</view>
									</view>
									<view class="package" v-if="options.roomRoot !== '3' && form.members.length > 1" @click="link(`/pages/team/remove?id=${form.id}&groupID=${options.groupID}&roomRoot=${options.roomRoot}`)">
										<view class="packageBlock">
											<view class="ico no_ico">
												<i class="iconfont icon-jian"></i>
											</view>
											<view class="txt omit">&nbsp;</view>
										</view>
									</view>
								</view>
							</view>
							<view class="total">共{{ form.memberNum || 0 }}名成员</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="quit">退出小队</view>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				options: {
					roomRoot: '3'
				}
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
			}
		},
		onShow() {
			this.getDetail()
			this.getUserRole()
		},
		methods: {
			// 查询用户在房间内的角色
			async getUserRole () {
				const result = await this.$axios.get(this.API.getUserRole, {
					params: {
						rid: this.options.rid
					}
				})
				if (result) {
					// 1带飞管理员，2房主，3交流成员/队员
					this.options.roomRoot = result
				}
			},
			// 获取详情
			async getDetail () {
				this.loading = true
				const result = await this.$axios.get(this.API.teamGet, {
					params: {
						teamId: this.options.teamId
					}
				})
				this.loading = false
				if (result) {
					let list = [result.administrator]
					for (let i = 0; i < result.users.length; i++) {
						if (result.users[i].uid) {
							list.push(result.users[i])
						}
					}
					this.form = result || {}
					this.form.members = list
				}
			},
			// 跳转
			link (path, type) {
				if (type === 'ignore') {
					uni.navigateTo({
						url: path
					})
					return
				}
				if (this.options.roomRoot === '3') {
					return this.$base.Tips('队长可修改')
				}
				uni.navigateTo({
					url: path
				})
			},
			// 退出小队
			quit () {
				if (this.options.roomRoot === '2') {
					return this.$base.Tips('暂不支持队长退队')
				}
				uni.showModal({
					title	: '要退出小队吗？',
					confirmText: '退出',
					confirmColor: '#AA2929',
					content: '将同时删除小队聊天记录',
					success: async res => {
						if (res.confirm) {
							this.loading = true
							const result = await this.$axios.delete(this.API.teamQuit, {
								params: {
									teamId: this.form.id
								}
							})
							this.loading = false
							if (result) {
								console.log(result)
							}
						}
					}
				})
			}
		},
		// 分享
		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>
	.team_info {
		min-height: calc(100vh);

		.body_scroll {
			.team_info__group {
				padding: 60rpx 26rpx 96rpx 26rpx;
				.cell {
					background-color: $white;
					border-radius: 18rpx;
					& + .cell {
						margin-top: 20rpx;
					}
					.item {
						display: flex;
						padding: 26rpx 20rpx;
						align-items: center;
						position: relative;
						line-height: 48rpx;
						& + .item::before {
							content: '';
							position: absolute;
							top: 0;
							right: 0;
							left: 20rpx;
							height: 2rpx;
							background-color: $ECECEC;
						}
						.title {
							font-size: 32rpx;
							font-weight: 400;
							color: $bg-0;
						}
						.content {
							padding-left: 20rpx;
							line-height: 48rpx;
							overflow: hidden;
							flex: 1;
							.num {
								height: 48rpx;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								.txt {
									background-color: $FF0000;
									border-radius: 50%;
									width: 36rpx;
									height: 36rpx;
									font-size: 26rpx;
									font-weight: 400;
									color: $white;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
							.name {
								text-align: right;
								font-size: 28rpx;
								font-weight: 400;
								color: $B18181;
							}
						}
						&.brief_introduction {
							display: block;
							.content {
								text-align: justify;
								margin-top: 12rpx;
								padding-left: 0;
							}
						}
						&.member {
							display: block;
							.content {
								margin-top: 12rpx;
								padding-left: 0;
								.range {
									.package {
										float: left;
										width:20%;
										.packageBlock {
											.ico {
												background-color: $F8F8F8;
												box-sizing: border-box;
												border-radius: 50%;
												text-align: center;
												line-height: 88rpx;
												position: relative;
												font-size: 38rpx;
												margin: 0 auto;
												color: $J49494;
												height: 88rpx;
												width: 88rpx;
												.pic {
													border-radius: 50%;
													height: 88rpx;
													width: 88rpx;
												}
												&.no_ico {
													border: 2rpx dashed $b9b9b9;
												}
												.ide {
													position: absolute;
													bottom: -13rpx;
													left: 50%;
													margin-left: -13rpx;
													background-color: $F3F3F3;
													height: 26rpx;
													width: 26rpx;
													display: flex;
													align-items: center;
													justify-content: center;
													border-radius: 50%;
													.iconfont {
														font-size: 22rpx;
														line-height: 1;
														color: $mc;
													}
												}
												.share {
													position: absolute;
													top: 0;
													right: 0;
													bottom: 0;
													left: 0;
													z-index: 2;
													opacity: 0;
												}
											}
											.txt {
												margin: 12rpx auto 0 auto;
												text-align: center;
												line-height: 32rpx;
												font-size: 22rpx;
												font-weight: 400;
												color: $J49494;
												height: 32rpx;
												width: 88rpx;
											}
										}
									}
								}
								.total {
									line-height: 36rpx;
									text-align: center;
									font-size: 26rpx;
									font-weight: 400;
									padding: 30rpx;
									color: $J49494;
								}
							}
						}
					}
				}
				.btn {
					margin-top: 212rpx;
					background-color: $white;
					border-radius: 18rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: 500;
					color: $D62E31;
				}
			}
		}
	}
</style>
