<!--
 * @Author: your name
 * @Date: 2020-09-14 16:53:49
 * @LastEditTime: 2020-10-16 17:14:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /consoles_program/Users/xiawei/gdy/web-live/components/modules-pc/chatBox/index.vue
-->
<template>
  <div class="chat">
    <div class="top-chat-box">
      <top-chat-list></top-chat-list>
    </div>
    <div class="chat-box">
      <div class="chat-box-list">
        <chat-list></chat-list>
      </div>
    </div>
    <div class="chat-send">
      <send-box></send-box>
    </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: 1;
    height: 0;
    width: 100%;
    .chat-box-list {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
  .chat-send {
    flex: 0 0 auto;
    padding: 10px;
    height: 140px;
  }
}
</style>
