<script setup lang="ts">
import { ChevronLeftIcon } from "@/assets/Icons";
import logo from "@/assets/logo.png";
import { useChatStore, useLayoutStore } from "@/stores";

const chatStore = useChatStore();
const { onlineCount } = storeToRefs(chatStore);
const layoutStore = useLayoutStore();
const { hiddenLeftSidebar, simpleMode } = storeToRefs(layoutStore);
</script>

<template>
  <div class="relative h-screen flex overflow-hidden">
    <div
      class="absolute left-0 top-0 bottom-0 z-10 flex-none w-[200px] h-full flex flex-col bg-white transition-all ease-in-out"
      :class="{
        '-translate-x-[200px]': hiddenLeftSidebar
      }"
    >
      <div
        @click="hiddenLeftSidebar = !hiddenLeftSidebar"
        class="absolute -right-3 translate-y-1/2 top-1/2 z-20 w-[24px] h-[24px] bg-[#0094c526] rounded-full flex items-center justify-center cursor-pointer"
        :class="{
          'rotate-180 -right-8': hiddenLeftSidebar
        }"
      >
        <ChevronLeftIcon class="!w-4 !h-4 text-[#777]" />
      </div>
      <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"
      :class="{ 'ml-[200px]': !hiddenLeftSidebar && !simpleMode }"
    >
      <RouterView />
    </div>
  </div>
</template>
