<template>
	<view class="comment-item">
		<view class="user">
			<u-avatar :src="content.member_avatar" class="avatar" size="60"></u-avatar>
			<text class="name">{{ content.member_nickname }}</text>
			<u-rate v-if="reply" :disabled='true' :count="count" v-model="rate" size="23" active-color="#FF780F" inactive-color="#F0EDF1" gutter="10"></u-rate>
		</view>
		<view class="content">
			<view class="text">{{ content.geval_content }}</view>
		</view>
		<view class="image-container">
			<image :src="src" v-for="(src, index) in content.geval_image" :key="index"></image>
		</view>
		<view class="reply" v-if="reply && content.geval_explain">
			<view class="title">掌柜回复：</view>
			<view class="content u-line-4">{{ content.geval_explain }}</view>
		</view>
		<view class="time" v-if="reply">
			<image src="/static/image/common/20.png"></image>
			<view class="value">{{ content.geval_addtime }}</view>
		</view>
	</view>
</template>
<script>
/*
* @description 显示评价
* @property {Boolean} reply 是否显示回复/时间/评分
**/
export default {
	data() {
		return {
			count: 5,
			rate: 0,
		}
	},
	props: {
		content: Object,
		reply: Boolean,
	},
	created() {
		if(this.content.hasOwnProperty('scores_two')) this.rate = this.content.scores_two;
	}
};
</script>
<style lang="scss" scoped>
.comment-item {
	background-color: #ffffff;
	.user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.name {
			margin: 0 20rpx;
			font-size: 26rpx;
			color: rgba(153,153,153,1);
		}
	}
	.content {
		margin-bottom: 20rpx;
		.text {
			font-size: 26rpx;
			color: rgba(51,51,51,1);
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}
		> image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 10px;
			&:not(:nth-child(3n)) {
				margin-right: 30rpx;
			}
		}
	}
	.image-container {
		margin: 20rpx 0;
		> image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			&:not(:nth-child(3n)) {
				margin-right: 30rpx;
			}
		}
	}
	.reply {
		padding: 30rpx;
		background: rgba(240,238,238,1);
		border-radius: 10rpx;
		font-size: 24rpx;
		color: rgba(102,102,102,1);
		margin-bottom: 20rpx;
		.title {
			margin-bottom: 16rpx;
		}
		.content {
			line-height: 36rpx;
		}
	}
	.time {
		display: flex;
		align-items: center;
		> image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}
		.value {
			font-size: 24rpx;
			color: rgba(153,153,153,1);
		}
	}
}
</style>