<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="评价详情"></el-navbar>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			<view class="wrapper">
				<view class="comments">
					<view class="comments-list">
						<view class="comments-box" v-for="(comment,idx) in commentsList" :key="idx">
							<view class="top">
								<view class="avatar">
									<view class="image"><image :src="comment.avatar"></image></view>
									<view class="username">
										<view>{{ comment.username }}</view>
										<view v-if="!isEmpty(comment.spec)">{{ comment.spec }}</view>
									</view>
								</view>
								<view class="time">{{ comment.comment_time }}</view>
							</view>
							<view class="comments-content">
								{{ comment.content }}
								<view v-if="!isEmpty(comment.image)">
									<image v-for="(img,j) in comment.image" :key="j" :src="img" @click="jumpPic(comment.image,j)"></image>
								</view>
							</view>
							<view class="comments-reply" v-if="!isEmpty(comment.reply_content)">
								<view class="reply">
									<view>商家回复：</view>
									<view>{{ comment.reply_content }}</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</el-refresh>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick,ref,computed } from "vue";
	import { redirectTo } from "@/el-ui/libs/navigate";
	import { isEmpty } from "@/el-ui/libs/check";
	
	const navTop 	 = ref(0);
	const refreshRef = ref();
	const options 	 = ref({});
	onLoad((option)=>{
		options.value = option;
		nextTick(()=>{
			init();
		})
	})
	
	const commentsList = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value);
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
	
			setTimeout(() => {
				uni.$http.get("goods.comments/index",{ goods_id: options.value.id, type: options.value.type }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) commentsList.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						commentsList.value = commentsList.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) commentsList.value = [];
						refreshRef.value.emptyPage();  
					}
				});
				
			}, 100)
		}
	}
	
</script>

<style lang="scss">
	.wrapper {
		padding: 20rpx;
		.comments {
			font-size: 28rpx;
			.comments-list {
				min-height: 200rpx;
				.empty {
					text-align: center;
					line-height: 200rpx;
				}
				.comments-box {
					border-bottom: 1px solid #ddd;
					background-color: #fff;
					padding: 20rpx 30rpx;
					border-radius: 15rpx;
					margin-bottom: 20rpx;
					&:last-child{
						border-bottom: 0;
					}
					.top {
						color: #666;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;
						.avatar {
							display: flex;
							justify-content: center;
							align-items: center;
							.image {
								display: inline-block;
								image {
									width: 90rpx;
									height: 90rpx;
									border-radius: 50%;
									overflow: hidden;
								}
							}
							.username {
								margin-left: 10rpx;
								view {
									&:nth-child(1){
										font-size: 28rpx;
									}
									&:nth-child(2){
										color: #888;
										font-size: 22rpx;
									}
								}
							}
						}
						.time {
							
						}
					}
					.comments-content {
						padding:10rpx 0;
						view {
							padding: 10rpx 0;
							image {
								width: 100rpx;
								height: 100rpx;
								margin-right: 15rpx;
								&:last-child {
									margin-right: 0;
								}
							}
						}
					}
					.comments-reply {
						background-color: #eee;
						border-radius: 8rpx;
						margin-bottom: 15rpx;
						.reply {
							padding: 20rpx;
							view {
								padding: 3rpx 0;
							}
						}
					}
				}
			}
		}
	}
</style>