<template>
    <view class="list">
    	<view v-for="(item, index) in 5" :key="index" class="item">
    		<view class="user-info-box">
				<view class="left">
					<image src="@/static/logo.png"></image>
					<view style="display: flex;flex-direction: column;">
						<text>秦**黄</text>
						<text class="fs-24 mt-20" style="color: #999999;">2023-04-02 12：12</text>
					</view>
				</view>
    			<view class="rate-box">
    				<u-rate :count="5" :readonly="true" size="25" activeColor="#F29600"></u-rate>
    			</view>
    		</view>
			<view class="comment-imgs">
				<image v-for="(img, imgIndex) in 3" :key="imgIndex" @click="onPreviewImage(item.images, imgIndex)"
					src="@/static/logo.png"></image>
			</view>
    		<view class="comment-content">
    			<text>速度快，好评！！！谷歌翻译新增了5种语音的翻译，它们分别是基尼亚卢旺达语（卢旺达）、奥里亚语。</text>
    		</view>
    	</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			score: '',
			goodsId: '',
			commentList: [],
			currentPage: 1,
			isEmpty: false,
        };
    },
    onLoad(options) {
		this.goodsId = options.goodsId
		this.score = options.score
		// this.getCommentList()
    },
    methods: {
		// 获取评价列表
		getCommentList() {
			const params = {
				url: '/api/order/comment_list',
				data: {
					page: this.currentPage,
					goods_id: this.goodsId
				}
			}
			this.$request(params).then(res => {
				// console.log(res)
				this.commentList = this.commentList.concat(res.data.data)
				if (this.commentList.length >= res.data.total) {
					this.isEmpty = true
				}
			}).catch(err => {
		
			})
		},
		scrolltolower(e) {
			if (!this.isEmpty) {
				this.currentPage += 1
				this.getCommentList()
			}
		},
		onPreviewImage(imgList, index){
			let imgData = []
			imgList.map(item => {
				imgData.push(this.$config.domain + item)
			})
			uni.previewImage({
				current: index,
				urls: imgData
			})
		}
    },
};
</script>

<style scoped>
	
	.item:first-child {
		padding: 0 0 30rpx;
	}
	.item {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
	}
	.user-info-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-info-box .left {
		display: flex;
		align-items: center;
	}
	.user-info-box .left > image {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.rate-box {
		
	}
	.comment-content {
		margin-top: 20rpx;
	}
	.comment-imgs {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.comment-imgs > image {
		width: 32%;
		height: 180rpx;
		margin-right: 30rpx;
		border-radius: 15rpx;
	}
	
</style>
