<template>
  <div class="conversation-chats">
    <!-- 好友信息 -->
    <div class="chats-title">
      <!-- 头像 -->
      <img v-if="currentFriend.Avatar" class="avatar" :src="currentFriend.Avatar" alt="头像" />
      <div class="avatar avatars" v-else-if="currentFriend.AvatarList">
        <img
          :class="'avatar' + '-' + currentFriend.AvatarList.length"
          v-for="(avatar, index) in currentFriend.AvatarList"
          :key="index"
          :src="avatar"
          alt
        />
      </div>
      <img v-else class="avatar" src="../../../../assets/svg/conversation-image-error.svg" alt="头像" />
      <!-- 昵称 -->
      <span class="nick-name ellipsis" v-text="currentFriend.Name"></span>
      <!-- 群人数 -->
      <div
        class="members-number"
        v-if="currentFriend.Members"
        v-text="' ( ' + currentFriend.Members.length + ' ) '"
      ></div>
      <!-- 性别 -->
      <div v-if="currentFriend.Gender" class="gender" v-text="currentFriend.Gender"></div>
      <!-- 职务 -->
      <div v-if="currentFriend.Job" class="gender" v-text="currentFriend.Job"></div>
    </div>

    <!-- 输入/输出 -->
    <div class="chats-content">
      <ShowChats class="show-chats" />
      <div class="input-window">
        <ToolsBar />
        <AnswerWindow />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ToolsBar from './ToolsBar'
import AnswerWindow from './AnswerWindow'
import ShowChats from './ShowChats'

export default {
  data() {
    return {}
  },
  components: {
    ToolsBar,
    AnswerWindow,
    ShowChats
  },
  computed: {
    ...mapGetters({
      currentFriend: 'conversation/currentFriend'
    })
  }
}
</script>

<style lang="scss" scoped>
.conversation-chats {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: solid $border-color-base 2px;

  .chats-title {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: solid $border-color-base 2px;

    .avatar {
      width: 30px;
      height: 30px;
      margin-left: 5px;
    }
    .avatars {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-evenly;
      background: $brand-color-9;
      .avatar-1 {
        width: 100%;
        height: 100%;
      }
      .avatar-2,
      .avatar-3 {
        width: 45%;
        height: 45%;
      }
      .avatar-4,
      .avatar-5,
      .avatar-6,
      .avatar-7,
      .avatar-8,
      .avatar-9 {
        width: 30%;
        height: 30%;
      }
    }
    .nick-name,
    .gender,
    .address,
    .members-number {
      font-size: 14px;
      margin-left: 10px;
      //   color: white;
    }
    .nick-name {
      max-width: 250px;
    }
  }

  .chats-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: $bg-color-content-base;

    .input-window {
      height: 35%;
      background: white;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>

