<template>
	<view class="">
		<view :class="[info.orderType==1?'yhpj':'jdpj']" >
			<view class="yhpj-all" :style="{width:info.orderType==1?'700rpx':'650rpx'}">
				<view class="yhpj-all-fs">游客评论
				</view>
			</view>
			<view class="konglist" v-if="pjinfo.length==0">空空如也，这暂时什么都没有哦～</view>
			<view class="yhpl" :style="{width:info.orderType==1?'700rpx':'650rpx'}" v-if="pjinfo.length>0" v-for="(el,ind) in pjinfo">
				<view class="yhxx">
					<image class="yhxx-img" v-if="el.userImg!=null" :src="el.userImg"></image>
				<!-- 	<image class="yhxx-img" v-if="el.userImg==null" src="https://xcx.wfwhy.gov.cn/r/cms/www/xcx/img/wfqy-icon-mddl.png" mode=""></image> -->
					<view class="yhxx-name">
						{{el.userName}}
						<view class="scitemstarts">
							<image class="star-image" :src="el.score>0? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.score>1? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.score>2? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.score>3? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.score>4? selectedSrc:normalSrc"></image>
						</view>
					</view>
				</view>
				<view class="yhplxx">
					{{el.content}}
				</view>
				<view class="plsj">
					{{el.createTime}}
				</view>
				<view class="tag">
					<view class="left">
						<view class="tag-list" v-for="(item,index) in el.tags">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="ckpj" @click="gotopj">
				<text class="ckpj-txt">去评论</text>
			</view>
		</view>
	</view>
</template>

<script>
	var web = require('@/components/utils/request.js');
	export default {
		props: ['info'],
		data() {
			return {
				pjinfo: [],
				totalNumber: 0,
				normalSrc: '../../static/star-null-big_hong.png',
				selectedSrc: '../../static/star-on-big_hong.png',
				alldata: [],
			}
		},
		watch: {
			info() {
				this.getPinlun();
			}
		},
		created() {

		},
		methods: {
			getPinlun() {
				var url = 'comment/appraise_list.jspx';
				var para = {
					"pageNo":1,
					"pageSize":1000,
					"contentId":this.info.id,
					"flag":0
				}
				var that = this;
				web.httpPost(that, url, para, function(res) {
					var tmp = [];
					if (res.data.status == 200) {
						var json=res.data.items;
						for(let i=0;i<json.length;i++){
							if(json[i].commentTag!=null){
								json[i].tags=json[i].commentTag.split(',');
							}
						}
						tmp = json;
					}
					that.totalNumber = res.data.totalNumber;
					that.pjinfo = tmp;
					that.alldata = res.data;
				}) 
			},
			gotopj() {
				uni.navigateTo({
					url: '/other/pingjia/pingjiazx?id=' + this.info.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.tag{
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.left{
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			width: 85%;
		}
		&-list{
			padding: 5rpx 10rpx;
			margin-bottom: 10rpx;
			height: 35rpx;
			background: #E9F2FF;
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			background: #227BFB;
			text-align: center;
			border-radius: 4rpx;
			margin-right: 10rpx;
		}
	}
	.allpl {
		width: 700rpx;
		display: flex;
		align-items: baseline;
		margin: 40rpx 0 30rpx;
		line-height: 42rpx;

		.pfx {
			display: flex;
			align-items: center;
			margin-left: 35rpx;

			.pfxlist {
				font-size: 29rpx;
				color: #999999;

				text {
					margin-left: 10rpx;
				}

				margin-right: 20rpx;
			}
		}

		.zpf {
			font-size: 56rpx;
			font-weight: 550;
			color: #FF540B;

			text {
				font-weight: 500;
				font-size: 29rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}
	}

	.plsj {
		font-size: 25rpx;
		color: #AAAAAA;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		top: 0rpx;
		right: 20rpx;
		image {
			width: 22rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}
	}

	.imglist {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 0 15rpx;

		.leftimg {
			border-radius: 17rpx 0 0 17rpx;
		}

		.rightimg {
			border-radius: 0 17rpx 17rpx 0;
		}

		image {
			width: 231rpx;
			height: 215rpx;
			margin-right: 4rpx;
		}
	}

	.scitemstarts {
		display: flex;
		align-items: center;
		.star-image {
			width: 28rpx;
			height: 26rpx;
			margin-right: 7rpx;
		}
	}

	.yhpj-all-img {
		width: 9upx;
		height: 15upx;
		margin-left: 10upx;
		margin-top: 5upx;
	}

	.ckpj-txt {
		font-size: 24upx;
		color: #fff;
	}

	.ckpj {
		margin-top: 15upx;
		width: 196upx;
		height: 60upx;
		background: -webkit-linear-gradient(right, #3269F7 0%, #4A9AF9 100%);
		background: linear-gradient(-90deg, #3269F7 0%, #4A9AF9 100%);
		border: none;
		border-radius: 60upx;
		text-align: center;
		line-height: 60rpx;
	}

	.yhplxx {
		width: 600rpx;
		margin-top: 25rpx;
		line-height: 45rpx;
		font-size: 24rpx;
		color: #333333;
		max-height: 135rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.yhxx-time {
		position: absolute;
		top: 5upx;
		right: 0;
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}

	.yhxx-name-pftxt {
		display: block;
		font-size: 28upx;
		color: rgba(93, 163, 67, 1);
		margin-top: 6upx;
	}

	.yhxx-name-txt {
		font-size: 30upx;
		color: rgba(153, 153, 153, 1);
	}

	.yhxx-name {
		margin-left: 25upx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		flex-direction: column;
	}

	.yhxx-img {
		width: 63upx;
		height: 63upx;
		border-radius: 50%;
	}

	.yhxx {
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
	}

	.yhpl {
		width: 700upx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.1);
		margin-bottom: 46rpx;
		position: relative;
	}

	.yhpj-all-sl {
		font-size: 25upx;
		color: #999;
		margin-left: 15rpx;
	}

	.yhpj-all-pj {
		font-size: 32upx;
		color: #5DA343;
		margin-right: 350upx;
	}

	.yhpj-all-fs {
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
	}

	.yhpj-all {
		width: 700upx;
		font-size: 28upx;
		color: #222;
		display: flex;
		align-items: baseline;
		margin-top: 30rpx;
		justify-content: space-between;
		margin-bottom: 50rpx;
		.ckgd {
			font-size: 28rpx;
			color: #5A8BFC;
			display: flex;
			align-items: center;

			image {
				width: 13rpx;
				height: 21rpx;
				margin-left: 10rpx;
			}
		}
	}

	.yhpj {
		width: 750upx;
		margin-top: 20upx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
		margin-top: 80rpx;
	}
	.jdpj{
		width: 750upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}
</style>
