<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="list.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 list">
				<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.replyNickName">{{item.content}}</view>
					<view class="text" v-else @click.stop="handleReplayComment(item)">
						回复<span style="color: #0058B6;">{{item.replyNickName}}：</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>

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

<script>
	import PublishComment from './PublishComment.vue';
	import {
		commentFeatured,
		delComment
	} from '@/api/api.js'
	export default {
		name: "Comment-Item",
		data() {
			return {
				commentList: [],
				activeIndex: 0
			};
		},
		components: {
			PublishComment
		},
		props: {
			list: {
				type: Object,
				default: () => {
					return []
				}
			},
			form: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},

		methods: {
			handleChange(index) {
				this.activeIndex = index
			},
			handleRefresh() {
				console.log('222')
				this.$emit('refresh')
			},
			// 回复评论
			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.$emit('refresh')
								}
							})
						} 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.$emit('refresh')
								}
							})
						} 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;
					}
				}
			}
		}
	}
</style>
