<template>
	<view>
		<view class="cu-card dynamic no-card solid-bottom padding-bottom-sm " v-for="(reviewer, index) in reviewers" :key="item.id">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar no-border">
					<view class="cu-item">
						<view class="cu-avatar round" :style="'background-image:url(' + reviewer.avatarUrl + ');'">
						</view>
						<view class="content flex-sub">
							<view>{{reviewer.name}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{reviewer.reviewTime}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					{{reviewer.comments}}
				</view>
				<view class="grid flex-sub padding-lr col-3 grid-square" v-if="reviewer.picList">
					<view class="bg-img" :style="'background-image:url(' + item.url + ');'"
						v-for="(item, index) in reviewer.picList" :key="index" v-if="index < 3" :data-url="item.url" :data-imgs="reviewer.picList" @click="viewImage($event)">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comments-card",
		props: {
			reviewers: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				isCard: true
			}
		},
		methods: {
			viewImage(e) {
				let imgList = e.currentTarget.dataset.imgs;
				let curUrl = e.currentTarget.dataset.url;
				let picList = [];
				for(let i = 0; i < imgList.length; i++) {
					picList.push(imgList[i].url);
				}
				uni.previewImage({
					urls: picList,
					current: curUrl
				});
			}
		}
	}
</script>

<style scoped>
	.cu-list.menu-avatar.no-border>.cu-item:after {
	    border: none;
	}
</style>
