<script setup lang="ts">
import { NImage } from "naive-ui";
import logo from "@/assets/logo.png";
import { useChatStore } from "@/stores";

const chatStore = useChatStore();
const { onlineCount } = storeToRefs(chatStore);
</script>

<template>
  <div class="h-screen flex overflow-hidden">
    <div class="flex-none w-[200px] h-full flex flex-col">
      <router-link class="w-full my-6 cursor-pointer" to="/">
        <NImage class="w-full object-cover" :src="logo" alt="logo" :preview-disabled="true" />
      </router-link>
      <router-link
        class="w-full h-[52px] px-8 flex items-center cursor-pointer" :class="$route.path === '/'
          ? [
            'bg-[rgba(37,99,235,0.04)] text-[#0094c5] border-r-2 border-[#0094c5]',
          ]
          : []
        " to="/"
      >
        聊天
      </router-link>

      <div class="w-full h-full flex flex-col items-center text-[#0094c5]">
        <div class="flex-1 flex flex-col justify-end w-full">
          <div class="w-full p-8 font-bold">
            当前在线人数：{{ onlineCount || 0 }}
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 relative">
      <RouterView />
    </div>
  </div>
</template>
