<script lang="ts" setup>
import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue'
import NavBar from './NavBar/index.vue'

// 定义异步加载的组件
const ConversationComponent = defineAsyncComponent(
  () => import('@/views/im/Conversation/index.vue')
)

const currentComponent = shallowRef<DefineComponent | null>(ConversationComponent) // 默认加载对话组件

defineOptions({ name: 'IM' })
</script>

<template>
  <div class="app-container">
    <el-container class="chat_container">
      <el-aside class="chat_nav_bar" width="72px">
        <NavBar />
      </el-aside>
      <el-main class="chat_main_box">
        <component :is="currentComponent" />
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  backdrop-filter: blur(5px);

  .chat_container {
    width: 85%;
    height: 95%;
    background: #fff;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: auto auto;
    border-radius: 5px;

    .chat_nav_bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 5px 0 0 5px;
      width: 80px;
      background: #262626;
      overflow: hidden;
    }

    .chat_main_box {
      padding: 0;
    }
  }
}
</style>
