<template>
    <div
        ref="messagesContainer"
        class="flex-1 p-5 overflow-y-auto bg-gray-50 message-list-background"
    >
        <a-spin :spinning="loadingMessages" tip="加载消息中...">
            <div v-if="!loadingMessages">
                <!-- 空状态 -->
                <div v-if="!chatStore.messages.length && chatStore.currentFriend" class="text-center text-gray-500 py-10">
                    <MessageOutlined class="text-4xl mb-2" />
                    <p>开始与 {{ chatStore.currentFriend.name }} 对话吧！</p>
                </div>
                
                <!-- 消息列表 -->
                <div
                    v-for="(msg, index) in chatStore.messages"
                    :key="index"
                    class="mb-4 clear-both"
                    :class="msg.senderId === userStore.currentUser.id ? 'text-right' : 'text-left'"
                >
                    <MessageItem :message="msg" :is-sent="msg.senderId === userStore.currentUser.id" />
                </div>
            </div>
        </a-spin>
    </div>
</template>

<script setup>
import { ref, nextTick, watch } from 'vue';
import { useUserStore } from '@/stores/user';
import { useChatStore } from '@/stores/chat';
import { MessageOutlined } from '@ant-design/icons-vue';
import MessageItem from './MessageItem.vue';

const userStore = useUserStore();
const chatStore = useChatStore();

const messagesContainer = ref(null);
const loadingMessages = ref(false);

// 滚动到底部
const scrollToBottom = () => {
    if (messagesContainer.value) {
        nextTick(() => {
            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
        });
    }
};

// 监听消息变化，自动滚动到底部
watch(() => chatStore.messages.length, () => {
    scrollToBottom();
});

// 监听当前好友变化，重新加载消息
watch(() => chatStore.currentFriend, () => {
    scrollToBottom();
});
</script>
<style>
.message-list-background {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="currentColor"/></svg>')
}
</style>