<template>
	  <view @click="detail(item)"  :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList" class="user-card">
	  	 <view class="avatar-box">
	  		<u-avatar mode="square" size="180" :src="item.avatar"></u-avatar>
	  		<view class="voice-play" v-if="item.sound">
	  			<voice-play :sec="item.soundTime" @tap.stop="playAudio(item)" :isPlay="item.id == playId"></voice-play>
	  		</view>
	  	 </view>
	  	 <view class="right-box">
	  		 <view class="top-box">
	  			 <view class="nickname-box">
	  				 <view class="nickname">{{item.nickname}}</view>
	  				 <view class="sex-nv" v-if="item.sex == 1">
	  					 <u-icon name="ziyuan2" size="22" custom-prefix="iconfont"></u-icon>
	  					 <text>{{item.age}}</text>
	  				 </view>
					 <view class="sex-nan" v-if="item.sex == 0">
						 <u-icon name="ziyuan3" size="22" custom-prefix="iconfont"></u-icon>
						 <text>{{item.age}}</text>
					 </view>
	  			 </view>
	  			<!-- <view class="map-box">
	  				 <u-icon name="map" size="32" color="#aaa"></u-icon>
					 <view class="city" v-if="item.city">
						<text class="text">{{item.city}}</text>
					 </view>
					 <text v-else>未知</text>
	  			 </view> -->
	  		 </view>
	  		 <view class="oline-box">
				 <view v-if="item.clerkLevel">
					 <view class="img-icon" v-if="item.clerkLevel.img">
						 <img style="width: 100%;height: 100%;" :src="item.clerkLevel.img"></img>
					 </view>
					 <view class="icon" v-else>
						 <u-icon name="wode_duanwei" size="36" custom-prefix="iconfont"></u-icon>
						 <text>{{item.clerkLevel.name}}</text>
					 </view>
				 </view>
	  			 <view class="badge-box">
					 <view class="online" v-if="item.onlineStatus">
						 <tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
						 <text class="text">在线</text>
					 </view>
					 <view class="online" v-else>
						 <tui-badge :scaleRatio="0.8" type="gray" dot></tui-badge>
						 <text class="text">离线</text>
					 </view>
	  			 </view>
	  		 </view>
	  		 <view class="tag-list">
	  			 <view class="tag-box">
	  				 <span class="tag" v-for="(categoryName,index) in item.categoryNameList">{{categoryName}}</span>
	  			 </view>
	  		 </view>
	  		 <view class="note-box">
	  			 <u-icon name="tingkebiji" custom-prefix="iconfont" size="36" color="#3cc9a4"></u-icon>
	  			 <view class="text">{{item.intro}}</view>
	  		 </view>
	  	 </view>
	  </view>
	  
	  <view class="menu-btn">
		  
	  	<!-- <view class="icon" @click="toApply">
	  		<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/9966c9c45969e2b33987642950d9061c0471c1fa352f9a60825a4e88595090b8.png"></image>
	  	</view>
	  	
	  	<view class="icon" @click="fenxiao">
	  		<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/8225510a565cf510a4ee26c6997aa2d967de4bc35f05e12558dae9e42ce8581a.png"></image>
	  	</view> -->
		
		<!-- <view class="icon" @click="xiadan">
			<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/c50c079a74fcf57d5fbadc3b3354316eab6ce6de7ac382d5e0bb587bbffabbcf.png"></image>
		</view>
		
		<view class="icon" @click="toKaidian">
			<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/4f453e94e7bccc7a0361e4baa004beafdec4f287db010d044d860863f969f3bb.png"></image>
		</view> -->
		
	  </view>
  
</template>

<script>
	import VoicePlay from '@/pages/tabbar/components/home/voicePlay.vue';
	import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import sheep from '@/sheep';
	const audio = uni.createInnerAudioContext();
	export default {
		components: {
			VoicePlay,
			TuiBadge,
		},
		props: {
			item: {
				type: Object,
				default: {},
			},
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				playId: null,
			}
		},
		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.sound;
				audio.play();
			},
			detail(e) {
				this.$u.route({
					url: 'pages/clerk/detail/index',
					params: {
						id: e.id,
					}
				});
			},
			toApply() {
				uni.showModal({
				  title: '达人申请',
				  content: '请确认是否成年，未成年禁止申请，申请后会有客服添加进行微信实名认证！',
				  success: function (res) {
				    if (res.confirm) {
				      sheep.$router.go('/pages/clerk/apply/index');
				    }
				  },
				});
			},
			toKaidian() {
				uni.showModal({
				  title: '搭建同款',
				  content: '搭建同款请联系客服微信：rbtnet',
				  success: function (res) {
				    
				  },
				});
			},
			xiadan() {
				sheep.$router.go('/pages/worker/blind/index');
			},
			fenxiao() {
				uni.showModal({
				  title: '分销申请',
				  content: '点击邀请海报，生成海报，生成邀请码，邀请一人下单，可得下单20%佣金！',
				  success: function (res) {
				    if (res.confirm) {
				      sheep.$router.go('/pages/commission/index');
				    }
				  },
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-card {
		padding: 15px;
		margin-bottom: 15px;
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		flex: 1;
	}
	
	.user-card:last-child {
		margin-bottom: 0;
	}
	
	.avatar-box {
		position: relative;
		display: flex;
		justify-content: center;
		
		.voice-play {
			position: absolute;
			bottom: 0;
		}
	}
	
	.right-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-left: 10px;
		min-width: 0;
		
		.top-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;
			
			.nickname-box {
				display: flex;
				align-items: center;
				
				.nickname {
					font-size: 28rpx;
					font-weight: bolder;
					margin-right: 4px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					max-width: 200rpx;
				}
				
				.sex-nv {
					background-color: #d5656f;
					border-radius: 40px;
					color: #fff;
					font-size: 22rpx;
					padding: 1px 5px;
				}
				
				.sex-nan {
					background-color: #0081ff;
					border-radius: 40px;
					color: #fff;
					font-size: 22rpx;
					padding: 1px 5px;
				}
			}
			
			.map-box {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: #aaa;
				
				.city {
					display: flex;
					
					.text {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						max-width: 88rpx;
					}
				}
			}
		}
		
		.oline-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;
			
			.img-icon {
				width: 40rpx;
				height: 50rpx;
			}
			
			.icon {
				background-color: #ff5ebd;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40px;
				font-weight: bold;
				color: #fff;
				font-size: 22rpx;
				line-height: 22rpx;
				padding: 5px 5px;
			}
			
			.badge-box {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #aaa;
				
				.online {
					display: flex;
					align-items: center;
				}
				
				.text {
					margin-left: 3px;
				}
			}
		}
		
		.tag-list {
			display: flex;
		}
		
		.tag-box {
			display: inline-block;
			align-items: center;
			margin-bottom: 5px;
			background-color: #eef2f2;
			border-radius: 3px;
			color: #aaa;
			font-size: 24rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			max-width: 100%;
			padding: 5px 0;
			
			.tag {
				white-space: nowrap;
				padding: 5px 5px;
				position: relative;
			}
			
			.tag:after {
				content: ' ';
				border-left: 1px solid #aaa;
				display: inline-block;
				height: 10px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
			}
			
			.tag:last-child:after{
				display: none;
			}
		}
		
		.note-box {
			display: flex;
			align-items: center;
			color: #aaa;
			font-size: 24rpx;
			
			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				max-width: 100%;
			}
		}
	}
	
	
	.menu-btn {
		position: fixed;
		bottom: 220rpx;
		right: 25rpx;
		
		.icon {
			background-color: #ffff;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100%;
			box-shadow: 0 0 10px #cccccc;
			margin-top: 70rpx;
		}
			
		.img {
			height: 80rpx;
			width: 80rpx;
			border-radius: 100%;
		}
	}
</style>