<template>
	<view class="container">
		<view class="page-bg"></view>
		<view class="release" @click="onRelease">
			<image src="../../static/icon/add5.png" mode="widthFix"></image>
		</view>
		<view :style="'margin-top: ' + statusBarHeight + 'px'"></view>
		<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'">
			<view class="pair">
				<!-- <view class="search" @click="navTo('pages/search/index')">
					<image src="../../static/icon/search2.png" mode="widthFix"></image>
				</view> -->
				<view class="pair-btn" @click="showGender = true">
					<image src="../../static/icon/screen2.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu">
				<u-tabs :list="menu" :current="currentTab" lineColor="#ff0077" :activeStyle="{
					color: '#ffffff',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" @click="onTabs">
				</u-tabs>
			</view>
			<!-- 弹出层 -->
			
		</view>
		<view class="header-box"></view>
		
		<view class="comment-box">
			
			<view class="comment">
				<view @click="navTo('sub_pages/notice/comment')" class="commit-notice" v-show="unReadCommentNumber > 0">
					{{unReadCommentNumber}}条新消息
				</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="avatar" @click="navTo('sub_pages/member/detail/detail',{userId:item.userId})">
						<view class="icon">
							<image :src="item.userAvatar" mode="aspectFill"></image>
						</view>
					</view>
					<view class="info">
						<view class="head">
							<view class="title">
								<view class="nickname">
									<text class="text">{{ item.nickname }}</text>
									<text class="user-city" v-if="item.userCity">{{ getCity(item.userCity) }}</text>
									<!-- <u-tag v-if="item.userCity" :customStyle="{marginLeft: '20rpx'}" class="city" type="info" borderColor="#681752"
										:text="`${item.userCity}`" size="mini"></u-tag> -->
								</view>
								<view class="label">
									{{ item.age ? item.age + '岁' : '' }}
									{{ item.position ? item.position : '' }}
								</view>

							</view>
							<view v-if="item.follow" class="unfollow-btn">
								<text>已关注</text>
							</view>
							<view v-else class="follow-btn" @click="onFollow(item.userId,index)">
								<!-- <image src="../../static/icon/follow.png" mode="widthFix"></image> -->
								<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
								<text>关注</text>
							</view>
						</view>
						<view class="desc">
							<mp-html :content="item.content" />
							<!-- <text>有没有小姐姐想今年结婚的呀，我们可以私聊，希望有人可以与我共黄昏，有人问我粥可温...</text> -->
						</view>
						<view v-if="item.files[0].type =='video'" class="video">
							<ArticleVideo :src="item.files[0].url" :poster="item.files[0].thumb" :width="item.files[0].width" :height="item.files[0].height"></ArticleVideo>
						</view>
						<view v-else class="image">
							<u-album :urls="item.files" keyName="thumb" :singleSize="100" singleMode="aspectFill"
								multipleMode="aspectFill"></u-album>
						</view>
						<view class="topic" v-if="item.topic">
							<text @click="onTopic(item.topic)">#{{ item.topic }}</text>
						</view>
						<view class="comment-btn">
							<view class="left">
								<!-- <view class="date-time">{{ new Date(item.createTime).getTime() | timeFrom }}</view> -->
							</view>
							<view class="right">
								<view class="zan" v-if="item.liked == 0" @click="onLikes(item,index)">
									<u-icon name="thumb-up" :size="20"></u-icon>
									<text>{{ item.likes }}</text>
								</view>
								<view class="zan" v-else @click="onLikes(item,index)">
									<u-icon name="thumb-up" color="#8b004c" :size="20"></u-icon>
									<text class="active">{{ item.likes }}</text>
								</view>
								<view class="comment2" @click="openComment(item,index)">
									<u-icon name="chat" :size="20"></u-icon>
									<!-- <image src="../../static/icon/comment2.png" mode="widthFix"></image> -->
									<text>{{ item.commentNumbers }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="!list && list.length == 0" mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>
		</view>

		<u-loadmore :status="loading" />
		<u-gap height="5"></u-gap>

		<view class="popup" :catchtouchmove="true" @touchmove="()=>{}">
			<u-popup :show="showComment" mode="bottom" :safeAreaInsetTop="ture" :round="10" :closeable="true"
				@close="closeComment" :catchtouchmove="true">
				<view class="comment-popup">
					<view class="head">
						<text class="title">{{ countComment }}条评论</text>
					</view>
					<view class="user-list">
						<u-list :height="310" :scrollTop="anchor">
							<view class="list">
								<u-list-item v-for="(item, index) in comment" :key="index">
									<u-cell :border="false">
										<!-- <view slot="icon">
											<view class="avatar">
												<u-avatar size="50" :src="item.avatar"
													customStyle="margin: -3px 5px -3px 0"
												@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
											</view>
										</view> -->
										<view slot="label">
											<view class="comment-box">
												<view class="comment-avatar">
													<u-avatar :size="45" :src="item.avatar"
														customStyle="margin: 0 5px -3px 0"
														@click="$push('sub_pages/member/detail/detail',{userId: item.userId})"></u-avatar>
												</view>
												<view class="comment-content">
													<view class="nickname">
														{{ item.nickname }}
													</view>
													<rich-text class="content" :nodes="item.content"></rich-text>
													<view class="reply-box">
														<view class="create-time">
															{{ new Date(item.createTime).getTime() | timeFrom }} ·
															{{ item.city }} <text class="reply"
																@click="onReply(item,index)">回复</text>
														</view>
														<view class="like">
															<!-- <u-icon name="heart" :size="18"></u-icon> -->
															粉丝：
															<u-badge numberType="limit" :inverted="true" color="#999999"
																:value="item.fans"></u-badge>
														</view>
														<!-- 粉丝：{{ item.fans }} -->
													</view>
													<!-- 回复评论 -->
													<block v-for="(reply, replyIndex) in item.children"
														:key="replyIndex">
														<view class="reply-item">
															<view class="reply-user">
																<u-avatar :size="16" :src="reply.avatar"
																	customStyle="margin: -3px 5px -3px 0"
																	@click="$push('sub_pages/member/detail/detail',{userId: reply.replyUserId})"></u-avatar>
																<view class="nickname">
																	<text
																		class="reply-nickname1">{{ reply.nickname }}</text>
																	<u-icon v-if="reply.replyNickname"
																		name="play-right-fill" :size="12"
																		color="#999999"></u-icon>
																	<text class="reply-nickname2"
																		v-if="reply.replyNickname">{{ reply.replyNickname }}</text>
																</view>
															</view>
															<rich-text class="content"
																:nodes="reply.content"></rich-text>
															<view class="reply-box">
																<view class="create-time">
																	{{ new Date(reply.createTime).getTime() | timeFrom }}
																	·
																	{{ reply.city }} <text class="reply"
																		@click="onReply(reply,replyIndex)">回复</text>
																</view>
																<view class="like">
																	粉丝：
																	<u-badge numberType="limit" :inverted="true"
																		color="#999999" :value="reply.fans"></u-badge>
																</view>
															</view>
														</view>
													</block>
												</view>
											</view>
										</view>
										<view slot="right-icon">

										</view>
									</u-cell>
								</u-list-item>
								<u-empty v-if="comment.length == 0" mode="message" text="暂无评论"
									icon="http://cdn.uviewui.com/uview/empty/data.png">
								</u-empty>
							</view>
						</u-list>
					</view>
					<view class="footer">
						<view class="search">
							<!-- <u-button searchIcon="chat" text="发送" v-model="form.content" @click="onSend()" :actionStyle="actionStyle" :disabled="disabled"></u-button> -->
							<u-search :showAction="true" :placeholder="placeholder" searchIcon="chat" actionText="发送" borderColor="#EEEEEE"
								:actionStyle="actionStyle" v-model="form.content" :disabled="disabled"
								@custom="$u.throttle(onSend, 500)"></u-search>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- <u-action-sheet :actions="gender" :show="showGender" cancelText="取消" @select="onGender"
			@close="showGender = false"></u-action-sheet> -->
		<view v-if="showGender" class="poppup-gender">
			<view class="poppup-gender-mask" @click="showGender=false">
				<view class="poppup-gender-arrow">
					
				</view>
				<view class="poppup-gender-box">
					<view @click.stop="onGender(null)" class="poppup-gender-item" :class="{current: where.gender == null}">
						帅哥美女
					</view>
					<view @click.stop="onGender(2)" class="poppup-gender-item" :class="{current: where.gender == 2}">
						只看美女
					</view>
					<view @click.stop="onGender(1)" class="poppup-gender-item" :class="{current: where.gender == 1}">
						只看帅哥
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import storage from '@/utils/storage'
	import * as UserApi from '@/api/user.js'
	import * as ArticleApi from '@/api/article.js'
	import * as ArticleLikeApi from '@/api/article-like.js'
	import * as ArticleCommentApi from '@/api/article-comment.js'
	import * as UserFollowApi from '@/api/user-follow.js'
	import * as Util from '@/utils/util.js'
	import * as Config from '@/config.js';
	import ArticleVideo from '@/components/article-video/article-video.vue'
	const pageSize = 10
	const userId = uni.getStorageSync('userId')
	const loginUserId = uni.getStorageSync('userId')
	
	const menu = [{
			name: '推荐'
		},
		{
			name: '同城'
		},
		{
			name: '关注'
		}
	]

	import mixin from '@/core/mixins/tabbar'
	export default {
		components: {ArticleVideo},
		mixins: [mixin],
		data() {
			return {
				anchor: 0,
				options: null,
				list: [], // 文章列表
				comment: [], // 文章评论列表
				menu,
				currentTab: 0,
				disabled: false,
				danmuList: [{
						text: '好可爱嗷~~',
						color: '#ff0000',
						time: 1
					},
					{
						text: 'かわゆい',
						color: '#ff00ff',
						time: 3
					}
				],
				gender: [{
						value: 2,
						name: '只看美女'
					},
					{
						value: 1,
						name: '只看帅哥'
					},
					{
						value: null,
						name: '美女帅哥'
					}
				],
				actionStyle: {
					background: '#8b004c',
					color: '#ffffff',
					padding: '12rpx 16rpx',
					borderRadius: '50rpx'
				},
				iconStyle: {
					background: '#8b004c',
				},
				statusBarHeight: 25,
				latitude: 22.766777,
				longitude: 108.375152,
				scale: 10,
				page: 1,
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				showGender: false,
				showComment: false,
				countComment: 0,
				where: {
					categoryId: 0,
					platform: 'MP-WEIXIN',
					showFollow: true,
					scene: 'new'
				},
				form: {
					articleId: 0,
					content: '',
					replyCommentId: 0,
					commentNumbers: 0
				},
				articleIndex: 0, // 当前评论的文章
				currentIndex: 0, // 当前评论ID
				loading: 'loading',
				replyUserId: 0,
				placeholder: '善语结善缘，恶言伤人心',
				isLogin: false
			}
		},
		onLoad(options) {
			const app = this
			console.log("options: ", options);
			app.checkLogin()
			app.onRefreshList()
			// app.getLocation(res => {
			// 	if (res.latitude && res.longitude) {
			// 		app.latitude = res.latitude
			// 		app.longitude = res.longitude
			// 		app.scale = 16
			// 	}
			// })
			uni.getSystemInfo({
				success(data) {
					if (data) {
						app.statusBarHeight = data.statusBarHeight
					}
				}
			})
			uni.$on("ArticleChange",(data)=>{
				const index = this.list.findIndex(item => item.articleId == data.articleId)
				if(index >= 0){
					this.list[index].liked = data.liked
					this.list[index].likes = data.likes
					this.list[index].commentNumbers = data.commentNumbers
				}
				console.log(data);
			})
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// this.page = 1
			// this.list = []
			// this.onRefreshList()
		},
		// 触底函数
		onReachBottom() {
			const app = this
			if (app.canReset) {
				console.log("触底函数1: ");
				app.page = ++app.page;
				app.onRefreshList()
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.onRefreshList()
			uni.stopPullDownRefresh();
		},
		methods: {
			onTabs(e) {
				const app = this
				const userId = uni.getStorageSync('userId')
				const index = e.index
				app.currentTab = index
				app.where = {}

				// 最新
				if (index == 0) {
					app.where.scene = 'new'
				}
				// 同城
				if (index == 1) {
					app.where.scene = 'intraCity'
					if (userId == 1101) {
						app.$push('pages/login/index')
						return false
					}
				}
				// 关注
				if (index == 2) {
					app.where.scene = 'focus'
					if (userId == 1101) {
						app.$push('pages/login/index')
						return false
					}
				}
				app.page = 1
				app.list = []
				app.onRefreshList()
			},
			onChange(e) {
				this.currentTab = e.index
			},
			// 刷新订单列表
			onRefreshList() {
				const app = this
				// var LoveWhere = uni.getStorageSync('LoveWhere')
				app.where.page = app.page
				app.where.loginUserId = userId
				app.where.categoryId = 0
				app.where.showFollow = true
				app.where.sceneType = 'LOVE_INDEX'
				return new Promise((resolve, reject) => {
					ArticleApi.pageArticle(app.where)
						.then(result => {
							const list = result.data.list
							// 图片反序列化
							const newList = list.map((d, i) => {
								const imgs = JSON.parse(d.files)
								if (imgs) {
									var files = []
									imgs.map(pic => {
										if(pic.type != 'video'){
											files.push({
												thumb: pic.url + '?x-oss-process=image/resize,w_400/quality,Q_90',
												url: pic.url + '?x-oss-process=image/resize,w_1500/quality,Q_90'
											})
										}else {
											files.push(pic)
										}
										
									})
								}
								d.files = files
								return d
							})
							// 合并新数据
							app.list = app.list.concat(newList)
							if (result.data.count > app.list.length) {
								app.canReset = true
							} else {
								app.loading = 'nomore'
								app.canReset = false
							}
							resolve(newList)
						})
				})
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			// 检查是否登录
			checkLogin() {
				if (!!store.getters.userId && store.getters.userId != Config.userId) {
					this.isLogin = true
				}
			},
			onGender(gender) {
				this.list = []
				this.where.page = 1
				this.where.gender = gender
				this.showGender = false
				this.onRefreshList()
			},
			// 获取用户坐标
			// 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
			getLocation(callback) {
				const app = this
				uni.getLocation({
					success: callback,
					fail() {
						app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
						app.isAuthor = false
					}
				})
			},
			// 跳转页面
			navTo(url, params) {
				if (!store.getters.userId || store.getters.userId == 1101) {
					this.$navTo('pages/login/index')
					return false
				}
				this.$navTo(url, params)
			},
			onRelease(){
				const app = this
				if (!store.getters.userId || store.getters.userId == 1101) {
					this.$navTo('pages/login/index')
					return false
				}
				uni.navigateTo({
					url: `/sub_pages/love/release/release`,
					events: {
						reload: ({
							isRefresh // false
						}) => {
							console.log("onRelease: ",isRefresh);
							if(isRefresh){
								app.page = 1
								app.list = []
								app.onRefreshList()
							}
							// const currentTab = uni.getStorageSync('currentTab')
							// // 取消关注，从列表中删除
							// if (!follow && currentTab == 2 && app.curQueue[index]) app.curQueue.splice(index, 1)
						}
					}
				})	
			},
			onFollow(shopId, index) {
				const app = this
				if (!app.isLogin) {
					app.$push('pages/login/index')
					return false
				}
				const status = !app.list[index].follow
				app.list[index].follow = status
				app.list.map((d, i) => {
					if (shopId == d.userId) {
						app.list[i].follow = status
					}
				})
				UserFollowApi.addFollow({
					shopId
				}).then(res => {
					app.$success(res.message)
				})
			},
			onLikes(item, index) {
				const app = this
				const {
					articleId,
					likes,
					liked
				} = item
				if (!app.isLogin) {
					app.$push('pages/login/index')
					return false
				}
				ArticleLikeApi.addArticleLike({
					articleId,
					likes,
					liked
				}).then(res => {
					app.list[index].liked = res.data.liked
					app.list[index].likes = res.data.likes
				}).catch(err => {
					app.$error(err.message)
				})
			},
			openComment(item, index) {
				const loginUserId = store.getters.userId
				if (!loginUserId || loginUserId == 1101) {
					this.$push('pages/login/index')
					return false
				}
				console.log("item: ", item);
				// uni.hideTabBar()
				this.comment = []
				this.getComment(item.articleId)
				this.form.articleId = item.articleId
				this.form.commentNumbers = item.commentNumbers
				this.form.toUserId = item.userId
				this.countComment = item.commentNumbers
				this.currentIndex = index
				this.showComment = true
				console.log("this.form: ", this.form);
			},
			closeComment() {
				// uni.showTabBar()
				this.showComment = false
				this.placeholder = '善语结善缘，恶言伤人心'
			},
			getComment(articleId) {
				const app = this
				ArticleCommentApi.pageArticleComment({
					articleId
				}).then(res => {
					app.countComment = res.data.count
					app.comment = res.data.list.map(d => {
						d.children = d.children.reverse()
						return d
					})
				})
			},
			// 发表评论
			onSend() {
				const app = this
				const {
					form,
					countComment
				} = this
				const {
					articleId,
					content,
					toUserId,
					replyUserId,
					replyCommentId
				} = form
				if (form.content == '') {
					app.$error('请填写评论内容')
					return false
				}
				form.countComment = countComment
				app.disabled = true
				ArticleCommentApi.addArticleComment({
					articleId,
					countComment,
					content,
					toUserId: replyUserId?replyUserId:toUserId,
					replyCommentId,
					replyUserId
				}).then(res => {
					app.form.content = ''
					app.form.replyCommentId = 0
					app.form.replyUserId = 0
					app.placeholder = '善语结善缘，恶言伤人心'
					app.getComment(form.articleId)
					const currIndex = app.list.findIndex(item => item.articleId == articleId)
					app.list[currIndex].commentNumbers = res.data.commentNumbers
					app.anchor = app.anchor + 0.01
					app.disabled = false
					// app.$success(res.message)
				}).catch(err => {
					app.$error(err.message)
					app.disabled = false
				})
			},
			getProvince(text) {
				if (text == '广西壮族自治区') {
					return '广西'
				}
				return text;
			},
			getCity(text) {
				return text.replace('市', '')
			},
			onReply(item, index) {
				const app = this
				if (loginUserId == 1101 || loginUserId == null) {
					app.$push('pages/login/index')
					return false
				}
				console.log("item: ", item);
				app.placeholder = '回复@' + item.nickname
				app.form.replyCommentId = item.replyCommentId ? item.replyCommentId : item.commentId
				app.form.replyUserId = item.userId
				// UserLikeApi.addLike(app.form).then(res => {
				// 	app.likes = res.data
				// 	app.setLikeLight(index)
				// })
			},
			onTopic(text){
				this.$push('/pages/love/category?topic=' + text)
				// this.list = []
				// this.where.page = 1
				// this.where.topic = text
				// this.onRefreshList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		height: 100vh;
	}

	.page-bg {
		width: 750rpx;
		/* #ifdef MP-WEIXIN */
		height: calc(100rpx + var(--status-bar-height));
		/* #endif */
		display: block;
		background-color: #0d0119;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 8888;
	}

	.release {
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		z-index: 9999;
		overflow: hidden;

		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 100%;
			background-color: #ffffff;
		}
	}

	.header {
		width: 750rpx;
		position: fixed;
		z-index: 9999;
		top: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 88rpx;
		background-color: #0d0119;

		.pair {
			position: absolute;
			left: 30rpx;
			position: absolute;
			right: 30rpx;
			display: flex;

			.search {
				image {
					padding-top: 15rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.pair-btn {
				image {
					margin-left: 30rpx;
					padding-top: 16rpx;
					width: 36rpx;
					height: 36rpx;
				}

				.search-wrapper {
					width: 240rpx;
					padding: 0 20rpx;
				}
			}

			// .pair-btn{
			// 	margin-left: 22rpx;
			// 	height: 50rpx;
			// 	line-height: 50rpx;
			// 	margin-top: 15rpx;
			// 	padding: 6rpx 12rpx;
			// 	color: #ffffff;
			// 	border-radius: 10rpx;
			// 	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
			// }
		}


		.menu {
			display: flex;
			justify-content: center;
			// font-size: 32rpx;
			// font-weight: 600;
			z-index: 9999;

			.link {
				color: #cfd1d7;
			}

			.curr {
				color: #ffffff;
				border-bottom: 5rpx solid #ffffff;
			}
		}

		// .search{
		// 	position: absolute;
		// 	right: 30rpx;
		// 	image{
		// 		padding-top: 20rpx;
		// 		width: 50rpx;
		// 		height: 50rpx;
		// 	}
		// }
	}

	.header-box {
		height: 100rpx;
	}

	.comment-box {
		background-color: #ffffff;
		width: 750rpx;
		margin: 0 auto;
		overflow-x: hidden;

		.comment {
			width: 700rpx;
			padding: 30rpx;

			.item {
				display: flex;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 2rpx solid #f3f3f3;

				.avatar {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon {
						image {
							width: 90rpx !important;
							height: 90rpx !important;
							border-radius: 100%;
							overflow: hidden;
							border: 5rpx solid #ffffff;
						}
					}

					.add {
						position: absolute;
						bottom: -7rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						overflow: hidden;
					}
				}

				.info {
					width: 660rpx;
					margin-left: 10rpx;

					.head {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							.nickname {
								display: flex;
								align-items: center;
								font-size: 30rpx;
								font-weight: 700;

								.user-city {
									border: 1rpx solid #8d1a50;
									border-radius: 25px;
									padding: 0 8rpx !important;
									font-size: 18rpx;
									margin-left: 20rpx;
									height: 25rpx;
									color: #8d1a50;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}

							.label {
								color: #999999;
								font-size: 26rpx;
							}


							.date-time {
								color: #9a9a9a;
								font-size: 26rpx;
							}
						}

						.follow-btn {
							padding: 4rpx 20rpx;
							color: #ffffff;
							font-size: 26rpx;
							border-radius: 50rpx;
							display: flex;
							margin-right: 10rpx;
							background: linear-gradient(#47076b, #8d1a50);

							image {
								width: 24rpx;
								height: 66rpx;
								margin-right: 6rpx;
							}
						}

						.unfollow-btn {
							padding: 4rpx 20rpx;
							color: #ffffff;
							font-size: 26rpx;
							border-radius: 50rpx;
							margin-right: 10rpx;
							background: linear-gradient(#b3b3b3, #cccccc);

							image {
								width: 24rpx;
								height: 66rpx;
								margin-right: 6rpx;
							}
						}
					}

					.topic {
						margin-bottom: 20rpx;
						padding: 8rpx 16rpx;
						font-size: 28rpx;
						color: #8d1a50;
						font-weight: 700;
					}

					.image {
						padding: 20rpx 0;

						image {
							width: 160rpx;
							height: 160rpx;
							margin-right: 8rpx;
						}
					}

					.video {
						padding: 20rpx 0;
						max-width: 400rpx;

						video {
							max-width: 400rpx;
						}
					}

					.comment-btn {
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;

						.left {
							.date-time {
								color: #9a9a9a;
								font-size: 26rpx;
							}
						}

						.right {
							display: flex;

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

								image {
									width: 36rpx;
									height: 36rpx;
									margin-right: 10rpx;
								}
							}

							.comment2 {
								margin-left: 50rpx;
								display: flex;
								align-items: center;

								image {
									width: 36rpx;
									margin-right: 10rpx;
								}

								text {
									padding: 0 5rpx;
								}
							}

							.active {
								color: #681752;
							}
						}


					}

				}
			}
		}
	}


	.comment-popup {
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		width: 750rpx;
		margin-bottom: 40rpx;
		font-size: 26rpx;

		.head {
			padding: 24rpx;
			text-align: center;
			border-bottom: 1rpx solid #f3f3f3;
		}

		.user-list {}

		.footer {
			background-color: #ffffff;
			border-top: 1rpx solid #f3f3f3;
			width: 750rpx;
			height: 55rpx;
			position: fixed;
			left: 0;
			bottom: 20rpx;
			padding: 20rpx 0;

			.search {
				width: 700rpx;
				margin: auto;
			}
		}

		.comment-box {
			display: flex;

			.comment-avatar {}

			.comment-content {
				width: 100%;

				.nickname {
					color: #999999;
					font-size: 26rpx;
					display: flex;
					padding: 2rpx 0;

					.reply-nickname1 {
						padding-right: 10rpx;
					}

					.reply-nickname2 {
						padding-left: 10rpx;
					}
				}

				.content {
					font-size: 30rpx;
				}

				.reply-box {
					font-size: 26rpx;
					color: #999999;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;

					.reply {
						color: #681752;
						margin: 0 30rpx;
					}

					.like {
						display: flex;
						align-items: center;
						color: #999999;
						font-size: 26rpx;
						padding-right: 50rpx;
					}

				}

				.reply-item {
					margin: 24rpx 0;

					.reply-user {
						display: flex;
						align-items: center;
						padding: 2rpx 0;
					}
				}
			}
		}
	}
	.poppup-gender{
		&-mask{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 99999;
			background-color: rgba(0, 0, 0, .5);
		}
		
		&-arrow {
			width: 0; 
			height: 0;
			border-top: 8rpx solid transparent;
			  border-bottom: 8rpx solid #ffffff;
			  border-left: 8rpx solid transparent;
			  border-right: 8rpx solid transparent;
			  position: absolute;
			  top: calc(114rpx + var(--status-bar-height));
			  left: 98rpx;
		}
		&-box{
			// width: 170rpx;
			// height: 200rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
			position: absolute;
			top: calc(130rpx + var(--status-bar-height));
			left: 80rpx;
			padding: 10rpx 0;
		}
		&-item{
			font-size: 32rpx;
			height: 100rpx;
			padding: 0 40rpx;
			line-height: 80rpx;
			text-align: center;
			color: #999999;
			&.current{
				color: #681752;
			}
		}
		
	}
	
	.commit-notice{
		width: 220rpx;
		height: 50rpx;
		background-color: rgba(#681752, 1);
		color: #ffffff;
		margin:  10rpx auto;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		text-align: center;
	}
	
</style>