<template>
  <!-- 顶部导航栏 -->
  <Navbar />

  <div class="home-container">


    <div id="mainContent" class="main-content">
      <!-- 左侧主空间 -->
      <div class="left-content">
        <router-view />
      </div>
    </div>
    <!-- 语音面板 -->
    <phonePanel />

    <!-- 消息按钮 -->
    <GlobalMessageButton />

    <!-- 右下角用户头像框 -->
    <UserProfile />
  </div>
</template>

<script setup>
import { onMounted, watchEffect } from 'vue';
import Navbar from '../../components/navBar.vue';
import UserProfile from '../../components/userProfile.vue';
import { userInfoStore } from '@/store/user';
import { onlineSocketStore } from '@/store/Online.ts';
import { getUserInfo } from '@/api/user';
import GlobalMessageButton from '@/components/GlobalMessageButton.vue';
import { messageStore } from '@/store/message.ts';
import phonePanel from '@/components/phonePanel.vue';
import { initDB } from '@/functions/historyMessages';

const userinfo = userInfoStore();
const socket = onlineSocketStore();
const message = messageStore();

onMounted(() => {
  getUserInfo()

  // 使用 watchEffect 监听 u_id 是否为空
  watchEffect(() => {
    if (userinfo.user.u_id) { // 如果 u_id 不为空
      console.log('User ID is available:', userinfo.user.u_id);
      socket.connect(userinfo.user.id); // 建立 WebSocket 连接
      message.to = userinfo.user.id; // 设置消息发送者为当前用户 ID

      // voice.connect(userinfo.user.u_id); // 建立语音通话连接
    }
  });

  initDB(); // 初始化历史消息数据库
})



</script>

<style scoped>
.home-container {
  position: relative;
  top: 0px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.main-content {
  position: relative;
  left: 0;
  display: flex;
  flex: 1;
  margin-top: 72px;

}

.left-content {
  flex: 1;
  padding: 20px;
}
</style>