<script setup lang="ts">
import { useRoute } from 'vue-router';
import ChatAside from '@/layouts/components/ChatAside/index.vue';
import { useDesignStore } from '@/stores';
import ChatDefault from '../layouts/chatDefaul/index.vue';
import ChatWithId from '../layouts/chatWithId/index.vue';

const route = useRoute();
const designStore = useDesignStore();

const sessionId = computed(() => route.params?.id);
// const sessionId = true;
</script>

<template>
  <div class="conversation-page">
    <!-- 左侧对话列表 -->
    <!--    <ConversationList /> -->
    <!--    <ChatAside v-show="designStore.isCollapseConversationList" /> -->
    <ChatAside />
    <!-- 右侧聊天内容 -->
    <div class="chat-content">
      <ChatDefault v-if="!sessionId" />
      <ChatWithId v-else />
    </div>
  </div>
</template>

<style scoped lang="scss">
.conversation-page {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--header-container-default-height));
  overflow: hidden;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .conversation-page {
    position: relative;
    overflow: hidden;
  }

  .chat-content {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
