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

<script>
import { mapGetters } from 'vuex';
import topChatBox from './chat/topChat';
import chatBox from './chat/chat';
export default {
  name: 'vertical-chat-box',
  components: {
    topChatBox,
    chatBox
  },
  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%;
  width: 90%;
  .top-chat-list {
    flex: 0 0 auto;
  }
  .chat-list {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
}
</style>
