<script setup lang="ts">
import { defineAsyncComponent, shallowRef } from 'vue'
import { SearchInput } from '@/components/Im/SearchInput'
import ConversationList from '../Conversation/components/ConversationList.vue'
import { Welcome } from '@/components/Im/Welcome'

const MessageComponent = defineAsyncComponent(() => import('@/views/im/Message/index.vue'))

const currentComponent = shallowRef(Welcome) // 默认加载欢迎页组件

const toChatMessage = (id) => {
  console.log('>>>>>>>id', id)
  currentComponent.value = MessageComponent // 加载消息组件
}
</script>

<template>
  <el-container style="height: 100%">
    <el-aside class="chat_conversation_box">
      <!-- 搜索组件 -->
      <SearchInput :searchType="'conversation'" />
      <div class="chat_conversation_list">
        <ConversationList @to-chat-message="toChatMessage" />
      </div>
    </el-aside>
    <el-main class="chat_conversation_main_box">
      <component :is="currentComponent" />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.chat_conversation_box {
  position: relative;
  background: #cfdbf171;
  overflow: hidden;
  min-width: 324px;

  .chat_conversation_list {
    height: calc(100% - 60px);
  }
}

.chat_conversation_main_box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}
</style>
