<template>
	<view class="me white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit" :style="titleWidth">{{ form.nickname }}的个人主页</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="info">
				<view class="head">
					<view class="head_portrait" @click="imagePreviewChange">
						<image class="pic" mode="aspectFill" :src="form.avatarUrl"></image>
					</view>
					<view class="head_content">
						<view class="title">
							<view class="name omit">{{ form.nickname | across }}</view>
							<!-- 是否志愿者 0否 1是  -->
							<view class="ico" v-if="form.isVolunteer === '1'">
								<view class="df_ico">
									<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/me_userInfo_logo.png"></image>
								</view>
								<view class="tips_explain">志愿号：{{ form.volunteerNum | across }}<br />让带飞成为一个流行</view>
							</view>
						</view>
						<view class="account">
							<view class="volunteer">
								<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/dfScore.png"></image>
							</view>
							<view class="dfScore">带飞值：{{ form.dfScore }}</view>
							<view class="tips_explain">收获礼物提升带飞值</view>
						</view>
					</view>
				</view>
				<view class="explain" v-if="form.signature">{{ form.signature | across }}</view>
			</view>
			<view class="team">
				<view class="heading">
					<view class="name">小队</view>
					<view class="more arrow" @click="link(`/pages/share/teamList?uid=${form.uid}`)">共创建{{ form.createTeamNum || 0 }}个</view>
				</view>
				<view class="team_list">
					<template v-for="(item, key) in form.teams">
						<view class="item" :key="key" v-if="key < 2" @click="getDetail(item)">
							<view class="name omit">{{ item.teamName | across }}</view>
							<view class="value">{{ item.followerNum || 0 }}人关注</view>
						</view>
					</template>
				</view>
			</view>
			<view class="gift">
				<view class="heading">
					<view class="name">礼物</view>
				</view>
				<view class="gift_list" v-if="giftLlist && giftLlist.length">
					<view class="item" v-for="(item, key) in giftLlist" :key="key">
						<view class="head_portrait">
							<image class="pic" mode="aspectFill" :src="item.user.avatarUrl"></image>
						</view>
						<view class="content">
							<view class="th">
								<view class="cell">
									<view class="title">
										<view class="name omit">{{ item.user.nickname | across }}</view>
										<view class="ico" v-if="item.user.isVolunteer === '1'">
											<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/me_userInfo_logo.png"></image>
										</view>
									</view>
									<view class="text">{{ item.giftMessage | across }}</view>
								</view>
								<view class="photo">
									<image class="pic" mode="aspectFill" :src="item.giftUrl"></image>
								</view>
							</view>
							<view class="other">
								<view class="date">{{ item.displayDate }}</view>
							</view>
						</view>
					</view>
				</view>
				<noData position="relative" title="共享心得与成长，收获友谊和礼物" :picUrl="imgDict.noData" v-if="!giftLoading && 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'
	import imgDict from '@/utils/img'

	export default {
		mixins: [mixins],
		data() {
			return {
				imgDict,
				userInfo: uni.getStorageSync('userInfo'),
				teamParams: {}, // 小队参数
				teamVisible: false,
				teamDetail: {}, // 小队信息 内容
				giftLoading: false, // 礼物 loading
				giftLlist: []
			}
		},
		computed: {
			titleWidth () {
				let capsule = uni.getMenuButtonBoundingClientRect()
				return `width: ${capsule.left - 15}px;`
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				this.getUserInfo()
			}
		},
		methods: {
			// 查询个人主页信息
			async getUserInfo () {
				this.loading = true
				const result = await this.$axios.get(this.API.getUserInfo, {
					data: {
						uid: this.options.uid
					}
				})
				this.loading = false
				if (result) {
					this.form = result || {}
					this.getReceivedGifts()
				}
			},
			// 查询用户已收到的礼物
			async getReceivedGifts (type) {
				this.giftLoading = true
				const result = await this.$axios.get(this.API.getReceivedGifts, {
					data: {
						uid: this.options.uid,
						page: this.page
					}
				})
				this.giftLoading = false
				if (result && result.receivedGifts && result.receivedGifts.length) {
					const { receivedGifts, end } = result
					if (type === 'push') {
						this.giftLlist = this.list.concat(receivedGifts)
					} else {
						this.giftLlist = receivedGifts || []
					}
					this.end = end
					this.empty = false
				} else {
					this.giftLlist = []
					this.empty = true
				}
			},
			// 跳转
			link (path) {
				this.teamClose()
				uni.navigateTo({
					url: path
				})
			},
			// 查询小队信息详情
			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 })
					uni.setStorageSync('team', this.teamDetail)
				}
			},
			// 取消关注小队
			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.getUserInfo()
				}
			},
			// 关注小队
			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.getUserInfo()
				}
			},
			// 小队 关闭
			teamClose () {
				this.teamVisible = false
			},
			// 预览 打开
			imagePreviewChange() {
				uni.previewImage({
					indicator: 'none',
					urls: [this.form.avatarUrl]
				})
			}
		},
		// 分享
		onShareAppMessage (e) {
			return {
				title: `${this.form.nickname}的带飞主页`, // 分享标题
				path: `/pages/share/he?uid=${this.form.uid}`, // 页面 path
				imageUrl: 'https://daifeiclub.com/image/pics/team_share.png'
			}
		},
		onReachBottom (e) {
			if (this.end === '0') {
				this.page++
				this.getReceivedGifts('push')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.me {
		min-height: calc(100vh);
		
		.body_scroll {
			.info {
				box-shadow: 0 0 20rpx rgba($color: $bg-0, $alpha: 0.1);
				background-color: $white;
				border-radius: 18rpx;
				padding: 40rpx;
				margin: 26rpx;

				&::after {
					right: 40rpx;
				}

				.head {
					display: flex;
					align-items: center;

					.head_portrait {
						border-radius: 50%;
						overflow: hidden;
						height: 114rpx;
						width: 114rpx;
					}

					.head_content {
						max-width: 400rpx;
						padding: 0 32rpx;
						flex: 1;

						.title {
							display: flex;
							align-items: center;
							line-height: 52rpx;

							.name {
								font-size: 38rpx;
								font-weight: 600;
								color: $bg-0;
							}

							.ico {
								margin-left: 14rpx;
								position: relative;
								height: 40rpx;
								width: 40rpx;
								&:hover {
									.tips_explain {
										display: block;
									}
								}
								.df_ico {
									height: 40rpx;
									width: 40rpx;
								}
								.tips_explain {
									display: none;
									box-shadow: 0 4rpx 8rpx rgba($color: $bg-0, $alpha: 0.5);
									background-color: $mc;
									margin-left: -145rpx;
									border-radius: 10rpx;
									position: absolute;
									line-height: 42rpx;
									font-size: 26rpx;
									font-weight: 500;
									padding: 16rpx;
									color: $white;
									width: 240rpx;
									top: 70rpx;
									z-index: 2;
									left: 50%;
									&::before {
										content: '';
										position: absolute;
										top: -16rpx;
										left: 50%;
										width: 0;
										height: 0;
										margin-left: -8rpx;
										border-left: 16rpx solid transparent;
										border-right: 16rpx solid transparent;
										border-bottom: 16rpx solid $mc;
									}
								}
							}
						}

						.account {
							background-color: $FFEDED;
							border-radius: 100rpx;
							display: inline-block;
							position: relative;
							line-height: 50rpx;
							margin-top: 14rpx;
							font-weight: 400;
							padding: 0 14rpx;
							&:hover {
								.tips_explain {
									display: block;
								}
							}
							.volunteer {
								margin: 10rpx 0;
								height: 30rpx;
								width: 30rpx;
								float: left;
							}
							.dfScore {
								padding-left: 42rpx;
								font-size: 24rpx;
								color: $AA2929;
							}
							.tips_explain {
								display: none;
								box-shadow: 0 4rpx 8rpx rgba($color: $bg-0, $alpha: 0.5);
								background-color: $mc;
								margin-left: -140rpx;
								border-radius: 10rpx;
								text-align: center;
								position: absolute;
								line-height: 42rpx;
								font-size: 26rpx;
								font-weight: 500;
								padding: 16rpx 0;
								color: $white;
								width: 280rpx;
								top: 80rpx;
								left: 50%;
								&::before {
									content: '';
									position: absolute;
									top: -16rpx;
									left: 50%;
									width: 0;
									height: 0;
									margin-left: -8rpx;
									border-left: 16rpx solid transparent;
									border-right: 16rpx solid transparent;
									border-bottom: 16rpx solid $mc;
								}
							}
						}
					}
				}

				.explain {
					line-height: 40rpx;
					margin-top: 22rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: $B18181;
				}
			}

			.heading {
				display: flex;
				align-items: center;
				line-height: 48rpx;
				overflow: hidden;

				.name {
					font-size: 34rpx;
					font-weight: 600;
					color: $bg-0;
					flex: 1;
				}

				.more {
					font-size: 28rpx;
					font-weight: 400;
					color: $B18181;
				}
			}

			.team {
				padding: 0 26rpx;
				.team_list {
					margin-top: 24rpx;
					.item {
						background-color: $white;
						border-radius: 10rpx;
						line-height: 84rpx;
						padding: 0 34rpx;
						display: flex;
						align-items: center;
						overflow: hidden;
						& + .item {
							margin-top: 18rpx;
						}
						.name {
							padding-right: 20rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: $bg-0;
							flex: 1;
						}
						.value {
							font-size: 28rpx;
							font-weight: 400;
							color: $B7B7B7;
						}
					}
				}
			}
			
			.gift {
				margin-top: 40rpx;
				padding: 0 26rpx;
				.gift_list {
					margin: 30rpx 0;
					.item {
						padding: 28rpx 32rpx 28rpx 18rpx;
						background-color: $white;
						border-radius: 10rpx;
						display: flex;
						& + .item {
							margin-top: 20rpx;
						}
						&.active {
							background-image: linear-gradient(to right, $white 50%, rgba($color: $FEEA86, $alpha: 0.3) 100%);
						}
						.head_portrait {
							border-radius: 50%;
							height: 64rpx;
							width: 64rpx;
							.pic {
								border-radius: 50%;
							}
						}
						.content {
							padding-left: 14rpx;
							flex: 1;
							.th {
								display: flex;
								align-items: center;
								.cell {
									padding-right: 30rpx;
									flex: 1;
									.title {
										display: flex;
										align-items: center;
										line-height: 52rpx;
										overflow: hidden;
									
										.name {
											font-size: 30rpx;
											font-weight: 400;
											color: $B18181;
										}
									
										.ico {
											margin-left: 14rpx;
											height: 32rpx;
											width: 32rpx;
										}
									}
									
									.text {
										line-height: 48rpx;
										min-height: 76rpx;
										margin-top: 8rpx;
										color: $E72727;
									}
								}
								.photo {
									min-width: 136rpx;
									height: 136rpx;
									width: 136rpx;
								}
							}
						}
						
						.other {
							display: flex;
							align-items: center;
							margin-top: 26rpx;
							color: $B18181;
							.date {
								font-size: 26rpx;
								font-weight: 400;
								flex: 1;
							}
							.btn {
								position: relative;
								text-align: center;
								line-height: 50rpx;
								height: 50rpx;
								&:hover {
									.delete {
										display: block;
									}
								}
								.delete {
									display: none;
									.delete_flex {
										position: absolute;
										top: 50%;
										right: 60rpx;
										z-index: 1;
										margin-top: -35rpx;
										background-color: $B18181;
										justify-content: center;
										border-radius: 10rpx;
										align-items: center;
										font-size: 28rpx;
										font-weight: 400;
										height: 70rpx;
										display: flex;
										color: $white;
										width: 180rpx;
										.iconfont {
											margin-right: 10rpx;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
