<template>
  <div class="chat">
    <div class="top-chat-list">
      <top-chat-box></top-chat-box>
    </div>
    <div class="chat-box">
      <chat-box></chat-box>
    </div>
    <client-only>
      <send-box v-show="isShowChat" v-transfer-dom></send-box>
    </client-only>
    <suspension-box v-show="isShowChat" v-transfer-dom></suspension-box>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import topChatBox from './chat/topChat';
import chatBox from './chat/chat';
import sendBox from '@/components/modules/sendBox';
import suspensionBox from '@/components/modules/suspensionBox';
export default {
  name: 'menu-chat-box',
  components: {
    topChatBox,
    chatBox,
    sendBox,
    suspensionBox
  },
  props: {
    isShowChat: {}
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      channelInfo: 'channelInfo'
    })
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0.05rem;
  padding-bottom: 0.5rem;
  .top-chat-list {
    flex: 0 0 auto;
  }
  .chat-box {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    color: var(--chatBox-text-color)
  }
}
</style>
