<template>
    <div class="chat">
        <div class="top-chat-list">
            <top-chat-box></top-chat-box>
        </div>
        <div id="chat-skin" class="chat-box">
            <chat-box></chat-box>
        </div>
        <div class="send-box">
            <send-chat v-show="isShowChat" v-transfer-dom></send-chat>
        </div>
        <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 sendChat from '@/components/modules/sendChat/indexWap'
    import suspensionBox from '@/components/modules/suspension/index'
    export default {
        components: {
            topChatBox,
            chatBox,
            sendChat,
            suspensionBox
        },
        props: {
            isShowChat: {},
        },
        data(){
            return {
              
            }
        },
        mounted(){
        },
        computed: {
            ...mapGetters({
                'userInfo': 'userInfo',
                'channelInfo': 'channelInfo',
            }),
        },
        methods: {
            
        },
        beforeDestroy(){
        },
    }
</script>

<style lang="less" scoped>
    .chat{
        position: relative;
        height: 100%;
        padding-top: 5px;
        padding-bottom: 50px;

        .top-chat-list{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 90;
            width: 100%;
            background: #fff;
        }
        .chat-box{
            height: 100%;
            width: 100%;
            overflow-y: auto;
        }
        .send-box{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50px;
            width: 100%;
        }
    }
</style>