<script lang="tsx">
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';

import HistoryConversationDrawer from './components/history-conversation-drawer/index.vue';
import ConversationDetail from './components/conversation-detail/index.vue';
import ConversationCreate from './components/created/index.vue';

export default {
  setup(props, { emit, expose }) {
    const route = useRoute();

    const historyConversationDrawerRef = ref(null);

    const conversationId = computed(() => {
      return route.params.conversationId;
    });

    return () => (
      <div class="chat-wrap rounded-12px w-full h-full">
        {conversationId.value ? <ConversationDetail /> : <ConversationCreate />}

        {/**历史对话入口 */}
        <div
          class="history-conversation-btn cursor-pointer bg-#fff flex flex-col justify-center w-28px px-10px py-8px"
          onClick={() => historyConversationDrawerRef.value.showDrawer()}
        >
          <span class="s1">历史对话</span>
        </div>
        <HistoryConversationDrawer ref={historyConversationDrawerRef} />
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
