<template>
	<view class="bg">
		<view class="list" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="" style="display: flex;justify-content: center;align-items: center;">
						<image class="toux" :src="showImg(item.user.avatar)" mode="aspectFill"></image>
						<view class="name-item">{{item.user.username ? item.user.username : '匿名用户'}}</view>
					</view>
					<view class="date">
						{{item.create_time.substring(0,10)}}
					</view>
				</view>
				<view style="display: flex;margin: 22rpx 0 34rpx 0;align-items: center;">
					<uni-rate readonly=true :value='item.rate' margin="0" size="20" :is-fill="false" active-color="red"/>
					<view style="margin: 0 20rpx;color: #999999">|</view>
					<view class="goods-title text-overflow">
						{{item.goods_name}}
					</view>
				</view>
				<view class="content">
					<view  style="width: 690rpx;" :class="item.close?'':'text'" :id="`content${index}`">
						{{item.content}}
					</view>
					<view class="" v-if="item.needShowExpande">
						<view class="close" v-if="item.close" @click="changeStatus(item,index)">
							收起<image style="width: 20rpx;height: 20rpx;margin-left: 12.67rpx;" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230803/a18caeb522f500bd2bc90c184c45dfed.png" mode=""></image>
						</view>
						<view class="open" v-else @click="changeStatus(item,index)">
							展开<image style="width: 20rpx;height: 20rpx;margin-left: 12.67rpx;" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230803/74cb60c6bf367e4bc6450daacf4f2c95.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="img-list" v-if="item.image_list.length>0">
					<image :src="showImg(img)" mode="aspectFill" v-for="(img,imgIndex) in item.image_list"
					@click="reImg(item.image_list,imgIndex)" :key="imgIndex"></image>
					<!-- <image :src="showImg(img)" mode="" v-for="(img,imgIndex) in item.images.split(',')"
						@click="reImg(item,imgIndex)"></image> -->
				</view>
			</view>
		</view>
		
		<view class="no-data" v-else>
			<image :src="showImg('https://testtaihu.https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20221226/458a1739cb553882abf32672148ddc3c.png')" mode="aspectFill"></image>
			<view class="">
				暂无评论~
			</view>
		</view>
	</view>
</template>

<script>
	import Base from "@/components/Base";
	export default {
		name: "commentList",
		extends: Base,
		data() {
			return {
				id: null,
				list: [],
				finished: false,
				details: '',
				close:false,
				scenicId:0,
				goodsId:0,
				needShowExpande: false,
			};
		},
		onLoad(options) {
			console.log('options',options);
			if (options.scenicId) {
				this.scenicId = options.scenicId
				console.log(this.scenicId);
			}
			if (options.goodsId) {
				this.goodsId = options.goodsId
				console.log(this.goodsId);
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			changeStatus(item,index) {
				item.close = !item.close
				this.$forceUpdate()
			},
			getInfo() {
				this.Post({
					scenic_id: this.scenicId,
					goods_id: this.goodsId,
					offset: this.list.length,
					limit: 10
				}, '/api/scenic/getGoodsCommentByScenicId').then(res => {
					if (res) {
						this.list = [...this.list, ...res.data]
						this.list.forEach(item => {
							item.close = false
							item.needShowExpande = false
						})
						console.log('添加close的list',this.list);
						if (res.data.length < 10) {
							this.finished = true
						}
					}
					
					this.$nextTick(() => {
						   let query=uni.createSelectorQuery(); 
							let lineHeight = 19 
							
							this.list.forEach((item,index) => {
								query.select(`#content${index}`).boundingClientRect(res => {
									console.log(res)
									console.log(index);
									if (res.height < lineHeight * 3) {
										item.close = false
										item.needShowExpande = false
										console.log(item)
										
									} else {
										item.close = false
										item.needShowExpande = true
										console.log(item)
									}
									this.$forceUpdate()
								}).exec(() => {
									
								}) 
								
							})
					})
					
					
				})
			},
			reImg(item, imgIndex) {
				console.log(item);
				let imgArr = item
				console.log('imgArr',imgArr);
				imgArr.forEach((item,index,arr)=>{
					if (!item.includes('https://yjdtadmin.sz-trip.com')) {
						arr[index] = this.NEWAPIURL+arr[index]
					}
				})
				uni.previewImage({
					current: imgIndex,
					urls: imgArr,
				});
			}
			// reImg(item, imgIndex) {
			// 	console.log(123123);
			// 	let imgArr = item.images.split(',')
			// 	imgArr.forEach((item,index,arr)=>{
			// 			arr[index] = this.NEWAPIURL+arr[index]
			// 	})
			// 	console.log(imgArr);
			// 	uni.previewImage({
			// 		urls:imgArr,
			// 		longPressActions: {
			// 			itemList:['111'],
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			// }
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getInfo()
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.bg {
		min-height: 100vh;
		background: #FFFFFF;
		padding: 19rpx 27rpx 33rpx 27rpx;
		overflow-x: hidden;
	}

	.list {
		.item {
			width: 100%;
			border-bottom: solid 1rpx rgba(217, 217, 217, 1);
			padding-bottom: 28.67rpx;
			margin-bottom: 38rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.toux {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					flex-shrink: 0;
					margin-right: 14.67rpx;
				}
				
				.name-item {
					font-size: 31rpx;
					font-weight: bold;
					color: #666;
				}
				
				.date {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				// .left {
				// 	width: 100%;
				// 	margin-left: 15rpx;

				// 	.name {
				// 		display: flex;
				// 		align-items: center;
				// 		width: 100%;
				// 		justify-content: space-between;

				// 		.name-item {
				// 			font-size: 27rpx;
				// 			font-family: PingFang SC;
				// 			font-weight: 400;
				// 			color: #333333;
				// 		}
				// 	}

				// 	.date {

				// 		font-size: 24rpx;
				// 		font-family: PingFang SC;
				// 		font-weight: 400;
				// 		color: #999999;
				// 		margin-top: 17rpx;
				// 	}
				// }
			}

			.content {
				// margin-top: 20rpx;
				// margin-left: 73rpx;
				width: 690rpx;
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				// line-height: 50rpx;
				
			}

			.img-list {
				margin-top: 8rpx;
				flex-wrap: wrap;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				// margin-left: 73rpx;
				width: 100%;

				image {
					width: 219rpx;
					height: 219rpx;
					// margin-right: 26rpx;
					margin-top: 20rpx;
					border-radius: 13rpx;
				}
			}

		}
	}
	
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 800rpx;
		flex-direction: column;
	
		image {
			width: 482rpx;
			height: 273rpx;
		}
	
		view {
			font-size: 29rpx;
			font-weight: 500;
			color: #8599B5;
			margin-top: 42rpx;
		}
	
	}
	
	.text {
		max-height: 145rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; 
	}
	
	// .close-text {
	// 	max-height: 145rpx;
	// 	word-break: break-all;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	display: -webkit-box; 
	// 	-webkit-box-orient: vertical;
	// 	-webkit-line-clamp: 3; 
	// }
	
	.goods-title {
		font-size: 31rpx;
		font-weight: 500;
		color: #999999;
	}
	
	.open, .close {
		font-size: 24rpx;
		font-weight: bold;
		color: #08C59B;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	
	.img-list image:nth-child(3n-1) {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	
</style>
