<template>
  <div class="chat">
    <div class="top-chat-box">
      <top-chat-list></top-chat-list>
    </div>
    <div class="chat-box">
      <chat-list></chat-list>
    </div>
    <div class="chat-send">
      <client-only>
        <send-box></send-box>
      </client-only>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import topChatList from './chatList/topChatList';
import chatList from './chatList/chatList';
import sendBox from '../sendBox';

export default {
  name: 'pc-chat-box',
  components: {
    topChatList,
    chatList,
    sendBox
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      channelInfo: 'channelInfo'
    })
  }
};
</script>

<style lang="less" scoped>
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-chat-box {
    flex: 0 0 auto;
  }
  .chat-box {
    position: relative;
    flex: auto;
    height: 0;
    width: 100%;
  }
  .chat-send {
    flex: 0 0 auto;
    padding: 10px;
    height: 140px;
  }
}
</style>
