<template>
	  <view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList" class="card-box">
	  	 <view class="avatar-box">
			 <u-avatar v-if="item.anonymous" size="80"></u-avatar>
			 <u-avatar v-else size="80" :src="item.userAvatar"></u-avatar>
			 <view class="nickname-box">
				 <view class="nickname">
					 <text class="text">{{item.userNickname}}</text>
					 <uni-rate :readonly="true" v-model="item.scores" size="14" />
				 </view>
				 <view class="time">{{item.createTimeStr}}</view>
			 </view>
		 </view>
		 
		 <view class="spu-box">
			 <text class="tag">{{clerk.nickname}}</text>
			 <text class="tag">服务类型：{{item.skuName}}</text>
		 </view>
		 
		 <view class="content">
			 <rich-text :nodes="item.content"></rich-text>
		 </view>
		 
		 <view class="img-box" v-if="item.picUrls && item.picUrls.length > 0">
			 <img-box :file="item.picUrls.join(',')"></img-box>
		 </view>
		 
	  </view>
  
</template>

<script>
	import ImgBox from '@/pages/tabbar/components/trend/imgBox.vue';
	import sheep from '@/sheep';
	export default {
		components: {
			ImgBox
		},
		props: {
			clerk: {
				type: Object,
				default: {},
			},
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				
			}
		},
		computed: {
			orderList() {
				this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd'));
				this.virtualList.forEach(function(e){
					if(e.skuProperties){
						var skuNameList = [];
						e.skuProperties.forEach(function(sku){
							skuNameList.push(sku.valueName);
						});
						e.skuName = skuNameList.join('-');
					}
				});
				return this.virtualList; 
			},
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.card-box {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.avatar-box {
		display: flex;
		align-items: center;
		
		.nickname-box {
			font-size: 24rpx;
			margin-left: 10px;
			
			.nickname {
				letter-spacing: 0.0625rem;
				display: flex;
				align-items: center;
				
				.text {
					letter-spacing: 2rpx;
					margin-right: 10px;
				}
			}
			
			.time {
				color: rgb(164, 164, 164);
				font-size: 22rpx;
				margin-top: 3px;
			}
		}
	}
	
	.spu-box {
		font-size: 24rpx;
		color: rgb(164, 164, 164);
		margin: 10px 0;
		letter-spacing: 2rpx;
		
		.tag {
			margin-right: 20rpx;
		}
	}
	
	.content {
		font-size: 26rpx;
		line-height: 180%;
		white-space: pre-wrap;
		letter-spacing: 2rpx;
	}
</style>