<template>
	<view class="comment-item-components">
		<view class="comment-type-tab">
			<view class="item" :class="{'active':activeIndex==0}" @click="handleChange(0)">评论列表</view>
			<view class="item" v-if="form.isSelf==1" :class="{'active':activeIndex==1}" @click="handleChange(1)">管理全部评论
			</view>
		</view>
		<view class="empty-box" v-if="commentList.length == 0">
			<image src="/static/images/empty.png" class="icon"></image>
			<view class="text">期待您的经常评论~</view>
		</view>
		<view class="comment-display-box" v-else>
			<view class="comment-item" v-for="(item,index) in commentList">
				<view class="user-info">
					<view class="username">{{item.nickName}}：</view>
					<view class="datetime">{{item.createTime}}</view>
				</view>
				<view class="content">
					<view class="text" v-if="!item.replyNikeName">{{item.content}}</view>
					<view class="text" v-else @click.stop="handleReplayComment(item)">
						回复<span style="color: #0058B6;">{{item.replyNikeName}}：</span>{{item.content}}
					</view>
					<view class="operation-text">
						<view class="add-text" v-if="form.isSelf==1&&activeIndex==1 &&item.isFeatured==0"
							@click="handleFeatured(item)">加入精选</view>
						<view v-if="form.isSelf==1&&activeIndex==1 &&item.isFeatured==1" @click="handleFeatured(item)">
							取消精选</view>
						<view v-if="form.isSelf==1&&activeIndex==1" @click="handleDelete(item)">删除</view>
					</view>
				</view>
			</view>
			<view class="show-more-box" v-if="commentList.length < total" @click="loadMore">
				加载更多
				<image src="/static/images/down.png" class="icon"></image>
			</view>
		</view>

		<!-- 打开评论 -->
		<publish-comment :form="form" ref="publishCommentRef" @refresh="handleRefresh"></publish-comment>
	</view>
</template>

<script>
	import PublishComment from './PublishComment.vue';
	import {
		commentFeatured,
		delComment,
		dynamicDetailComments
	} from '@/api/api.js'
	export default {
		name: "Comment-Item",
		data() {
			return {
				commentList: [],
				activeIndex: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					momentId: ''
				},
				total:0
			};
		},
		components: {
			PublishComment
		},
		props: {
			form: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		watch: {
			form(newVal, oldVal){
				console.log(newVal, oldVal)
				if(newVal.id){
					this.queryParams.momentId = newVal.id;
					this.getCommentList()
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			handleChange(index) {
				this.activeIndex = index
			},
			handleRefresh() {
				this.queryParams.pageNum = 1;
				this.getCommentList()
			},
			getCommentList() {
				dynamicDetailComments(this.queryParams).then(res => {
					this.commentList = [...this.commentList,...res.rows]
					this.total = res.total
				})
			},
			loadMore(){
				this.queryParams.pageNum += 1;
				this.getCommentList()
			},
			// 回复评论
			handleReplayComment(item) {
				this.$refs.publishCommentRef.openModal(item)
			},
			// 加入精选，取消精选
			handleFeatured(item) {
				let _this = this;
				let text = item.isFeatured == 1 ? '取消精选' : '加入精选'
				let data = {
					momentId: this.form.id,
					commentId: item.id,
					featuredStatus: item.isFeatured == 1 ? 0 : 1
				}
				uni.showModal({
					title: '提示',
					content: `是否将评论：${item.content}${text}`,
					success: function(res) {
						if (res.confirm) {
							commentFeatured(data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: `${text}成功`
									})
									_this.getCommentList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleDelete(item) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: `是否确认删除评论：${item.content}？`,
					success: function(res) {
						if (res.confirm) {
							delComment(item.id).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: `删除成功`
									})
									_this.getCommentList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment-item-components {
		background-color: white;
		min-height: 392rpx;
		padding: 34rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.comment-type-tab {
			display: flex;
			height: 62rpx;
			font-size: 28rpx;

			.item {
				height: 100%;
				border-bottom: 4rpx solid transparent;
				color: #C3C8CE;
				line-height: 62rpx;
				margin-right: 40rpx;
			}

			.active {
				border-bottom: 4rpx solid #007BFF;
				color: rgba(16, 16, 16, 1);
			}
		}

		.empty-box {
			height: 280rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.icon {
				width: 160rpx;
				height: 160rpx;
			}

			.text {
				color: rgba(195, 200, 206, 1);
				font-size: 28rpx;
			}
		}

		.comment-display-box {
			background-color: rgba(245, 245, 247, 1);
			min-height: 80rpx;
			margin-top: 32rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.comment-item {
				.user-info {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;

					.username {
						width: calc(100% - 300rpx);
						color: black;
						color: #0058B6;
					}

					.datetime {
						width: 290rpx;
						text-align: right;
						color: #999999;
					}
				}

				.content {
					color: black;
					margin: 10rpx 0;
					display: flex;

					.text {
						width: calc(100% - 180rpx);
					}

					.operation-text {
						width: 180rpx;
						text-align: right;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.add-text {
						color: #0058B6;
					}
				}
			}
		}
	}

    .show-more-box{
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #BBBBBB;
		font-size: 24rpx;
		.icon{
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>