<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap">
			<view class="ue-user u-f u-f-jcfs u-f-aic mg-top-16">
				<image class="avatar mg-right-10" :src="reviewsInfo.avatarUrl"></image>
				<view class="user-desc">
					<view class="fs26 fw400 light-black mg-bot-8">{{reviewsInfo.nickName}}</view>
					<view class="u-f u-f-aic">
						<view style="color: #999999;font-size: 24rpx;margin-right: 10rpx;">
							{{reviewsInfo.createTime}}
						</view>
						<image style="width: 30rpx;height: 30rpx;" src="/static/common/star.png"
							v-for="i in reviewsInfo.score" :key="i" mode="">
						</image>
						<view style="color: #F2CB51;font-size: 24rpx;">
							{{reviewsInfo.score}}.0分
						</view>
					</view>
				</view>
			</view>
			<view class="ue-content mg-top-24">
				<view>
					<view class="light-black ellipsis mg-bot-10 fs24 fw400">{{reviewsInfo.commentContent}}</view>
				</view>
				<view class="image-list u-f u-f-jcfs u-f-fww mg-bot-14">
					<view class="image-item mg-right-12" v-for="(innerItem, idx) in reviewsInfo.commentImageList"
						:key="idx">
						<image :mode="'widthFix'" style="width: 100%;height: 100%;border-radius: 8rpx;"
							:src="innerItem"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reviewsInfo: {
					nickName: '',
					avatarUrl: '',
					score: '',
					commentContent: '',
					commentImageList: [],
					createTime: ''
				}
			}
		},
		onLoad(option) {
			this.init(option)
		},
		methods: {
			init(option) {
				this.reviewsInfo.nickName = option.nickName
				this.reviewsInfo.avatarUrl = option.avatarUrl
				this.reviewsInfo.score = option.score
				this.reviewsInfo.commentContent = option.commentContent
				this.reviewsInfo.commentImageList = JSON.parse(option.commentImageList) || []
				this.reviewsInfo.createTime = option.createTime
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.ue-user {
		.avatar {
			width: 78rpx;
			height: 78rpx;
		}
	}

	.ue-content {
		.image-list {
			.image-item {
				width: calc(25% - 12rpx);

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>