<template>
	<view class="pair">
		<view class="bg-color"></view>
		<!-- <image src="https://file.wsdns.cn/20230604/c848136d880e46bf97c3980eb0f4a67c.jpeg" class="bg" mode="widthFix">
		</image> -->
		<image :src="userInfo.bgImage?userInfo.bgImage :userInfo.avatar" class="bg" width="750" mode="aspectFill">
		</image>
		<view class="header">
			<view class="user">
				<view class="avatar" @click="openAvatarBig(userInfo.avatar)">
					<u-avatar :src="userInfo.avatar" shape="circle" mode="aspectFill" :size="100"></u-avatar>
				</view>
				<view class="info">
					<view class="nickname">{{ userInfo.nickname }}</view>
					<view class="region">{{ userInfo.province }} {{ userInfo.city }} {{ userInfo.region }}</view>
					<view class="user-id" v-if="userIdPrefix && userInfo.userId">
						ID：{{ userIdPrefix }}{{ userInfo.userId }}</view>
					<view class="focus">
						<view v-if="userInfo.certification != 1" class="unfollow-btn">
							<text>未实名</text>
						</view>
						<view v-else class="follow-btn">
							<text>已实名</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tools">
				<view class="left">
					<view class="focus">
						<u-badge numberType="limit" :customStyle="{fontSize: '30rpx'}" inverted color="#ffffff"
							:showZero="true" :value="userInfo.followers"></u-badge>
						<text>关注</text>
					</view>
					<view class="fans">
						<u-badge numberType="limit" :customStyle="{fontSize: '30rpx'}" inverted color="#ffffff"
							:showZero="true" :value="userInfo.fans"></u-badge>
						<text>粉丝</text>
					</view>
					<view class="like">
						<u-badge numberType="limit" :customStyle="{fontSize: '30rpx'}" inverted color="#ffffff"
							:showZero="true" :value="userInfo.likes"></u-badge>
						<text>获赞</text>
					</view>
				</view>
				<view class="right" v-if="loginUserId != userInfo.userId">
					<block>
						<view v-if="form.follow" class="unfocus" @click="addFocus(userInfo.userId)">
							<!-- <image src="../../../static/icon/follow.png" mode="widthFix"></image> -->
							<text>已关注</text>
						</view>
						<view v-else class="focus" @click="addFocus(userInfo.userId)">
							<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
							<!-- <image src="../../../static/icon/follow.png" mode="widthFix"></image> -->
							<text>关注</text>
						</view>
					</block>
					<view class="chat" @click="onChat(userInfo)">
						<u-icon name="chat" color="#ffffff" :size="15"></u-icon>
						<!-- <image src="../../../static/icon/comment.png" mode="widthFix"></image> -->
						<text>聊天</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="tabs">
				<u-tabs :current="curTab" :list="tabs" @click="onTabs" :activeStyle="{color: '#681752'}" lineColor="#681752"></u-tabs>
			</view>
			<!-- 信息 -->
			<view v-if="curTab == 0" class="list">
				<view class="info-item">
					<view class="his-head">
						<view class="line"></view>
						<text class="title">关于我</text>
					</view>
					<view class="interest">
						<view class="desc">
							{{ userInfo.introduction ? userInfo.introduction : '该用户还未填写自我介绍，看看她的其他内容吧~' }}
						</view>
					</view>
					<view class="his-head">
						<view class="line"></view>
						<text class="title">基本信息</text>
					</view>
					<view class="interest">
						<view class="field">
							<view class="text">性别：{{ getSexName(userInfo.sex) }}</view>
							<view class="text" v-if="userInfo.birthday">
								年龄：{{ computedAge(userInfo.birthday) }}</view>
							<!-- <view class="text" v-if="userInfo.birthday">{{ `生日：${userInfo.birthday}` }}</view> -->
							<view class="text" v-if="form.position">职业：{{ form.position }}</view>
							<view class="text" v-if="userInfo.city">
								{{ `注册地址：${userInfo.province}-${userInfo.city}-${userInfo.region}` }}
							</view>
							<view class="text" v-if="form.yearlyPay">
								{{ `年收入：${form.yearlyPay ? form.yearlyPay : '不限'}` }}
							</view>
							<view class="text" v-if="userInfo.education">
								{{ `学历：${userInfo.education ? userInfo.education : '不限'}` }}
							</view>
							<view class="text" v-if="form.maritalStatus">
								{{ `婚姻状况：${form.maritalStatus ? form.maritalStatus : '不限'}` }}
							</view>
							<view class="text" v-if="form.height">{{ `身高：${form.height ? form.height : '不限'}` }}</view>
							<view class="text" v-if="form.weight">{{ `体重：${form.weight ? form.weight : '不限'}` }}</view>
							<view class="text" v-if="form.shape">{{ `体型：${form.shape ? form.shape : '不限'}` }}</view>
							<view class="text" v-if="form.hasChildren">
								{{ `有无孩子：${form.hasChildren ? form.hasChildren : '不限'}` }}
							</view>
							<view class="text" v-if="form.haveChild">
								{{ `是否想要孩子：${form.haveChild ? form.haveChild : '不限'}` }}
							</view>
							<view class="text" v-if="form.whenMarried">
								{{ `何时想结婚：${form.whenMarried ? form.whenMarried : '不限'}` }}
							</view>

						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="his-head">
						<view class="line"></view>
						<text class="title">择偶信息</text>
					</view>
					<view class="interest">
						<view class="field">
							<view class="text" v-if="form.ageMate">{{ `年龄：${form.ageMate ? form.ageMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.heightMate">
								{{ `身高：${form.heightMate ? form.heightMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.weightMate">
								{{ `体重：${form.weightMate ? form.weightMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.yearlyPayMate">
								{{ `年收入：${form.yearlyPayMate ? form.yearlyPayMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.educationMate">
								{{ `学历：${form.educationMate ? form.educationMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.vocationMate">
								{{ `职业：${form.vocationMate ? form.vocationMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.shapeMate">
								{{ `体型：${form.shapeMate ? form.shapeMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.maritalStatusMate">
								{{ `婚姻状况：${form.maritalStatusMate ? form.maritalStatusMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.cityMate">
								{{ `择偶区域：${form.provinceMate}-${form.cityMate}-${form.regionMate}` }}
							</view>
							<view class="text" v-if="form.hasChildrenMate">
								{{ `有无孩子：${form.hasChildrenMate ? form.hasChildrenMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.haveChildMate">
								{{ `是否想要孩子：${form.haveChildMate ? form.haveChildMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.isSmokingMate">
								{{ `是否吸烟：${form.isSmokingMate ? form.isSmokingMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.isDrinkMate">
								{{ `是否喝酒：${form.isDrinkMate ? form.isDrinkMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.hasCarMate">
								{{ `是否有房：${form.hasCarMate ? form.hasCarMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.hasHouseMate">
								{{ `是否有房：${form.hasHouseMate ? form.hasHouseMate : '不限'}` }}
							</view>
							<view class="text" v-if="form.whenMarriedMate">
								{{ `何时想结婚：${form.whenMarriedMate ? form.whenMarriedMate : '不限'}` }}
							</view>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="his-head">
						<view class="line"></view>
						<text class="title">兴趣爱好</text>
					</view>
					<view class="interest" v-if="interest">
						<view class="u-page__tag-item" v-for="(tag, index) in interest" :key="index">
							<u-tag :text="`${tag}`" type="info" color="#ffffff" bgColor="#681752" borderColor="#681752"
								:name="index">
							</u-tag>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="his-head">
						<view class="line"></view>
						<text class="title">Ta的形象照</text>
					</view>
					<u-album :urls="fileList1" keyName="thumb" :singleSize="100" singleMode="aspectFill"
						multipleMode="aspectFill"></u-album>
					<!-- <u-album :urls="fileList1" keyName="thumb" multipleMode="widthFix"></u-album> -->
					<!-- <u-album :urls="fileList1" keyName="thumb"></u-album> -->
				</view>
				<u-gap height="80"></u-gap>
				<!-- 操作按钮 -->
				<view class="footer" v-if="myself">
					<view class="btn-wrapper">
						<u-button text="去编辑" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
							shape="circle" @click="navTo('sub_pages/user/personal/index')"></u-button>
					</view>
				</view>
			</view>
			<!-- 动态 -->
			<view v-if="curTab == 1" class="list">
				<view class="comment">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="avatar" @click="$push('sub_pages/member/detail/detail',{userId:item.userId})">
							<view class="icon">
								<image :src="item.userAvatar" mode="widthFix"></image>
							</view>
						</view>
						<view class="info">
							<view class="head">
								<!-- <view class="title">
									<view class="nickname">{{ item.nickname }}</view>
									<view class="date-time">{{ new Date(item.createTime).getTime() | timeFrom }}</view>
								</view> -->
								<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>
							<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" :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>
								<!-- <u-album :urls="item.files" keyName="thumb" multipleMode="widthFix"></u-album> -->
							</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 active" style="margin-right: 50rpx;" v-if="item.userId == loginUserId"
										@click="onDelete(item.articleId)">
										<u-icon name="trash" color="#681752" :size="20"></u-icon>
										<text>删除</text>
									</view>
									<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 class="comment-btn">
								<view class="zan active" style="margin-right: 50rpx;" v-if="item.userId == loginUserId"
									@click="onDelete(item.articleId)">
									<u-icon name="trash" color="#681752" :size="20"></u-icon>
									<text>删除</text>
								</view>
								<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>
									<text>{{ item.commentNumbers }}</text>
								</view>
							</view> -->
						</view>
					</view>
					<u-empty v-if="!list || list.length == 0" mode="list"
						icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
			</view>
			<!-- 认证信息 -->
			<view v-if="curTab == 2">
				<view class="certification-list">
					<view class="item" v-for="(item, index) in certification" :key="index" @click="navTo(item)">
						<view class="content">
							<view class="icon">
								<image :src="item.icon" mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="title">{{ item.name }}</view>
							</view>
						</view>
						<view class="btn">
							<text v-if="item.submitText == '已认证'">{{ item.submitText }}</text>
							<text v-else style="color: #666666;">{{ item.submitText }}</text>
							<u-icon name="checkbox-mark" color="#681752" v-if="item.submitText == '已认证'"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-loadmore :status="loading" /> -->

		<u-popup :show="showComment" mode="bottom" :round="10" :closeable="true" @close="closeComment">
			<view class="comment-popup">
				<view class="head">
					<text class="title">{{ countComment }}条评论</text>
				</view>
				<view class="user-list">
					<u-list :height="310">
						<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: -3px 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-search :showAction="true" :placeholder="placeholder" searchIcon="chat" actionText="发送"
							:actionStyle="actionStyle" v-model="form.content" @custom="onSend()"></u-search>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal showCancelButton @cancel="showIdCardModal = false" @confirm="doAuth" :show="showIdCardModal" title="完成认证我们才能开始配对聊天哦" cancelText="稍后认证" confirm-text="立即认证"></u-modal>
	</view>
</template>

<script>
	import {
		navTo
	} from '@/core/app.js'
	import {
		username,
		userIdPrefix
	} from '@/config.js';
	import {
		mapMutations
	} from 'vuex'
	import store from '@/store'
	// import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	// import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import * as ArticleApi from '@/api/article.js'
	import * as UserProfileApi from '@/api/love-user-profile.js'
	import * as RedisUtilApi from '@/api/redis-util.js'
	import * as ArticleLikeApi from '@/api/article-like.js'
	import * as CertificateApi from '@/api/love-certificate.js'
	import * as Util from '@/utils/util.js'
	import * as ArticleCommentApi from '@/api/article-comment.js'
	import ArticleVideo from '@/components/article-video/article-video.vue'
	const pageSize = 10

	const loginUserId = uni.getStorageSync('userId')

	export default {
		components: {ArticleVideo},
		// components: {
		// 	MescrollBody
		// },
		// mixins: [MescrollMixin],
		data() {
			return {
				userIdPrefix,
				loginUserId,
				userId: 0,
				userInfo: {
					avatar: '',
					nickname: '',
					province: '',
					city: '',
					region: '',
					userId: ''
				},
				actionStyle: {
					background: '#8b004c',
					color: '#ffffff',
					padding: '12rpx 16rpx',
					borderRadius: '50rpx'
				},
				iconStyle: {
					background: '#8b004c',
				},
				interest: [],
				fileList1: [],
				myself: false,
				tabs: [{
					name: '信息'
				}, {
					name: '动态'
				}, {
					name: '认证信息'
				}],
				certification: [{
						type: 'idCard',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/idcard.png',
						name: '身份认证',
						desc: '远离骗子与婚托，真诚交友安全有保障',
						url: 'sub_pages/certification/id-card/id-card',
						submitText: '未认证',
						isEdit: false
					},
					{
						type: 'house',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/house.png',
						name: '房屋认证',
						desc: '有趣的灵魂万里挑一，遇见同频的TA',
						url: 'sub_pages/certification/house/house',
						submitText: '未认证',
						isEdit: false
					},
					{
						type: 'education',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/xueli.png',
						name: '学历认证',
						desc: '有车一族，来一场说走就走的旅行',
						url: 'sub_pages/certification/education/education',
						submitText: '未认证',
						isEdit: false
					},
					{
						type: 'car',
						icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/card.png',
						name: '车辆认证',
						desc: '完成房产认证，证实你的实力',
						url: 'sub_pages/certification/car/car',
						submitText: '未认证',
						isEdit: false
					}
				],
				navTo,
				curTab: 0,
				isLogin: false,
				list: [], // 文章列表
				comment: [], // 文章评论列表
				page: 0,
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
					// 空布局
					empty: {
						tip: '亲，暂无订单记录'
					}
				},
				where: {
					platform: 'MP-WEIXIN'
				},
				form: {
					articleId: 0,
					content: '',
					replyCommentId: 0,
					commentNumbers: 0
				},
				articleIndex: 0, // 当前评论的文章
				showComment: false,
				countComment: 0,
				currentIndex: 0, // 当前评论ID
				loading: 'loading',
				replyUserId: 0,
				placeholder: '善语结善缘，恶言伤人心',
				showIdCardModal: false
			}
		},
		onLoad(options) {
			const app = this
			app.userId = options.userId
			app.getUserProfile()
			app.getCertfication()
			// 注册全局事件订阅: 是否刷新订单列表
			// uni.$on('syncRefreshOrder', canReset => {
			// 	app.canReset = canReset
			// })
			// 我自己
			const userId = uni.getStorageSync('userId')
			if (options.userId == userId) {
				app.myself = true
				this.onTabs({index: 1})
			}
			if (loginUserId > 0 && loginUserId != 1101) {
				app.isLogin = true
			}
		},
		onShow() {
			this.canReset && this.onRefreshList()
			this.canReset = false
			// this.userId = uni.getStorageSync('userId')

		},
		onUnload() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.emit('reload', {
				follow: this.form.follow
			});
		},
		onPullDownRefresh() {
			this.list = []
			this.onRefreshList()
			uni.stopPullDownRefresh();
		},
		onReady() {},
		methods: {
			...mapMutations(['ADD_FRIEND']),
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			// upCallback(page) {
			// 	const app = this
			// 	app.getArticleList(app.page++)
			// 		.then(list => {
			// 			const curPageLen = list.data.length
			// 			const totalSize = list.data.total
			// 			app.mescroll.endBySize(curPageLen, totalSize)
			// 		})
			// 		.catch(() => app.mescroll.endErr())
			// },

			// 刷新订单列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				app.where.userId = app.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)
						})
				})
			},
			getUserProfile() {
				const app = this
				UserProfileApi.getUserDetail(app.userId).then(res => {
					app.form = res.data
					const userInfo = res.data.userInfo
					app.userInfo = userInfo
					app.interest = JSON.parse(app.form.interest)
					// 处理相册
					const imgs = JSON.parse(app.form.images)
					if (imgs) {
						var files = []
						imgs.map(pic => {
							// thumb: Util.thumbnail(pic.url),
							files.push({
								thumb: pic.url,
								url: pic.url
							})
						})
					}
					app.fileList1 = files

				}).catch(err => {
					app.$success(err)
				})
			},

			getArticleList() {
				const app = this
				app.where.page = app.page
				app.where.userId = app.userId
				app.where.showFollow = true
				return new Promise((resolve, reject) => {
					ArticleApi.pageArticle(app.where, {
							load: false
						})
						.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 (d.accept == 'video') {
											files = pic.url
										} else {
											files.push({
												thumb: pic.url,
												url: pic.url
											})
										}
									})
								}
								d.files = files
								return d
							})
							// 合并新数据
							app.list.data = app.list.data.concat(newList)
							resolve(newList)
						})
				})
			},
			onTabs(e) {
				this.curTab = e.index
				this.list = []
				this.onRefreshList()
			},
			getSexName(sex) {
				if (sex == '1') {
					return '男'
				}
				if (sex == '2') {
					return '女'
				}
				return '保密'
			},
			addFocus(shopId) {
				const app = this
				if (!app.isLogin) {
					app.$push('pages/login/index')
					return false
				}
				this.form.follow = !this.form.follow
				RedisUtilApi.addFocus({
					shopId
				}).then(res => {
					app.$success(res.message)
				})
			},
			onChat(userInfo) {
				if (!this.isLogin) {
					this.$push('pages/login/index')
					return false
				}
				if(this.$store.getters.userInfo.certification != 1){
					this.showIdCardModal = true
					return false
				}
				this.ADD_FRIEND(userInfo)
				this.$push('/pages/chat/chat?friendId=' + userInfo.userId)
				// uni.navigateTo({
				// 	url: '/pages/chat/chat?friendId=' + item.userInfo.userId
				// })

			},
			onDelete(articleId) {
				ArticleApi.removeArticle(articleId).then(res => {
					this.list = []
					this.onRefreshList()
					this.$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 => {
					console.log("res.....: ", res);
					app.list[index].liked = res.data.liked
					app.list[index].likes = res.data.likes
					uni.$emit("ArticleChange", app.list[index])
				}).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
				ArticleCommentApi.addArticleComment({
					articleId,
					countComment,
					content,
					toUserId,
					replyCommentId,
					replyUserId
				}).then(res => {
					app.form.content = ''
					app.getComment(form.articleId)
					app.list[app.articleIndex].commentNumbers = res.data.commentNumbers
					uni.$emit("ArticleChange", app.list[app.articleIndex])
					// app.$success(res.message)
				}).catch(err => {
					app.$error(err.message)
				})
			},
			getProvince(text) {
				if (text == '广西壮族自治区') {
					return '广西'
				}
				return text;
			},
			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)
				// })
			},
			openAvatarBig(pic) {
				const img = Util.original(pic)
				// 预览图片
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getCity(text) {
				return text.replace('市', '')
			},
			getCertfication() {
				const app = this
				const {
					userId
				} = this
				CertificateApi.listCertificate({
					userId
				}).then(res => {
					res.data.map(d => {
						if (d.certificateType == 'idCard' && d.status == 30) {
							app.certification[0].submitText = '已认证'
							app.certification[0].isEdit = true
						}
						if (d.certificateType == 'house' && d.status == 30) {
							app.certification[1].submitText = '已认证'
							app.certification[1].isEdit = true
						}
						if (d.certificateType == 'education' && d.status == 30) {
							app.certification[2].submitText = '已认证'
							app.certification[2].isEdit = true
						}
						if (d.certificateType == 'car' && d.status == 30) {
							app.certification[3].submitText = '已认证'
							app.certification[3].isEdit = true
						}
					})
				})
			},
			doAuth(){
				uni.navigateTo({
					url: '/sub_pages/certification/id-card/id-card',
					events: {
						reload: () => {
							this.showIdCardModal = false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pair {
		.bg {
			width: 750rpx;
			position: fixed;
			top: 0;
			z-index: 0;
			background-color: #0d0119;
		}

		/* 背景叠加 */
		.bg-color {
			position: fixed;
			top: 0;
			z-index: 10;
			width: 750rpx;
			height: 500rpx;
			background-color: #0d0119;
			opacity: .3;
			filter: Alpha(opacity=30);
		}

		.header {
			width: 750rpx;
			position: absolute;
			top: 0;
			z-index: 888;
			display: flex;
			flex-direction: column;
			padding-top: 88rpx;

			.user {
				width: 680rpx;
				margin: 20rpx auto;
				display: flex;

				.avatar {
					border: 6rpx solid #ffffff;
					border-radius: 100%;
					background-color: #ffffff;
				}

				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #ffffff;
					margin-left: 20rpx;
					font-size: 26rpx;

					.nickname {
						font-size: 43rpx;
						font-weight: 700;
					}
					.focus {
						display: flex;
						// padding: 4rpx 20rpx;
						width: 200rpx;
						text-align: center;
						color: #ffffff;
						font-size: 26rpx;
						border-radius: 50rpx;
						margin-right: 10rpx;
						// background: linear-gradient(#47076b, #8d1a50);
					
					}
				}
			}

			.tools {
				width: 680rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: row;
					color: #999999;
					font-size: 24rpx;
					justify-content: space-between;

					.focus {
						font-size: 24rpx;
						margin-right: 20rpx;
						display: flex;
						align-items: center;
					}

					.fans {
						margin-right: 20rpx;
						display: flex;
						align-items: center;
					}

					.like {
						display: flex;
						align-items: center;
					}
				}

				.right {

					display: flex;
					flex-direction: row;

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

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

					.unfocus {
						display: flex;
						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;
						}
					}

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

						image {
							width: 24rpx;
							height: 66rpx;
						}
					}

				}
			}
		}

		.main {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			width: 750rpx;
			margin-top: 400rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.tabs {
				width: 300rpx;
				margin: auto;
				display: flex;
				justify-content: center;
			}

			.comment {
				width: 700rpx;
				min-height: 800rpx;
				height: auto !important;
				background-color: #ffffff;
				margin: 30rpx auto;

				.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 {
							height: 90rpx;
							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;
								}
							}
						}

						.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;
								}
							}


						}

					}
				}
			}

			.info-item {
				width: 660rpx;
				margin: auto;

				.his-head {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 30rpx;
					padding: 50rpx 0 20rpx 0;
					color: #681752;

					.line {
						background-color: #681752;
						width: 8rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}

					.icon {
						float: right;
					}

				}

				.interest {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.desc {
						color: #666666;
						font-size: 24rpx;
					}

					.field {
						width: 600rpx;
						background-color: #f3f3f3;
						border-radius: 12rpx;
						padding: 20rpx;

						.text {
							margin: 10rpx 10rpx 20rpx 0;
							width: auto;
							padding: 4rpx 10rpx;
							color: #666666;
							font-size: 24rpx;
						}
					}

					.u-page__tag-item {
						margin-bottom: 10rpx;
						margin-right: 10rpx;
						display: block;
					}

				}

				.his-list {
					padding: 20rpx 0;
					overflow: hidden;

					.his-item {
						width: 33.3%;
						float: left;
						padding: 10rpx;
						box-sizing: border-box;

						.history-button {
							text-align: center;
							padding: 14rpx;
							line-height: 30rpx;
							border-radius: 100rpx;
							background: #fff;
							font-size: 26rpx;
							border: 1rpx solid #efefef;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

					}

				}
			}
		}

		.btn-wrapper {
			width: 360rpx;
			margin: 50rpx auto;
			// display: flex;
			// align-items: center;
			padding: 0 20rpx;
		}
	}

	.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;
						margin: 0 30rpx;
					}

				}

				.reply-item {
					margin: 24rpx 0;

					.reply-user {
						display: flex;
						align-items: center;
						padding: 2rpx 0;
					}
				}
			}
		}
	}

	.certification-list {
		margin: 0 auto;

		.list {
			.icon {
				padding: 10rpx;
			}
		}

		.item {
			width: 660rpx;
			height: 130rpx;
			margin: 50rpx auto;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;

			.content {
				display: flex;

				.icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.info {
					margin-left: 16rpx;
					display: flex;
					align-items: center;

					.title {
						font-size: 32rpx;
						font-weight: 700;
						padding-bottom: 5rpx;
					}

					.desc {
						font-size: 26rpx;
						color: #666666;
					}
				}
			}

			.btn {
				font-size: 28rpx;
				color: #681752;
				width: 120rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row-reverse;
			}
		}
	}
	
	.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;
		}
	}
</style>