<template>
	<view class="tab-page friend">
		<view class="header">
			<text class="btn-side left" @click="onNavBack">取消</text>
			<text class="title">选择联系人</text>
			<text :class="['btn-side', 'right', selectedIds.length ? 'selected':'']" @click="finish">完成{{ selectedIds.length ? `(${selectedIds.length})`:''}}</text>
		</view>
	<Search @search="search" />
	<view class="friend-items">
		<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
			<view v-for="(friend,index) in searchFriends" :key="index">
				<friend-item :friend="friend" :checked="selectedIds.includes(friend.id)" @tap="checked(friend)"></friend-item>
			</view>
		</scroll-view>
	</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import friendItem from "./components/friend-item.vue";
	import http from '@/common/request/im.js';
	import { useFriendStore } from '@/common/store/im/friendStore.js';
	import { useChatStore } from "@/common/store/im/chatStore.js";
	import Search from "../components/Search.vue";
	import { onLoad } from '@dcloudio/uni-app';

	const friendStore = useFriendStore();
	const chatStore = useChatStore();

	const selectedIds = ref([])
	const userInfo = ref({})
	const searchFriends = ref([])

	const friendInfo = computed(() =>{
		let friends = friendStore.friends;
		let friend = friends.find((f) => f.id == userInfo.value.id);
		return friend;
	})

	onLoad(() => {
		searchFriends.value = friendStore.friends
	})

	function onNavBack () {
	uni.reLaunch({
		url: "/pages/msg/im/chat/chat"
	})
	}

	function checked(user) {
		if (selectedIds.value.includes(user.id)) {
			selectedIds.value.splice(
				selectedIds.value.findIndex((item) => item === user.id),
				1
			);
		} else {
			selectedIds.value.push(user.id);
		}
	}

	function finish() {
		if (selectedIds.value.length === 1) {
			loadUserInfo(selectedIds.value[0])		
		} else {
			uni.navigateTo({
				url: "/pages/msg/im/group/group-edit?userIds=" + selectedIds.value.toString()
			})
		}
	}

	function loadUserInfo(id) {
		http({
			url: "/user/find/" + id,
			method: 'GET'
		}).then((user) => {
			userInfo.value = user;
			// 如果发现好友的头像和昵称改了，进行更新
			if ((userInfo.value.headImageThumb != friendInfo.value.headImage ||
			userInfo.value.nickName != friendInfo.value.nickName)) {
				updateFriendInfo()
			} else {
				openChat()
			}
		})
	}

	function updateFriendInfo() {
		// store的数据不能直接修改，深拷贝一份store的数据
		let friend = JSON.parse(JSON.stringify(friendInfo.value));
		friend.headImage = userInfo.value.headImageThumb;
		friend.nickName = userInfo.value.nickName;
		http({
			url: "/friend/update",
			method: "PUT",
			data: friend
		}).then(() => {
			// 更新好友列表中的昵称和头像
			friendStore.updateFriend(friend);
			// 更新会话中的头像和昵称
			friendStore.updateChatFromFriend(userInfo.value);
			openChat()
		})
	}

	function openChat() {
		let chat = {
			type: 'PRIVATE',
			targetId: userInfo.value.id,
			showName: userInfo.value.nickName,
			headImage: userInfo.value.headImage,
		};
		chatStore.openChat(chat);
		uni.navigateTo({
			url:"/pages/msg/im/chat/components/chat-box?chatIdx=0"
		})
	}

	function search(text) {
		if (text) {
			searchFriends.value = friendStore.friends.filter(friend => {
				return friend.nickName.includes(text)
			})
		} else {
			searchFriends.value = friendStore.friends
		}
	}
	
</script>

<style lang="scss" scoped>
	.friend {
		position: relative;
		display: flex;
		flex-direction: column;
		background: #fff;
		
		.friend-tip{
			position: absolute;
			top: 400rpx;
			padding: 50rpx ;
			text-align: center;
			line-height: 50rpx;
			text-align: left;
			color: darkblue;
			font-size: 30rpx;
		}
		
		.nav-bar {
			margin: 5rpx;
			display: flex;
			align-items: center;
			background-color: white;
			.nav-search{
				flex:1;
			}
			
			.nav-add {
				line-height: 56px;
				cursor: pointer;
			}
		}

		.friend-items {
			flex: 1;
			padding: 0;
			overflow: hidden;
			position: relative;
			
			.scroll-bar {
				height: 100%;
			}
		}
	}
	.header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			padding: 10px;
			background-color: white;
			line-height: 50px;
			font-size: 35rpx;
			font-weight: 600;
			color:#203350;
			border-bottom: 1px solid #eee;


			.btn-side {
				position: absolute;
				line-height: 40rpx;
				font-size: 27rpx;
				cursor: pointer;

				&.left {
					left: 30rpx;
				}

				&.right {
					right: 30rpx;
					padding: 2px 10px;
					border-radius: 4px;
					color: #b3b7c0;
					background-color: #f4f6f8;
					font-weight: 500;
				}

				&.selected{
					background: #5e95ff;
					color: #fff;
				}
			}
		}
</style>