<template>
	<div class="comment-item">
		<ImageFormat :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"></ImageFormat>
		<div class="comment">
			<div class="comment-nav">
				<div class="comment-nav-left">
					<p class="comment-user-name">{{parentComment.userName}}</p>
					<p class="comment-time">{{parentComment.createTime}}</p>
				</div>
				<WidgetFav :num="parentComment.praiseTotal"></WidgetFav>
			</div>

			<p class="comment-cont" @click="replyComment" :data-parent-id="parentComment.parentId" :data-root-id="parentComment.rootId">
				{{parentComment.content}}
			</p>
			<div class="reply-main">
				<p class="reply-item" v-for="(reply, replyIndex) in childrenComments" :key="replyIndex" v-show="isShowReply(replyIndex)">
					<span class="reply-user">
						{{reply.userName}}
					</span>
					<span v-if="reply.parentUserName">
						回复<em class="reply-to-user">@{{reply.parentUserName}}</em>
					</span>:
					<span @click="replyComment" :data-parent-id="reply.parentId" :data-root-id="reply.rootId">
						{{reply.content}}
					</span>
				</p>
				<p class="reply-more" v-if="isShowReplyMore" @click="viewMoreReply" v-html="replyMoreText"></p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CommentList',
	props: {
		parentComment: Object,
		childrenComments: Array,
		columnType: {
			type: Number,
			default: 1001
		}
	},
	data() {
		return {
			showAllReply: false,
			replyMoreText: '',
			moreText: ''
		};
	},
	computed: {
		isShowReplyMore() {
			return this.childrenComments.length > 2;
		},
		viewReplyNum() {
			return this.childrenComments.length - 2;
		}
	},
	created() {
		this.moreText = `查看${this.viewReplyNum}条回复<span class="iconfont icon-right"></span>`;
		this.replyMoreText = this.moreText;
	},
	methods: {
		isShowReply(index) {
			return index <= 1 || this.showAllReply;
		},
		viewMoreReply() {
			this.replyMoreText = this.showAllReply ? this.moreText : '收起';
			this.showAllReply = !this.showAllReply;
		},
		replyComment(e) {
			console.log(e)
		}
	}
};
</script>

<style scoped lang="scss">
.comment-item {
	display: flex;
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: 0;
	}

	.comment-user-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.comment {
		width: 600px;
		margin-left: 10px;
	}

	.comment-nav {
		padding-left: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.comment-nav-left {
		flex: 1;

		.comment-user-name {
			font-size: 28px;
			font-weight: bold;
			color: #222;
			line-height: 40px;
		}

		.comment-time {
			font-size: 20px;
			color: #B0B0B0;
			line-height: 28px;
		}
	}

	.comment-cont {
		font-size: 28px;
		color: #444;
		line-height: 40px;
		margin: 12px 0 20px;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.reply-main {
		background: #F0F0F0;
		padding: 20px;
		box-sizing: border-box;
		font-size: 24px;
		color: #444;
		line-height: 34px;

		.reply-item {
			margin-bottom: 20px;
			display: flex;

			&:last-child {
				margin-bottom: 0;
			}

			.reply-to-user {
				color: #4A90E2;
				font-style: normal;
			}

			.reply-user {
				font-weight: 500;
			}
		}

		.reply-more {
			text-align: right;
			color: #4A90E2;
			margin-top: 10px;
		}
	}
}
</style>