<template>
	<view class="me white_style">
		<Nav className="nav_F6" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('tabs.me') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<svg-bill theme="outline" size="24" fill="#333"></svg-bill>
			<view class="info arrow" @click="link('/pages/me/userInfo')">
				<view class="head">
					<view class="head_portrait" @click.stop="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" @click.stop 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" @click.stop>
							<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/me/teamList')">共创建{{ form.createTeamNum || 0 }}个</view>
				</view>
				<view class="team_list">
					<template v-for="(item, key) in form.teams">
						<view class="item" :key="key" @click="getDetail(item)" v-if="key < 2">
							<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_open" v-if="form.unopenGiftNum > 0" @click="toGiftNot">{{ form.unopenGiftNum }}份礼物待拆开</view>
				<view class="gift_list" v-if="giftLlist && giftLlist.length">
					<view class="item" v-for="(item, key) in giftLlist" :key="key" @click="giftChange(item, key)">
						<view class="head_portrait" @click.stop="link(`/pages/share/he?uid=${item.user.uid}`)">
							<image class="pic" mode="aspectFill" :src="item.user.avatarUrl"></image>
						</view>
						<view class="content">
							<view class="th">
								<view class="cell">
									<view class="title" @click.stop="link(`/pages/share/he?uid=${item.user.uid}`)">
										<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 class="btn" @click.stop>
									<div class="delete" @click.stop="deleteGift(item)">
										<view class="delete_flex">
											<i class="icomoon iconfont icon-delete"></i>
											<text>删除</text>
										</view>
									</div>
									<i class="iconfont icon-gengduo"></i>
								</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" @touchmove.stop.prevent="moveStop">
				<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')">加入</view>
					<view class="item" v-if="['1', '2'].includes(teamDetail.followOrJoin)" @click="link(`/pages/team/voiceRoom?teamId=${teamDetail.id}&rid=${teamDetail.rid}`)">进入</view>
				</view>
			</view>
		</van-dialog>
		<!-- 礼物 -->
		<van-dialog
			custom-style="background-color: transparent; width: 100%; height; 100%;"
			:closeOnClickOverlay="true"
			:showConfirmButton="false"
			:showCancelButton="false"
			:width="dialogWdith"
		  :show="giftVisible"
		  show-cancel-button
			@close="giftClose"
		  use-slot>
			<view class="gift_dialog">
				<view class="gift_dialog_content">
					<swiper class="swiper" :current="giftCurrent" :duration="duration" @change="giftSwiperItemChange">
						<swiper-item v-for="(item, key) in giftLlist" :key="key">
							<view class="current">{{ key + 1 }}/{{ giftLlist.length }}</view>
							<view class="swiper-item">
								<view class="tips">收获第{{ item.order }}个礼物</view>
								<view class="swiper-item__main clearfix">
									<view class="th">
										<view class="l">
											<view class="head_portrait">
												<image class="pic" mode="aspectFill" :src="item.user.avatarUrl"></image>
											</view>
											<view class="name omit">{{ item.user.nickname | across }}</view>
											<view class="ico" v-if="item.isVolunteer === '1'">
												<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/me_userInfo_logo.png"></image>
											</view>
										</view>
										<view class="date">{{ item.displayDate }}</view>
									</view>
									<view class="content">{{ item.giftMessage | across }}</view>
									<view class="gift_info">
										<view class="gift_info__image">
											<image class="pic" mode="aspectFill" :src="item.giftUrl"></image>
										</view>
										<view class="gift_info__text">{{ item.giftName | across }}</view>
									</view>
									<view class="source">
										<view class="source_txt">{{ item.sourceInformation | across }}</view>
									</view>
									<view class="flex btns">
										<view class="item" @click="loveChange(item, key, 1)" :class="{active: item.isReply === '1'}">
											<i class="iconfont icon-aixin"></i>
											<view class="txt"> {{ item.isReply === '1' ? '已回复' : '回复爱心' }}</view>
										</view>
										<view class="item" @click="getPosterUserAvatars(item)">
											<i class="iconfont icon-fenxiang"></i>
											<view class="txt">分享一下</view>
										</view>
									</view>
								</view>
								<view class="copyright">
									<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/copyright.png"></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="close" @click="giftClose">
					<i class="iconfont icon-guanbi"></i>
				</view>
			</view>
		</van-dialog>
		<!-- N份礼物待拆开 -->
		<van-dialog
			custom-style="background-color: transparent; width: 100%; height; 100%;"
			:closeOnClickOverlay="true"
			:showConfirmButton="false"
			:showCancelButton="false"
			:width="dialogWdith"
		  :show="giftNotVisible"
		  show-cancel-button
			@close="giftNotClose"
		  use-slot>
			<view class="gift_dialog">
				<view class="gift_dialog_content">
					<swiper class="swiper" :current="giftCurrent" @change="giftNotChange" previous-margin="5px" next-margin="5px">
						<swiper-item v-for="(item, key) in giftNotList" :key="key">
							<view class="current">{{ key + 1 }}/{{ giftNotList.length }}</view>
							<view class="swiper-item">
								<view class="tips">收获第{{ item.order }}个礼物</view>
								<view class="swiper-item__main clearfix">
									<view class="th">
										<view class="l">
											<view class="head_portrait">
												<image class="pic" mode="aspectFill" :src="item.user.avatarUrl"></image>
											</view>
											<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="date">{{ item.displayDate }}</view>
									</view>
									<view class="content">{{ item.giftMessage | across }}</view>
									<view class="gift_info">
										<view class="gift_info__image">
											<image class="pic" mode="aspectFill" :src="item.giftUrl"></image>
										</view>
										<view class="gift_info__text">{{ item.giftName | across }}</view>
									</view>
									<view class="source">
										<view class="source_txt">{{ item.sourceInformation | across }}</view>
									</view>
									<view class="flex btns">
										<view class="item" @click="loveChange(item, key, 2)" :class="{active: item.isReply === '1'}">
											<i class="iconfont icon-aixin"></i>
											<view class="txt"> {{ item.isReply === '1' ? '已回复' : '回复爱心' }}</view>
										</view>
										<view class="item" @click="getPosterUserAvatars(item)">
											<i class="iconfont icon-fenxiang"></i>
											<view class="txt">分享一下</view>
										</view>
									</view>
								</view>
								<view class="copyright">
									<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/copyright.png"></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="close" @click="giftNotClose">
					<i class="iconfont icon-guanbi"></i>
				</view>
			</view>
		</van-dialog>
		<!-- 	分享海报 -->
		<van-overlay class="playbill_overlay" :z-index="9999" :show="playbillVisible" @click="playbillClose">
			<view class="playbill_contenter">
				<view class="playbill_contenter__cell">
					<view class="press"> <!-- @longpress="playbillPress" -->
						<view class="txt">长按图片保存或分享</view>
						<image class="pic" mode="aspectFit" :show-menu-by-longpress="true" :src="playbillPic" :style="playbillStyle"></image>
					</view>
					<view class="go_back" @click="playbillClose">返回</view>
				</view>
			</view>
		</van-overlay>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		props: {
			scroll: {
				type: [Number, String],
				default: 0
			},
			active: [Number, String],
			meRandom: [Number, String]
		},
		mixins: [mixins],
		data() {
			return {
				imgDict,
				duration: 0, // 滑块时长
				playbillVisible: false, // 礼物海报 是否打开
				playbillPic: '', // 礼物海报 图片地址
				teamParams: {}, // 小队参数
				teamVisible: false,
				teamDetail: {}, // 小队信息 内容
				giftNotVisible: false, // 礼物未拆 是否显示
				giftNotList: [], // 礼物未拆列表
				giftVisible: false, // 礼物卡 是否显示
				giftCurrent: 0,
				giftLoading: false, // 礼物 loading
				giftLlist: []
			}
		},
		watch: {
			active() {
				const index = uni.getStorageSync('index')
				if (index === 2) {
					this.page = 1
					this.getUserInfo()
					this.getReceivedGifts()
				}
			},
			meRandom() {
				this.getUserInfo()
			},
			scroll(value) {
			}
		},
		computed: {
			getHeight () {
				return `padding-top: ${this.CustomBar}px; box-sizing: border-box; min-height: calc(100vh); position: relative; padding-bottom: ${60 + this.System.safeAreaInsets.bottom}px;`;
			},
			dialogWdith () {
				return this.System.screenWidth - 16;
			},
			playbillStyle() {
				let height = this.System.screenWidth * 1.4608540925266904
				return `height: ${height}px;`
			}
		},
		created() {
			uni.$on('getReceivedGiftsFresh', data => {
				if (this.end === '0') {
					this.page++
					this.getReceivedGifts('push')
				}
			})
		},
		methods: {
			// uniapp及微信小程序遮罩层禁止页面滚动
			moveStop (e) {
				console.log(e)
			},
			// 查询个人主页信息
			async getUserInfo () {
				this.loading = true
				const result = await this.$axios.get(this.API.getUserInfo)
				this.loading = false
				if (result) {
					this.form = result || {}
					uni.setStorageSync('userInfo', result)
				}
			},
			// 打开礼物卡（未拆）
			async getUnopenedGiftCard () {
				const result = await this.$axios.get(this.API.getUnopenedGiftCard)
				if (result && result.length) {
					this.giftNotVisible = true
					this.giftNotList = result
					this.openGift(result[0].id, 0)
				}
			},
			// 拆开礼物
			async openGift (sysGrantGiftId, key) {
				const result = await this.$axios.put(this.API.openGift, {
					giftGivingId: sysGrantGiftId
				})
				if (result) {
					this.giftNotList[key].giftStatus = '1'
					this.getReceivedGifts()
					this.getUserInfo()
				}
			},
			// 查询用户已收到的礼物
			async getReceivedGifts (type) {
				this.giftLoading = true
				const result = await this.$axios.get(this.API.getReceivedGifts, {
					params: {
						uid: uni.getStorageSync('uid'),
						page: this.page
					}
				})
				this.giftLoading = false
				if (result && result.receivedGifts && result.receivedGifts.length) {
					const { receivedGifts, end } = result
					if (type === 'push') {
						this.giftLlist = this.giftLlist.concat(messages)
					} else {
						this.giftLlist = receivedGifts || []
					}
					this.end = end
					this.empty = false
				} else {
					this.empty = true
					this.giftLlist = []
					this.end = '0'
				}
			},
			// 跳转
			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
			},
			// N份礼物待拆开 打开
			toGiftNot () {
				this.giftNotList = []
				this.giftCurrent = 0
				this.getUnopenedGiftCard()
			},
			// N份礼物待拆开 关闭
			giftNotClose () {
				this.giftNotVisible = false
			},
			// N份礼物待拆开 滑动
			giftNotChange (e) {
				let key = e.detail.current
				if (this.giftNotList[key].giftStatus === '1') {
					return
				}
				this.openGift(this.giftNotList[key].id, key)
			},
			// 礼物卡 删除
			deleteGift (item) {
				uni.showModal({
					title	: '删除此条礼物记录？',
					confirmText: '删除',
					confirmColor: '#AA2929',
					content: '将同时扣除相应带飞值',
					success: async res => {
						if (res.confirm) {
							this.loading = true
							const result = await this.$axios.delete(this.API.delReceivedGift, {
								params: {
									uid: uni.getStorageSync('uid'),
									id: item.id
								}
							})
							this.loading = false
							if (result) {
								this.getUserInfo()
								this.getReceivedGifts()
							}
						}
					}
				})
			},
			// 礼物卡 滑动
			giftSwiperItemChange (e) {
				this.$nextTick(() => {
					this.giftCurrent = e.detail.current
					this.duration = 500
				})
			},
			// 礼物卡 打开
			giftChange (item, key) {
				this.duration = 0
				this.giftVisible = true
				this.$nextTick(() => {
					this.giftCurrent = key
				})
			},
			// 礼物卡 爱心
			async loveChange (item, key, type) {
				if (item.isReply === '1') {
					return
				}
				this.loading = true
				const result = await this.$axios.put(this.API.giftReply, {
					giftGivingId: item.id
				})
				this.loading = false
				if (result) {
					item.isReply = '1'
					this.getReceivedGifts()
				}
			},
			// 礼物卡 关闭
			giftClose () {
				this.giftVisible = false
			},
			// 预览 打开
			imagePreviewChange() {
				uni.previewImage({
					indicator: 'none',
					urls: [this.form.avatarUrl]
				})
			},
			// 获取生成海报时需要的用户头像
			async getPosterUserAvatars (giftObj) {
				const result = await this.$axios.get(this.API.getPosterUserAvatars, {
					data: {
						giftGivingId: giftObj.id,
						type: 2 // 1小队海报 2礼物海报
					}
				})
				if (result) {
					this.sharewithFriends(Object.assign(result, giftObj))
				}
			},
			// 礼物海报分享
			async sharewithFriends (data) {
				this.loading = true
				const result = await this.$axios.post(this.API.getGiftPoster, {
					scene: `?uid=${this.form.uid}`, // 需要的参数,例如：id=1&name=2&uid=100119&...
					path: '/pages/index/index',// 扫码后进入小程序的页面位置
					firstText: '你收到了一份新礼物', // 第一行文字
					senderAvatar: data.senderAvatar, // 发礼物人头像
					sender: data.user.nickname, // 发礼物人姓名
					gift: data.gift, // 礼物图片
					bigAvatar: data.bigAvatar,// 收礼物人头像
					isVolunteer: this.form.isVolunteer, // 是否志愿者(1:是、0:否)
					content: data.giftMessage, // 正文内容
					avatarLst: data.avatarList || []
				})
				this.loading = false
				if (result) {
					this.playbillVisible = true
					this.playbillPic = result
					this.giftNotClose()
					this.giftClose()
				}
			},
			// 长按保存图片
			playbillPress () {
				uni.downloadFile({
					url: this.playbillPic, //不能是本地，只能是网络路径
					success: ret => {
						if (ret.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: ret.tempFilePath,
								success: res => {
									this.$base.Tips('保存海报成功')
									this.playbillClose()
								}
							})
						}
					}
				})
			},
			// 分享海报 关闭
			playbillClose () {
				this.playbillVisible = false
				setTimeout(() => {
					this.playbillPic = ''
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.me {
		min-height: calc(100vh);
		overflow: hidden;
		
		.body_scroll {
			padding-bottom: 60px;
			.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_open {
					margin: 10rpx auto 0 auto;
					background-color: $D62E31;
					border-radius: 12rpx;
					text-align: center;
					line-height: 66rpx;
					font-size: 30rpx;
					font-weight: 400;
					width: 312rpx;
					height: 66rpx;
					color: $white;
				}
				.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: $S55B88;
										}
									
										.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;
									&:hover {
										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;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	
		.gift_dialog {
			background-color: transparent;
			position: relative;
			.current {
				color: $white;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 400;
				line-height: 50rpx;
				text-align: center;
				margin-bottom: 40rpx;
			}
			.gift_dialog_content {
				margin: 0 20rpx;
				
				.swiper {
					border-radius: 18rpx 18rpx 0 0;
					overflow: hidden;
					height: 1230rpx;
					.swiper-item {
						background-color: $white;
						border-radius: 18rpx;
						overflow: hidden;
						margin: 0 10rpx;
						.tips {
							background-color: $D62E31;
							line-height: 76rpx;
							text-align: center;
							font-size: 32rpx;
							font-weight: 400;
							color: $white;
						}
						.swiper-item__main {
							padding: 52rpx;
							.th {
								display: flex;
								align-items: center;
								.l {
									display: flex;
									align-items: center;
									overflow: hidden;
									flex: 1;
									.head_portrait {
										border-radius: 50%;
										overflow: hidden;
										min-width: 80rpx;
										height: 80rpx;
										width: 80rpx;
									}
									.name {
										line-height: 44rpx;
										padding: 0 14rpx;
										font-size: 32rpx;
										font-weight: 400;
										color: $bg-0;
									}
									.ico {
										height: 30rpx;
										width: 30rpx;
									}
								}
								.date {
									padding-left: 40rpx;
									font-size: 22rpx;
									font-weight: 400;
									color: $B7B7B7;
								}
							}
							.content {
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								min-height: 168rpx;
								-webkit-line-clamp: 4;
								line-clamp: 4;
								-webkit-box-orient: vertical;
								margin: 40rpx 0 20rpx 0;
								line-height: 42rpx;
								font-size: 30rpx;
								font-weight: 400;
								color: $E72727;
							}
							.gift_info {
								text-align: center;
								.gift_info__image {
									height: 340rpx;
									margin: 0 auto;
									width: 340rpx;
								}
								.gift_info__text {
									margin-top: 8rpx;
									font-size: 30rpx;
									font-weight: 400;
									color: $B7B7B7;
									line-height: 1;
								}
							}
							.source {
								text-align: center;
								margin-top: 46rpx;
								.source_txt {
									background-color: $F8F8F8;
									display: inline-block;
									border-radius: 50rpx;
									padding: 10rpx 20rpx;
									font-size: 24rpx;
									margin: 0 auto;
								}
							}
							.btns {
								margin-top: 46rpx;
								.item {
									background-color: $F8F8F8;
									border-radius: 34rpx;
									height: 68rpx;
									color: $J49494;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 26rpx;
									& + .item {
										margin-left: 80rpx;
									}
									&.active {
										color: $D62E31;
									}
									.iconfont {
										margin-right: 8rpx;
										font-size: 36rpx;
									}
								}
							}
						}
						.copyright {
							border-radius: 0 0 18rpx 18rpx;
							background-color: $white;
							padding: 0 0 26rpx 0;
							margin: 0 auto;
							width: 100%;
							.pic {
								text-align: center;
								margin: 0 auto;
								width: 540rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
			.close {
				margin: 80rpx auto 0 auto;
				justify-content: center;
				align-items: center;
				font-size: 50rpx;
				color: $J49494;
				height: 50rpx;
				display: flex;
				width: 50rpx;
			}
		}
	}
</style>
