<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap" v-for="item in reviewsList" :key="item.id" @click="goToDetail(item)">
			<view class="ue-user u-f u-f-jcfs u-f-aic mg-top-16">
				<image class="avatar mg-right-10" :src="item.avatarUrl"></image>
				<view class="user-desc">
					<view class="fs26 fw400 light-black mg-bot-8">{{item.nickName}}</view>
					<view class="u-f u-f-aic">
						<view style="color: #999999;font-size: 24rpx;margin-right: 10rpx;">
							{{item.createTime}}
						</view>
						<image style="width: 30rpx;height: 30rpx;" src="/static/common/star.png" v-for="i in 5" :key="i"
							mode="">
						</image>
						<view style="color: #F2CB51;font-size: 24rpx;">
							{{item.score}}.0分
						</view>
					</view>
				</view>
			</view>
			<view class="ue-content mg-top-24">
				<view>
					<view class="light-black ellipsis mg-bot-10 fs24 fw400">{{item.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 item.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 {
				reviewPageNum: 1,
				reviewPageSize: 10,
				storeId: 0,
				goodsId: 0,
				reviewsList: []
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
			if (option.goodsId) {
				this.goodsId = option.goodsId
			}
			this.getReviewsList()
		},
		methods: {
			async getReviewsList() {
				let data = {
					"pageNum": this.reviewPageNum,
					"pageSize": this.reviewPageSize,
					"storeId": this.storeId
				}

				if (this.goodsId !== 0) {
					data = Object.assign(data, {
						'goodsId': this.goodsId
					})
				}

				let res = await this.$http.post('/api/client/store/reviewsList', data)
				let reviewsList = res.data.data.rows
				this.reviewsList = reviewsList || []
			},
			goToDetail(item) {
				let {
					id,
					userId,
					nickName,
					avatarUrl,
					score,
					commentContent,
					commentImageList,
					createTime
				} = item
				let str = 'id=' + id + '&userId=' + userId + '&nickName=' + nickName + '&avatarUrl=' + avatarUrl +
					'&score=' + score + '&commentContent=' + commentContent + '&commentImageList=' + JSON.stringify(
						commentImageList) + '&createTime=' + createTime
				// uni.navigateTo({
				// 	url: '/pages/evaluation-detail/evaluation-detail?' + str
				// })
			}
		}
	}
</script>

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

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

		.user-desc {
			.evaluate-wrap {
				height: 32rpx;
				align-items: center;

				.evaluate {
					height: 32rpx;
					align-items: center;

					.star-icon {
						width: 32rpx;
						height: 32rpx;
					}

					.star-num {
						color: #F2CB51;
					}
				}
			}
		}
	}

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

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