<template>
	<view class="">
		<view class="box">
			<view class="firstLeve flexbox leve" v-for="(item, index) in sayList" :key="index" style="flex-wrap: wrap;">
				<view class="imgbox" :style="getBackGround(item.user.avatar)">
					<view class="img">
						<!-- <image :src="item.user.avatar" mode="aspectFit" style="width: 80rpx; height: 80rpx;"></image> -->
					
					</view>
				</view>
				<view class="contentBox contentBoxfirstLeve">
					<view class="name">
						{{item.user.name == '' ? '暂无昵称': item.user.name}}
					</view>
					<view class="content" v-if="item.content != ''">
						<rich-text class="content" :nodes="formatRichText(item.content)"></rich-text>
					</view>
					<view class="imagesList flexbox" v-if="item.images !=''">
						<view class="item" v-for="(item2, index2) in item.imgList" :key="index2">
							<image @click="previewImage(item2)" :src="item2" mode="widthFix"
								style="width: 80rpx; height: 80rpx;"></image>
						</view>
		
					</view>
					<view class="others flexbox">
						<view class="dianzan flexbox" @click="support('one',index,item)">
							<u-icon v-if="item.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
							<u-icon v-else name="heart" color="#999" size="24"></u-icon>
							<text>{{item.supportCount}}</text>
						</view>
						<view class="pinglun flexbox" @click="addSay(index,item)">
							<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
							<u-icon name="chat" color="#999" size="24"></u-icon>
							<text>{{item.children && item.children.length > 0? item.children.length : 0}}</text>
						</view>
						<text>{{item.createTime}}</text>
					</view>
				</view>
				<!-- 二级 -->						
				<view class="boxB" v-if="item.Bchildren && item.Bchildren.length > 0" style="width: 100%;">
					<view class=" flexbox leve" v-for="(citem, cindex) in item.Bchildren" :key="cindex">
						<view class="imgbox" :style="getBackGround(citem.user.avatar)">
							<view class="img">
								<image :src="citem.user.avatar" mode="aspectFit"></image>
							</view>
						</view>
						<view class="contentBox">
							<view class="name">
								{{citem.user.name == '' ? '暂无昵称': citem.user.name}}
							</view>
							<view class="content" v-if="citem.content != ''">
								<rich-text class="content" :nodes="formatRichText(citem.content)"></rich-text>
							</view>
							<view class="imagesList flexbox" v-if="citem.images !=''">
								<view class="item" v-for="(item3, index3) in citem.imgList" :key="index3">
									<image @click="previewImage(item3)" :src="item3" mode="widthFix"
										style="width: 80rpx; height: 80rpx;"></image>
								</view>
				
							</view>
							<view class="others flexbox">
								<view class="dianzan flexbox" @click="support(index,cindex,citem)">
									<u-icon v-if="citem.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
									<u-icon v-else name="heart" color="#999" size="24"></u-icon>
									<text>{{citem.supportCount}}</text>
								</view>
								<!-- <view class="pinglun flexbox" @click="addSay(cindex,citem)">											
									<u-icon name="chat" color="#999" size="24"></u-icon>
									<text>{{citem.children && citem.children.length > 0? item.children.length : 0}}</text>
								</view> -->
								<text style="margin-left: 20rpx;">{{citem.createTime}}</text>
							</view>
						</view>
					</view>							
					<view class="loadMore" v-show="item.Bchildren.length < item.children.length" @click="showMoreChildren(index,item)">
						<text>加载更多追评</text>
					</view>
				</view>
				<!-- end -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['sayList'],
		name:"commentsList",
		data() {
			return {
				
			};
		},methods:{
			// 加载更多子评论
			showMoreChildren(i,val){
				console.log('更多评论');
				if(val.children.length <= val.Bchildren.length){
					uni.showToast({
						title:'没有更多了哦',
						icon:'none'
					})
					return
				}
				let _list = []
				let _cc = [...val.children]				
				_list = _cc.slice(val.Bchildren.length, val.Bchildren.length + 6)
				this.sayList[i].Bchildren = this.sayList[i].Bchildren.concat(_list)
			},
			// 点赞
			support(index1,index,val){
				console.log(index1,index,val, '点赞');
				this.$emit('support',{index1,index,val})
			},
			getBackGround(src){
				// console.log(src,'src')
				if(src == '' || src == null){
					return `background: url(./static/icon/morenAvavter.png); background-size: cover;`
				}else{
				return `background: url(${src});background-size: cover;`
				}
			},
			formatRichText(html) { //控制图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:40rpx;height:40rpx;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			previewImage(url) {
				console.log(url)
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['很抱歉，暂不支持保存图片到本地'],
						success: function(res) {
							// console.log(res,'+++++')
						}
					}
				});
			},
			addSay(index,item){
				// console.log(index,item,'添加评论')
				this.$emit('showSayModule',{index,item})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.flexbox{display: flex;}
	// ::v-deep .contentBox {
	// 	.ql-editor {
			
	// 		font-size: 26rpx;
	// 		font-style: normal;
	// 		min-height: 50rpx !important;
	// 		padding: 20rpx;
	// 	}
	
	// 	img {
	// 		width: 20px;
	// 	}
	
	// 	.u-upload__button {
	// 		margin: 0 auto;
	// 	}
	// }
	.liuyanBox {
		padding: 0 20rpx;
		margin-top: 20rpx;
		.contentBoxfirstLeve{
			width: calc(100% - 70rpx);
		}
	}
	.leve {
		margin-bottom: 20rpx;
	
		.imgbox {
			border: 1px solid #eee;
			margin-right: 10rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 100%; overflow: hidden;
		}
	
		.contentBox {
			font-size: 24rpx;
	
			.name {
				color: #999;
				@include toe();
			}
	
			.content {
				color: #333;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
	
			.others {
				margin-top: 10rpx;
				color: #999;
				align-items: center;
	
				.dianzan {
					align-items: center;
				}
	
				.pinglun {
					align-items: center;
					margin-left: 10rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.firstLeve{padding-bottom: 10rpx; border-bottom: 1px solid #f7f8f9;}
	.loadMore{text-align: center; margin-bottom: 20rpx;
		text{color: $themeColor; font-size: 26rpx;}
	}
	.contentBox {
		padding: 0 20rpx;
	
		.icon {
			width: 80rpx;
			justify-content: center;
			margin-left: 10rpx;
			height: 80rpx;
			align-items: center;
			border: 1px solid #eee;
			border-radius: 50rpx;
		}
	
		.addEmoji {
			margin-right: 20rpx;
		}
	
		.imagesList { margin-top: 20rpx;
			.item {
				margin-right: 20rpx;
			}
		}
	}
	.boxB{margin-left: 60rpx; margin-top: 20rpx;  background-color: #f7f8f9;
		padding-top: 20rpx;  padding-left:10rpx;
		.imgbox{
			width: 40rpx !important;
			height: 40rpx !important;
		}
		.contentBox{width: calc(100% - 60rpx);}
		// .img{	width: 60rpx;
		// 	height: 60rpx;		
		// 	image{width:60rpx; height: 60rpx; border-radius: 100%;}
		// }
	}
	.chooseImgType {
		margin-top: 20rpx;
	
		.item {
			text-align: center;
			margin-right: 20rpx;
			padding: 10rpx;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			width: 60px;
			border: 1px solid #eee;
			height: 60px;
			text-align: center;
			border-radius: 20rpx;
			background-color: #f4f5f7;
	
			// background-color: red;
			text {
				font-size: 24rpx;
				display: inline-block;
				width: 100%;
				margin-top: -10rpx;
			}
	
			.img {
				margin: 0 auto;
			}
	
			.ss {
				line-height: 20rpx;
				color: #666;
			}
		}
	
	}
	
	.sbmitBox {
		button {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			@include theme("btn_bg");
			color: #fff;
		}
	}
	
	.upimgList {
		margin-top: 15px;
	
		.item {
			border: 1px solid #eee;
			padding: 10rpx;
			margin-right: 20rpx;
			width: 100rpx;
			height: 100rpx;
			position: relative; overflow: hidden;
	
			image {
				width: 100%;
				height: 100rpx;
			}
	
			span {
				display: inline-block;
				width: 20px;
				height: 20px;
				position: absolute;
				right: -10px;
				top: -10px;
				z-index: 1;
				border: 1px solid #eee;
				border-radius: 20rpx;
				background-color: #fff;
				line-height: 20px;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
	
	.emojiBtn {
	
		.img {
			width: 50rpx;
			height: 50rpx;
	
			image {
				width: 100%;
				height: 50rpx;
			}
		}
	}
	
	.editorBox {
		width: calc(100vw - 100rpx);
	}
	
	.ql-container {
		min-height: 50rpx !important;
		height: auto !important;
		border: 1px solid #eee;
		border-radius: 50rpx;
	}
	
	.contentBox {
		padding: 0 20rpx;
	
		.icon {
			width: 80rpx;
			justify-content: center;
			margin-left: 10rpx;
			height: 80rpx;
			align-items: center;
			border: 1px solid #eee;
			border-radius: 50rpx;
		}
	
		.addEmoji {
			margin-right: 20rpx;
		}
	
		.imagesList { margin-top: 20rpx;
			.item {
				margin-right: 20rpx;
			}
		}
	}
</style>