<template>
  <view>
	  <view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList">
		  <view class="card">
		  	<view class="right">
		  		<view class="card-header">
		  			<view class="box3">
		  				<view class="box1">
		  					<view class="tag-list">
		  						<!-- <view class="tag">Ta爱玩王者荣耀</view> -->
		  						<view class="tag">发布于 {{item.createTimeStr}}</view>
		  					</view>
		  				</view>
		  			</view>
		  		</view>
		  		<view class="card-content"> 
		  			<view class="text-box">  
		  				<rich-text :nodes="item.content"></rich-text>
		  			</view>
		  		</view>
		  		<view class="image-box" v-if="item.fileType == 0">
		  			<img-box :file="item.file"></img-box>
		  		</view>
				<view class="voice-box" v-if="item.fileType == 1">
					<voice-play :sec="item.seconds" @tap.stop="playAudio(item)" :isPlay="item.id == playId"></voice-play>
				</view>
				<view class="video-box" v-if="item.fileType == 2">
					<video-box :file="item.file"></video-box>
				</view>
		  		<view class="topic-list">
		  			<view class="topic">
		  				<u-icon name="map-fill" size="40" color="#3cc9a4"></u-icon>
		  				<view class="tag-text">{{item.city}}</view>
						<u-icon name="arrow-right" size="24" color="#3cc9a4"></u-icon>
		  			</view>
		  		</view>
		  		<view class="card-footer">
		  			<!-- <view class="toolbar"> 
		  				<u-icon color="#f880ab" name="presentfill" size="38" custom-prefix="iconfont"></u-icon>
		  				<view class="toolbar-text">3</view>
		  			</view> -->
		  			<!-- <view class="toolbar">
		  				<u-icon name="pinglun" size="38" custom-prefix="iconfont"></u-icon>
		  				<view class="toolbar-text">22</view>
		  			</view> -->
		  			<view class="toolbar" @click="thumb(item)">
						<u-icon v-if="item.like" name="thumb-up-fill" color="var(--ui-BG-Main)" size="40"></u-icon>
		  				<u-icon v-else name="thumb-up" size="40"></u-icon>
		  				<view class="toolbar-text" v-if="item.likeNum > 0">{{item.likeNum}}</view>
						<view class="text" v-else>点赞</view>
		  			</view>
		  		</view>
		  	</view>
		  </view>
	  </view>
	  
  </view>
</template>

<script>
	import ImgBox from '@/pages/tabbar/components/trend/imgBox.vue';
	import VideoBox from '@/pages/tabbar/components/trend/videoBox.vue';
	import VoicePlay from '@/pages/tabbar/components/trend/voicePlay.vue';
	import sheep from '@/sheep';
	import TrendApi from '@/sheep/api/worker/trend';
	const audio = uni.createInnerAudioContext();
	export default {
		components: {
			ImgBox,
			VideoBox,
			VoicePlay,
		},
		props: {
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				playId: null,
			}
		},
		computed: {
			orderList() {
				this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM'));
				return this.virtualList;
			},
		},
		methods: {
			playAudio(e) {
				if(this.playId == e.id){
					this.playId = null;
					audio.stop();
					return;
				}
				this.playId = e.id;
				//语音自然播放结束
				audio.onEnded((res) => {
					this.playId = null;
				});
				audio.src = e.file;
				audio.play();
			},
			thumb(e) {
				TrendApi.createTrendLike({
					trendId: e.id,
				}).then((res) => {
					if(res) {
						if(e.like){
							e.like = false;
							e.likeNum = e.likeNum-1;
							sheep.$helper.toast('取消点赞');
						}else{
							e.like = true;
							e.likeNum = e.likeNum+1;
							sheep.$helper.toast('点赞成功');
						}
					}
				});
			},
			fans(e) {
				TrendApi.createClerkFans({
					workerClerkId: e.workerClerkId,
				}).then((res) => {
					if(res){
						if(e.fans){
							sheep.$helper.toast('取消收藏');
							e.fans = false;
						}else{
							sheep.$helper.toast('收藏成功');
							e.fans = true;
						}
					}
				});
			},
			detail(e) {
				this.$u.route({
					url: 'pages/clerk/detail/index',
					params: {
						id: e.workerClerkId,
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
	}
	
	.card {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;
		
		.right {
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}
	
	.avatar-img{
		margin-right: 5px;
		width: 110rpx;
		height: 110rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8rpx;
		
		.img {
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
	}
	
	.avatar{
		margin-right: 5px;
		width: 110rpx;
		height: 110rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.img {
			width: 75%;
			height: 75%;
			border-radius: 100%;
		}
		.gif {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	}
	
	.card-header {
		display: flex;
		align-items: center;
		
		.box1 {
			.tag-list {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				margin-top: 4rpx;
				
				.tag::after {
				  content: '·';
				  padding: 0 10rpx; /* 添加一些间隔 */
				}
				
			}
			
			.tag-list .tag:last-child::after {
				content: unset;
			}
		}
		
		.box2 {
			display: flex;
			align-items: center;
			line-height: 40rpx;
			
			.nickname {
				font-size: 28rpx;
				color: #333333;
			}
			
			.sex-box {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #d06b8d1f;
				border-radius: 20px;
				font-size: 20rpx;
				padding: 4rpx 10rpx;
				color: #d06b8d;
				line-height: 24rpx;
				margin: 0 5px;
				
				.age {
					margin-left: 2px;
				}
			}
			
			.nan {
				background-color: #007aff1a;
				color: #007aff;
			}
		}
		
		.box3 {
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;
		}
		
		.fans {
			width: 60rpx;
			display: flex;
			justify-content: flex-end;
			height: 60rpx;
			align-items: center;
			color: var(--ui-BG-Main);
			font-size: 24rpx;
			padding-right: 3px;
		}
	}
	
	.card-content {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		
		.text-box {
			font-size: 26rpx;
			line-height: 180%;
			white-space: pre-wrap;
			letter-spacing: 2rpx;
		}
	}
	
	.topic-list { 
		display: flex;
		align-items: center;
		margin-top: 10px;
		
		.topic {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin-right: 20rpx;
			color: var(--ui-BG-Main);
			font-weight: bold;
			
			.tag-text {
				margin-left: 2px;
			}
		}
	}
	
	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		
		.toolbar {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #666666;
			width: 80rpx;
			height: 40rpx;
			flex: 1;
		}
		
		.toolbar-text {
			font-size: 26rpx;
			margin-left: 5px;
		}
		
		.text {
			font-size: 24rpx;
			margin-left: 5px;
		}
	}
</style>