<template>
	<view class="zhuanfa-container">
		<template v-if="moreFlag==false">
			<view>
				<u-navbar 	:is-back="false"
							back-icon-color="#333333"
							title="" 
							:border-bottom="false"
							:background="{ background: '#f0f0f0'}" 
							z-index="1001">
					<view class="slot-wrap u-flex u-row-between u-col-center u-font-32">
						<view @click="goback()">
							<text>关闭</text>
						</view>	
						<view style="font-weight: bold;font-size: 34rpx;color: #000000;">
							<text>选择一个聊天</text>
						</view>	
						<view @click="changeMoreFlag(1)">
							<text>多选</text>
						</view>	
					</view>
				</u-navbar>
				<view>
					<view   style="background-color: #f0f0f0;" class="u-p-30">
						<view class="u-flex u-row-center u-col-center"
								style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
							<view class="u-m-r-20">
								<u-icon class="u-clear-icon" top="6rpx"  :size="40" name="search" color="#c0c0c0"></u-icon>
							</view>
							<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
						</view>
						<view class="u-m-t-40 u-p-b-20" v-if="latestZhuanFa.length>0">
							<view style="font-size: 30rpx;font-weight: bold;">
								<text>最近转发</text>
							</view>
							<view class="u-flex u-row-left u-col-center u-m-t-20" style="text-align: center;">
								<view class="u-m-r-40"  v-for="(lastestItem,index) in latestZhuanFa" :key="index">
									<view class="u-flex u-row-center u-col-center">
										<view style="height: 100rpx;width: 100rpx;">
											<u-image :src="lastestItem.avatar"
												:width="100" :height="100" :border-radius="12"></u-image>
										</view>
									</view>
									<view class="u-line-2 u-tips-color" 
										  style="width: 100rpx;height: 64rpx;line-height: 30rpx;font-size: 26rpx;padding:8rpx;">
										<text>{{lastestItem.nickName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="u-p-30" style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
						<view class="u-flex u-row-between u-col-center u-font-30">
							<view style="color: #000000;font-weight: bold;">
								<text>最近聊天</text>
							</view>
							<view style="color:#36648b;">
								<text>创建聊天</text>
							</view>
						</view>
						<view  v-if="lastestChatUsers.length>0" class="u-m-t-30">
							<view v-for="(user,uIndex) in lastestChatUsers" :key="uIndex" 
									class="u-flex u-row-left u-col-center u-p-t-16 u-p-b-16">
								<view style="width:90rpx;" class="u-flex u-row-left u-col-center">
									<view>
										<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx"></u-image>
									</view>
								</view>
								<view 	style="width: 600rpx;"
										class="u-flex u-row-between u-col-center u-p-20  u-border-bottom">
									<view style="text-align: left;">
										<view class="u-line-1" style="font-size: 32rpx;color: #000000;">
											<text>{{user.nickName}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="moreFlag==true">
			<view>
				<u-navbar 	:is-back="false"
							back-icon-color="#333333"
							title="" 
							:border-bottom="false"
							:background="{ background: '#f0f0f0'}" 
							z-index="1001">
					<view class="slot-wrap u-flex u-row-between u-col-center u-font-32">
						<view @click="changeMoreFlag(0)">
							<text>取消</text>
						</view>	
						<view style="font-weight: bold;font-size: 34rpx;color: #000000;">
							<text>选择多个聊天</text>
						</view>	
						<view>
							<view v-if="checkedUsers.length<1" style="border-radius: 10rpx;background-color: #dddddd;color: #909399;padding: 10rpx 20rpx;">
								<text>完成</text>
							</view>
							<view v-if="checkedUsers.length>0" 
								 @click="openZhuanFa()"
								 style="border-radius: 10rpx;background-color: #19be6b;color: #ffffff;padding: 10rpx 20rpx;">
								<text>完成({{checkedUsers.length}})</text>
							</view>
						</view>	
					</view>
				</u-navbar>
				
				<view style="background-color: #f0f0f0;">
					<view  v-if="checkedUsers.length<1" class="u-p-30">
						<view class="u-flex u-row-center u-col-center"
								style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
							<view class="u-m-r-20">
								<u-icon class="u-clear-icon" top="6rpx"  :size="40" name="search" color="#c0c0c0"></u-icon>
							</view>
							<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
						</view>
					</view>
					<view v-else class="u-p-30">
						<view class="u-flex u-row-left u-col-center"
							  style="background-color: #ffffff;border-radius: 10rpx;color: #c0c0c0;">
							<view class="u-p-20"  style="width: 400rpx;">
								<scroll-view class="hidden-scroll-bar" 
											:scroll-into-view="scrollIntoViewId"
											:scroll-with-animation="true"
											:scroll-y="false" :scroll-x="true" style="width:400rpx;">
									<view class="u-flex u-row-left u-col-center">
										<view 	class="u-m-l-20" 
												v-for="(checkeItem,index) in checkedUsers" 
												:key="index">
											<view  :id="'u-'+checkeItem.chatNumber"
												   class="u-flex u-row-center u-col-center">
												<view>
													<u-image :src="checkeItem.avatar"
														:width="80" :height="80" :border-radius="12"></u-image>
												</view>
											</view>
										</view>
										<view class="u-p-l-30" v-if="checkedUsers.length<4" style="color: #909399;font-size: 34rpx;">
											<text>搜索</text>
										</view>
									</view>
								</scroll-view>
							</view>
							<view v-if="checkedUsers.length>=4" class="u-p-l-30"  style="color: #909399;font-size: 34rpx;" >
								<text>搜索</text>
							</view>
						</view>
					</view>	
					
					<view class="u-p-30" v-if="latestZhuanFa.length>0">
						<view style="font-size: 30rpx;font-weight: bold;">
							<text>最近转发</text>
						</view>
						<view class="u-flex u-row-left u-col-center u-m-t-20" style="text-align: center;">
							<view class="u-m-r-40" v-for="(lastestItem,index) in latestZhuanFa" :key="index">
								<view class="u-flex u-row-center u-col-center">
									<view>
										<u-image :src="lastestItem.avatar"
											:width="100" :height="100" :border-radius="12"></u-image>
									</view>
								</view>
								<view class="u-line-2 u-tips-color" 
										style="width: 100rpx;height: 64rpx;line-height: 30rpx;font-size: 26rpx;padding: 8rpx;">
									<text>{{lastestItem.nickName}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="u-p-30" 
						 style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
						<view class="u-flex u-row-between u-col-center u-font-30">
							<view style="color: #000000;font-weight: bold;">
								<text>最近聊天</text>
							</view>
							<view style="color:#36648b;">
								<text>从通讯录选择</text>
							</view>
						</view>
						<view  v-if="lastestChatUsers.length>0" class="u-m-t-30">
							<view v-for="(user,uIndex) in lastestChatUsers" :key="uIndex" 
									class="u-flex u-row-left u-col-center u-m-b-20">
								<view>
									<u-checkbox :size="46" v-model="user.checked" @click.native="checkChange(user)"
												shape="circle" active-color="#19be6b"></u-checkbox>
								</view>	
								<view    class="u-flex u-row-left u-col-center u-p-b-20">
									<view style="width:90rpx;"  class="u-flex u-row-center u-col-center">
										<view>
											<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx"></u-image>
										</view>
									</view>
									<view class="u-flex u-row-between u-col-center u-p-20  u-border-bottom">
										<view style="text-align: left;">
											<view class="u-line-1" style="font-size: 32rpx;color: #000000;width: 480rpx;">
												<text>{{user.nickName}}</text>
											</view>
										</view>
									</view>
								</view>	
							</view>
						</view>
					</view>
				</view>
			</view>	
		</template>
		
		<u-popup v-model="openZhuanFaFlag" mode="center"  border-radius="16"
				:mask-close-able="false"
				 width="625rpx" :height="checkedUsers.length>3?'600rpx':'520rpx'">
			<view class="u-p-30">
				<view style="font-size: 34rpx;font-weight: bold;">
					<text>分别发送给:</text>
				</view>
				<view class="u-m-t-30">
					<view class="u-flex u-flex-wrap u-row-left u-col-center">
						<view  v-for="(checkeItem,index) in checkedUsers" class="u-m-r-16 u-m-t-10"
								:key="index">
							<view class="u-flex u-row-center u-col-center">
								<view>
									<u-image :src="checkeItem.avatar"
										:width="80" :height="80" :border-radius="12"></u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between u-col-center u-m-t-30  u-p-t-30 u-p-b-10 u-tips-color u-border-top">
					<view>
						 <text>[逐条转发]共{{selectedMessages.length>0?selectedMessages.length:2}}条信息</text>
					</view>
					<view>
						<u-icon name="arrow-right" size="32"></u-icon>
					</view>
				</view>
				<view class="u-m-t-20 u-p-b-20">
					<view style="background-color: #f7f7f7;width: 550rpx;padding:16rpx 20rpx;text-align: left;color: #909399;font-size: 30rpx;">
						<text>给朋友留言</text>
					</view>
				</view>
				<view   style="position: absolute;width: 560rpx;bottom:30rpx;"
						class="u-flex u-row-between u-col-center u-font-34 u-p-t-30 u-border-top">
					<view style="color: #000000;text-align: center;width: 50%;">
						<view @click="cancelZhuanFa()">
							<text>取消</text>
						</view>
					</view>
					<view style="color: #36648b;text-align: center;width: 50%;">
						<view @click="confirmSend()">
							<text>发送({{checkedUsers.length}})</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="maxLengthFlag" mode="center"  border-radius="16"
				:mask-close-able="false" height="300rpx"
				 width="620rpx">
			<view style="text-align: center;font-weight: bold;font-size: 34rpx;">
				<view class="u-flex u-row-center u-col-center" style="width: 100%; height: 200rpx;">
					<view>
						<text>最多只能选择9个聊天</text>
					</view>
				</view>
				<view @click="maxLengthFlag=false" 
						style="color: #36648b;padding-top:30rpx;padding-bottom: 30rpx; width: 100%;" class="u-border-top">
					<text>我知道了</text>
				</view>
			</view>	 
		</u-popup>		 
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moreFlag:false,
				scrollHidden:false,
				checkNum:0,
				latestZhuanFa:[],
				checkedUsers:[],
				scrollIntoViewId:"",
				lastestChatUsers:[],
				openZhuanFaFlag:false,
				maxLengthFlag:false,
				selectedMessages:[],
			};
		},
		onPageScroll:function(e){
			let top= e.scrollTop;
			let pageHeight= this.$u.sys().windowHeight;
			if((top/pageHeight)>0.25){
				console.log("隐藏");
				this.scrollHidden=true;
			}else{
				this.scrollHidden=false;
			}
		},
		onLoad:function(option){
			if(option.checkedMessages){
				this.selectedMessages=JSON.parse(decodeURIComponent(option.checkedMessages));
				this.selectedMessages[0].showTimeFlag=true;
			};
			this.checkedUsers=[];
			this.latestZhuanFa=this.vuex_lastestZhuanFaUsers;
			this.latestZhuanFa.map(function(item){
				item.checked=false;
			});
			this.lastestChatUsers=this.vuex_yyyFriendList.concat(this.latestZhuanFa);
			this.lastestChatUsers.map(function(item){
				item.checked=false;
			});
		},
		
		methods:{
			goback:function(){
				uni.navigateBack();
			},
			changeMoreFlag:function(value){
				this.moreFlag=value;
			},
			checkChange:function(user){
				let that=this;
				let isExist = this.checkedUsers.some(item=>item.chatNumber===user.chatNumber);
				if(!isExist){
					if(that.checkedUsers.length>=9){
						this.maxLengthFlag=true;
						return;	
					};
					this.checkedUsers.push(user);
					this.$nextTick(function(){
						that.scrollIntoViewId="u-"+user.chatNumber;
					})
				}else{
					this.checkedUsers =  this.checkedUsers.filter(function(item) {
						return  item.chatNumber!=user.chatNumber
					});
				}
				
			},
			openZhuanFa:function(){
				this.openZhuanFaFlag=true;
			},
			confirmSend:function(){
				let that=this;
				console.log("===选择的用户===",that.checkedUsers);
				console.log("===转发的信息===",that.selectedMessages);
				let lastMsg=that.selectedMessages[that.selectedMessages.length-1];
				let friendList=that.vuex_yyyFriendList;
				for (var i = 0; i < friendList.length; i++) {
					let friend= friendList[i];
					friend.checked=false;
					let isExist = that.checkedUsers.some(item=>item.chatNumber===friend.chatNumber);
					if(isExist){
						that.setLastMsgContent(friend,lastMsg,that.selectedMessages)
					}
				};
				that.$nextTick(function(){
					that.$u.vuex("vuex_yyyFriendList",friendList);
					that.openZhuanFaFlag=false;
					uni.navigateBack();
				});
			},
			cancelZhuanFa:function(){
				this.openZhuanFaFlag=false;
			},
			
			setLastMsgContent:function(friend,message){
				let that=this;
				let formatContent="";
				let contentType=message.contentType;
				let contentObj=message.content;
				switch (contentType+""){
					case "1":
						formatContent=contentObj.text;
						formatContent=formatContent.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
							return face.replace(/^face/g, '')
						});
						break;
					case "2":
						formatContent="[图片]";
						break;
					case "3":
						formatContent="[视频]";
						break;
					case "4":
						formatContent="[语音]";
						break;
					case "7":
						formatContent="[红包]";
						break;	
					case "10":
						formatContent="[聊天记录]";
						break;
					case "11":
						formatContent="[图文]";
						break;
					case "12":
						formatContent="[视频文字]";
						break;
					default:
						formatContent="[其他]";
						break;
				};
				console.log("最后一条信息",formatContent);
				console.log("群号",friend.chatNumber);
				if(friend.chatNumber=="000000"){
					let obj={
						"lastMsgContent":formatContent,
						"messageList":that.selectedMessages,
						"lastMsgTime":message.createTime,
					};
					this.$u.vuex("vuex_fileAssist",obj);
				}else{
					friend.lastMsgContent=formatContent;
					friend.sendTimeStr=message.createTime;
					friend.messageList=that.selectedMessages;
				}
			},
			
		},
	}
</script>

<style lang="scss" scoped>
		.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			flex: 1;
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx;
		}
</style>
