<template>
  <div class="interact-box" v-if="chatMenu.length">
    <div class="interact-tab">
      {{ chatMenu[0].menuName }}
    </div>
    <div class="interact-list">
      <chat-box></chat-box>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
const chatBox = resolve => require(['@/components/modules-pc/chatBox'], resolve);
export default {
  name: 'pc-interact-box',
  components: {
    chatBox
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      menuList: 'menuList'
    }),
    chatMenu() {
      return this.menuList.filter(obj => {
        return obj.menuType === 'chat';
      });
    }
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.interact-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .interact-tab {
    flex: 0 0 auto;
    position: relative;
    height: 64px;
    line-height: 64px;
    font-size: 18px;
    border-bottom: 2px solid #27282e;
    text-align: center;
    &:after {
      content: '';
      display: block;
      position: absolute;
      left: calc(50% - 20px);
      bottom: 0;
      width: 40px;
      height: 4px;
      background: var(--main-color);
      border-radius: 4px;
    }
  }
  .interact-list {
    flex: 1;
    height: 0;
  }
}
</style>
