<template>
	<view>
		<view class="comment-item">
			<image :src="item.user_portrait || item.avatar" mode="aspectFill" class="user-avatar" />
			<view class="item-content">
				<view class="item-title-box">
					<text class="user-name">{{ item.user_nick_name || item.user_name }}</text>
					<text v-if="item.is_top" class="item-top-icon">置顶</text>
					<view style="flex: 1 1 0%"></view>
					<view class="item-statistics">
						<view @click="digComment(item, 'up')">
							<uni-icons :type="item.is_up ? 'heart-filled' : 'heart'" :color="item.is_up ? '#fa3534' : '#b9bbbd'" size="16"></uni-icons>
							<text>{{ item.is_top === 1 ? '999+' : item.comment_up }}</text>
						</view>
						<view @click="digComment(item, 'down')" style="margin: 0 5px">
							<uni-icons :type="item.is_down ? 'hand-down-filled' : 'hand-down'" :color="item.comment_down ? '#909399' : '#b9bbbd'" size="18"></uni-icons>
							<text>{{ item.comment_down || 0 }}</text>
						</view>
					</view>
					<view class="item-reply" @click="reply(0, item, index)">回复</view>
				</view>
				<view style="color: #b9bbbd; font-size: 12px">{{ formatTime(item.comment_time) }}</view>
				<text class="comment-content">
					{{ item.comment_content }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Comment-bubble',
	props: {
		item: {
			type: Object,
			default: {}
		},
		index: {
			type: Number,
			default: 0
		},
		replyType: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		digComment(item, type, index) {
			this.$emit('digComment', item, type, index);
		},
		reply(type, item, index) {
			console.log(this.replyType);
			this.$emit('reply', this.replyType, item, index);
		},
		more(item, index) {
			this.$emit('more', item, index);
		}
	}
};
</script>

<style lang="scss">
.comment-item {
	padding: 10px 0;
	display: flex;
	width: 100%;
	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.item-reply {
		margin-left: 5px;
		color: #ff5b5b;
		font-size: 12px;
		border: 1px solid #ff5b5b;
		padding: 2px;
	}

	.item-expand {
		margin-left: 20px;
		margin-top: 10px;
		color: #ff5b5b;
		font-size: 12px;
	}

	.item-content {
		margin-left: 10px;
		padding-bottom: 5px;
		flex: 1 1 0%;

		.item-title-box {
			margin: 2px 0 5px;
			display: flex;
			align-items: center;
			.user-name {
				font-size: 14px;
				font-weight: 700;
				color: #fff;
			}

			.item-top-icon {
				margin-left: 8px;
				padding: 1px 4px;
				text-align: center;
				background-color: #ff5b5b;
				border-radius: 2px;
				font-size: 11px;
				color: #fff;
			}

			.item-statistics {
				font-size: 13px;
				color: #a7a8b0;
				display: flex;
				align-content: center;

				.uni-icons {
					margin-right: 4px;
				}
			}
		}

		.comment-content {
			font-size: 14px;
			color: #a7a8b0;
			line-height: 1.4;
		}
	}
}
</style>
