<template>
	<view class="container">
		<view class="page-bg"></view>
		<view class="release" @click="navTo('sub_pages/love/release/release')">
			<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="navTo('pages/search/index')">
					<image src="../../static/icon/screen.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu">
				<u-tabs
				:list="menu"
				lineColor="#AD1384"
				: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 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 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.video" class="video">
							<video id="myVideo" :src="item.video" @error="videoErrorCallback"></video>
						</view>
						<view v-else class="image">
							<u-album :urls="item.files" keyName="thumb" multipleMode="widthFix"></u-album>
						</view>
						<view class="comment-btn">
							<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>
				<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>

		<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="300" @scrolltolower="scrolltolower">
						<view class="list">
							<u-list-item v-for="(item, index) in comment" :key="index">
								<u-cell>
									<view slot="title" class="nickname">
										{{ item.nickname }}
									</view>
									<view slot="icon" :iconStyle="iconStyle" class="avatar2">
										<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 slot="label">
										<rich-text class="content" :nodes="item.content"></rich-text>
										<view class="fans">{{ new Date(item.createTime).getTime() | timeFrom }}</view>
									</view>
									<view slot="right-icon">

									</view>
								</u-cell>
							</u-list-item>
							<u-empty
									v-if="comment.length == 0"
									mode="message"
									icon="http://cdn.uviewui.com/uview/empty/message.png"
							>
							</u-empty>
						</view>
					</u-list>
				</view>
				<view class="footer">
					<u-search :showAction="true" placeholder="发表评论" searchIcon="chat" actionText="发表" v-model="form.content" :actionStyle="actionStyle" @custom="onSend()"></u-search>
					<!-- <view class="btn-wrapper">
						<u-button text="发送" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
							shape="circle" @click="$push('pages/checkout/checkout')"></u-button>
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	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 Config from '@/config.js';

	const pageSize = 10
	const userId = uni.getStorageSync('userId')

	const menu = [{
			name: '最新'
		},
		{
			name: '同城'
		},
		{
			name: '关注'
		}
	]

	import mixin from '@/core/mixins/tabbar'
	export default {
		mixins: [mixin],
		data() {
			return {
				options: null,
				list: [],	// 文章列表
				comment: [], 	// 文章评论列表
				menu,
				curTab: 0,
				danmuList: [{
						text: '好可爱嗷~~',
						color: '#ff0000',
						time: 1
					},
					{
						text: 'かわゆい',
						color: '#ff00ff',
						time: 3
					}
				],
				actionStyle: {
					background: '#8b004c',
					color: '#ffffff',
					padding: '12rpx 16rpx',
					borderRadius: '50rpx'
				},
				iconStyle: {
					background: '#8b004c',
				},
				statusBarHeight: 25,
				latitude: 22.766777,
				longitude: 108.375152,
				scale: 10,
				page: 0,
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				showComment: false,
				countComment: 0,
				where: {
					platform: 'MP-WEIXIN'
				},
				form: {
					articleId: 0,
					content: '',
				},
				articleIndex: 0, // 当前评论的文章
				isLogin: false,
				loading: 'loading'
			}
		},
		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
					}
				}
			})
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			const pages = getCurrentPages()
			console.log("this.options: ",this.options);
		},
		// 触底函数
		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 index = e.index
				this.curTab = index
				console.log("index: ",index);
			},
			// 刷新订单列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				app.where.loginUserId = userId
				app.where.categoryId = 0
				app.where.showFollow = true
				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 => {
										files.push({
											thumb: pic.thumb ? pic.thumb : pic.url,
											url: pic.url
										})
									})
								}
								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
				}
			},
			// 获取用户坐标
			// 参考文档：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) {
				if(!store.getters.userId || store.getters.userId == 1101) {
					this.$navTo('pages/login/index')
					return false
				}
				this.$navTo(url)
			},
			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){
				if(!this.isLogin){
					this.$push('pages/login/index')
					return false
				}
				uni.hideTabBar()
				this.comment = []
				this.getComment(item.articleId)
				this.form.articleId = item.articleId
				this.articleIndex = index
				this.showComment = true
			},
			closeComment(){
				uni.showTabBar()
				this.showComment = false
			},
			getComment(articleId){
				const app = this
				ArticleCommentApi.pageArticleComment({articleId}).then(res => {
					app.countComment = res.data.count
					app.comment = res.data.list
				})
			},
			// 发表评论
			onSend(){
				const app = this
				const { form } = this
				form.countComment = app.countComment
				ArticleCommentApi.addArticleComment(form).then(res => {
					app.form.content = ''
					app.getComment(form.articleId)
					app.list[app.articleIndex].commentNumbers = res.data.commentNumbers
					// app.$success(res.message)
				}).catch(err => {
					app.$error(err.message)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ffffff !important;
	}
	.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;
				}
			}

			// .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 {
		width: 750rpx;
		margin: 0 auto;
		.comment {
			width: 700rpx;
			padding: 30rpx;
			background-color: #ffffff;
		
			.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 {
								font-size: 30rpx;
								font-weight: 700;
							}
		
							.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: flex-end;
		
						.zan {
							display: flex;
		
							image {
								width: 36rpx;
								height: 36rpx;
								margin-right: 10rpx;
							}
						}
		
						.comment2 {
							margin-left: 50rpx;
							display: flex;
		
							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;
		height: 780rpx;
		.head{
			padding: 30rpx;
			text-align: center;
		}
		.user-list{
			.list{
				display: flex;
				flex-direction: column;
			}
			.nickname{
				color: #999999;
			}
			.avatar2{
				display: flex;
				height: auto;
			}
			.content{
				padding: 20rpx 0;
			}
		}
		.footer {
			width: 700rpx;
			margin: auto;
			position: fixed;
			left: 25rpx;
			bottom: 10rpx;
			padding: 20rpx 0;
		}
		.fans{
			font-size: 26rpx;
			color: #999999;
		}
	}
</style>
