<template>
	<view class="page user-info">
		<view class="header">
			<uni-icons class="btn-side left" type="back" size="30" @click="onNavBack"></uni-icons>
			<text class="title">消息</text>
		</view>
		<view class="content">
			<head-image  :name="userInfo.nickName" :url="userInfo.headImage"
			:size="160" @click="onShowFullImage"></head-image>
			
			<view class="info-item">
				<view class="info-primary">
					<text class="info-username">
						{{userInfo.userName}}
					</text>
					<uni-icons v-show="userInfo.sex==0" class="sex sex-boy" type="person-filled" size="20"
						color="darkblue"></uni-icons>
					<uni-icons v-show="userInfo.sex==1" class="sex sex-girl" type="person-filled" size="20"
						color="darkred"></uni-icons>
				</view>
				<text class="info-text">
					昵称 ：{{userInfo.nickName}}
				</text>
				<text class="info-text">
					签名 ：{{userInfo.signature}}
				</text>
			</view>
		</view>
		<view class="line"></view>
		<view class="btn-group">
			<button class="btn" type="primary" @click="onSendMessage">发消息</button>
		</view>
	</view>
</template>

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

const friendStore = useFriendStore();
const chatStore = useChatStore();
const userInfo = ref({})

		function onShowFullImage(){
				let imageUrl = userInfo.value.headImage;
				if(imageUrl){
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			}
			function onSendMessage() {
				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 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);
				})
			}
			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()
					}
				})
			}
			const friendInfo = computed(() =>{
				let friends = friendStore.friends;
				let friend = friends.find((f) => f.id == userInfo.value.id);
				return friend;
			})

			function onNavBack ()  {
  uni.reLaunch({
    url: "/pages/msg/im/friend/friend"
  })
}
		onLoad((options)=> {
			// 查询用户信息
			loadUserInfo(options.id);
		})
</script>

<style lang="scss" scoped>
	.user-info {
		.content {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.info-primary {
					display: flex;
					margin-bottom: 10rpx;

					.sex {
						display: flex;
						align-items: center;
					}

					.info-username {
						font-size: 40rpx;
						font-weight: 600;
					}
				}
				.info-text {
					margin-bottom: 10rpx;
				}
			}
		}

		.line {
			margin: 20rpx;
			border-bottom: 1px solid #ddd;
		}

		.btn-group {
			margin: 50rpx;

			.btn{
				margin-top: 20rpx;
				background: #5e95ff;
			}
			
		}
	}
	.header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			padding: 5px;
			background-color: white;
			line-height: 50px;
			font-size: 40rpx;
			font-weight: 600;
			border: #dddddd solid 1px;


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

				&.left {
					left: 30rpx;
				}

				&.right {
					right: 30rpx;
				}
			}
		}
</style>