<template>
	<view>
		<!-- #ifdef MP -->
		<view v-if="showSubscribeBtn" class="subscribe-box">
		  <u-icon name="bell-fill" color="var(--ui-BG-Main)" size="44"></u-icon>
		  <view class="info">获取未读消息提醒</view>
		  <view class="sub-btn" @tap="subscribeMessage">立即订阅</view>
		</view>
		<!-- #endif -->
		
		<view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList" class="user-card">
			 <view class="avatar-box" @click="detail(item)">
				<u-avatar size="180" :src="item.avatar"></u-avatar>
			 </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 == 2">
							 <u-icon name="ziyuan2" size="22" custom-prefix="iconfont"></u-icon>
							 <text>{{item.age}}</text>
						 </view>
						 <view class="sex-nan" v-if="item.sex == 1">
							 <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 class="tag-box">
					 	<span class="tag">已注册{{item.day}}天</span>
						<span class="tag" v-if="item.qrcode && item.qrcodeShow == 0">可交换名片</span>
					 </view>
					 <view class="badge-box">
						 <view v-if="item.qrcode && item.qrcodeShow == 0" class="weixin-btn" @click="getWeixin(item)">
							 <u-icon name="weixin-fill" size="28" color="#fff"></u-icon>
						 </view>
					 </view>
				 </view>
				 <view class="tag-list">
					 <img-box :file="item.photo"></img-box>
					 <view class="chat-btn" @click="chat(item)">
						 <u-icon name="chat" size="28" color="#fff"></u-icon>
						 <view class="text">密聊</view>
					 </view>
				 </view>
				 
			 </view>
		</view>
		
	</view>
</template>

<script>
	import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import ImgBox from '@/pages/tabbar/components/home/friend/imgBox.vue';
	import sheep from '@/sheep'; 
	import { WxaSubscribeTemplate } from '@/sheep/util/const';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	import ImConversationApi from '@/sheep/api/im/memberConversation';
	import UserApi from '@/sheep/api/member/user';
	import dayjs from 'dayjs';
	import relativeTime from "dayjs/plugin/relativeTime";
	dayjs.extend(relativeTime);
	const audio = uni.createInnerAudioContext();
	export default {
		components: {
			TuiBadge,
			ImgBox,
		},
		props: {
			item: {
				type: Object,
				default: {},
			},
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				playId: null,
				
				showSubscribeBtn: false,
			}
		},
		computed: {
			authType() {
				return sheep.$store('modal').auth;
			},
			orderList() {
				this.virtualList.forEach((order) => order.time = this.showDayTime(order.updateTime));
				return this.virtualList;
			},
		},
		created() {
			// #ifdef MP
			// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
			this.autoSubscribeMessage();
			// #endif
		},
		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) {
				sheep.$router.go('/pages/user/detail/index',{id: e.id});
			},
			getWeixin(e) {
				var that = this;
				uni.showModal({
				  title: '交换名片',
				  content: '确认交换名片吗？',
				  success: function (res) {
				    if (res.confirm) {
						that.queryWeixin(e);
				    }
				  },
				});
				
			},
			queryWeixin(e) {
				UserApi.getQrcodeByUserId(e.id).then(res => {
					if(res.data){
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: [res.data], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
							indicator: 'number',
							loop: true
						});
					}
				});
			},
			chat(e) {
				const isLogin = sheep.$store('user').isLogin;
				if(!isLogin) {
					showAuthModal();
					return;
				}
				
				const userInfo = sheep.$store('user').userInfo;
				// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
				if(userInfo.visible) {
					// #ifdef MP-WEIXIN
					this.subscribeMessage();
					// #endif
					
					ImConversationApi.createMemberConversation({
						userId: e.id,
						groupType: 1,
						lastMessageContentType: 1,
					}).then(res => {
						if(res.data){
							sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: e.id});
						}
					});
					return;
				}
				// 触发小程序授权信息弹框
				// #ifdef MP-WEIXIN
				showAuthModal('mpAuthorization');
				// #endif
				
				// #ifndef MP-WEIXIN
				showAuthModal('h5Authorization');
				// #endif
			},
			subscribeMessage() {
			  const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
			  sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
			    // 订阅后记录一下订阅状态
			    uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
			    uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
			    // 隐藏订阅按钮
			    this.showSubscribeBtn = false;
			  });
			},
			async autoSubscribeMessage() {
			  // 1. 校验是否手动订阅过
			  const subscribeBtnStatus = uni.getStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
			  if (!subscribeBtnStatus) {
			    this.showSubscribeBtn = true;
			    return;
			  }
			},
			showDayTime(datetime) {
			  if (!datetime) return "";
			  return dayjs(datetime).fromNow();
			},
		}
	}
</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;
		position: relative;
		justify-content: center;
		
		.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;
			justify-content: space-between;
			align-items: center;
		}
		
		.tag-box {
			display: inline-block;
			align-items: center;
			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%;
			}
		}
		
		.chat-btn {
			display: flex;
			align-items: center;
			background-color: var(--ui-BG-Main);
			justify-content: center;
			border-radius: 40px;
			color: #fff;
			font-size: 22rpx;
			padding: 5px;
			position: absolute;
			right: 0;
			bottom: 0;
			
			.text {
				margin-left: 2px;
			}
		}
		
		.weixin-btn {
			display: flex;
			align-items: center;
			background-color: #19be6b;
			justify-content: center;
			border-radius: 40px;
			color: #fff;
			font-size: 22rpx;
			padding: 5px;
			
			.text {
				margin-left: 2px;
			}
		}
	}
	
	.subscribe-box {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		justify-content: center;
		font-size: 28rpx;
		
		.info {
			margin: 0 10rpx;
		}
		
		.sub-btn {
			color: var(--ui-BG-Main);
		}
	}
</style>