<template>
	<view style="background-color: #fff;">
		<z-nav-bar title="我的评价"></z-nav-bar>
		<view class="container">
			<view class="" v-if="commentsList && commentsList.length > 0">
			<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
				<view class="flexbox">
					<!-- <view class="touxiang">
						<image :src="item.avatar" mode="aspectFit"></image>
						<text class="username nowrap ">{{item.name}}</text>
					</view> -->
					<view class="contentBox">
						<view class="mb30">
							<span :class="['star',item.starlevel >= 1 ? 'starLight':'starGray']"></span>
							<span :class="['star',item.starlevel >= 2 ? 'starLight':'starGray']"></span>
							<span :class="['star',item.starlevel >= 3 ? 'starLight':'starGray']"></span>								
							<span :class="['star',item.starlevel >= 4 ? 'starLight':'starGray']"></span>								
							<span :class="['star',item.starlevel >= 5 ? 'starLight':'starGray']"></span>
						</view>
						<div class="pjimgs flexbox">
							<view class="item" v-for="(item1,index) in item.images">
								<image v-if="item1.length > 10" @click="previewImage(item1)"  :src="item1" mode="aspectFill" style="width:100%; height: 50px;"></image>
							</view>								
						</div>
						<view class="content" v-html="item.phtml"></view>
						<text class="time">订单编号：{{ item.orderSn }}</text>
						<text class="time">发布时间：{{ item.createDate }}</text>
					</view>
				</view>
			</view>
			</view>
			<view class="quesheng" v-else>
				<text>暂无评价~</text>
			</view>
		</view>
		<z-navigation></z-navigation>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData:{},
				commentsList:[]
			}
		},
		created() {
			this.getComments()
		},
		computed:{
			...mapState(['userInfo']),
		},
		components:{
			musicPlay	
		},
		methods: {
			// 获取html格式的评论1
			getHtmlComment(comment){				
				 // 格式化html
					// console.log(comment,'comment')
				         // 这里处理 链接   换行符
				         let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
							// console.log(item, index)
							 var indexss = emojiList1.findIndex(item1 => item1.alt === item)
							 // console.log(indexss, 'indexss')
				           return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url + '" width="18rpx">';
				         });
						// console.log(replacedStr,'replacedStr')
				         return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
				       
						
			},
			// 放大图片
			previewImage(url){
				console.log(url)
				uni.previewImage({
					urls: [url]
				});
			},
			// 获取评价列表
			getComments(){				
					$http.request({
						url: "buy/record/Allevaluations",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
						'userid': this.userInfo.id
					},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						console.log(res,'评价')
						if(res.code == 0){
							this.commentsList = res.Allevaluations.map(item => {
								var imgList = []
								if(item.images !== null){
									imgList = item.images.split(',')
									item.images = imgList
									return item
								}else {
									return item
								}								
							})
							
							var newarr = []
							this.commentsList.forEach((item1)=>{	
								   var pjstr = ''
									pjstr = this.getHtmlComment(item1.content)
									//console.log(pjstr,'99999999999----------')
									 item1.phtml = pjstr
									// console.log(item1.phtml,'item1.phtml')
									 newarr.push(item1)
							
							})
							this.commentsList = newarr
							// this.commentsList = res.Allevaluations
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pjimgs{ margin: 10px 0;flex-wrap: wrap; display: flex; justify-content: space-between;
		.item{width: 23%;  margin-right: 10px; 
		image{ }
		}
		
	}
	.star{display: inline-block; width: 20px; height: 20px;  margin-right: 10rpx;}
	.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
	.starLight{ background : url(../../static/icon/star_light.png) no-repeat;  background-size: contain;}
	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
	.container{margin-top: 10rpx; background-color: #fff; padding:20rpx; border-top:#f1f1f1 1px solid ;}

	.contentBox{ overflow: hidden; margin-bottom: 30rpx; padding-bottom: 30rpx; border-bottom: 1px solid #f1f1f1; margin-top: 30rpx;
		.content{font-size: 28rpx; line-height: 40rpx;}
		.time{font-size: 24rpx; color: #999; margin-top: 6rpx;  display: block; width: 100%; text-align:right}
	}

</style>
