<template>
  <div class="conversation-list">
    <!-- 搜索 -->
    <div class="search-box">
      <el-input
        class="search-input"
        prefix-icon="el-icon-search"
        type="text"
        placeholder="请输入内容"
        maxlength="20"
        clearable
        show-word-limit
        v-model.trim.lazy="searchInfo"
      ></el-input>
    </div>

    <!-- 会话列表 -->
    <div id="conversationsList" class="friends-content scroll" @scroll="handlerScroll">
      <div
        class="friend-info"
        :class="{ selected: message.RemoteId === currentFriendId }"
        v-for="(message, index) in currentInfo"
        :key="index"
        @click="choseFriend(message)"
      >
        <!-- 头像和提示 -->
        <div class="avatar-tip">
          <!-- 头像 -->
          <img
            v-if="message.RemoteId === '1688852792312821'"
            class="img"
            src="@/assets/images/wechatGroup.png"
            :alt="'好友头像'"
          />
          <div class="img avatars" v-else-if="message.AvatarList">
            <img
              :class="'avatar' + '-' + message.AvatarList.length"
              v-for="(avatar, index) in message.AvatarList"
              :key="index"
              :src="avatar"
              alt
            />
          </div>
          <el-avatar v-else shape="square" :size="36" :src="message.Avatar">
            <i class="fa fa-picture-o" aria-hidden="true" title="头像miss"></i>
          </el-avatar>
          <!-- <img v-else class="img" :src="message.Avatar" :alt="'好友头像'" /> -->

          <!-- 未读消息数 -->
          <div
            v-if="message.UnreadCnt && message.UnreadCnt > 0"
            class="tip"
            v-text="message.UnreadCnt < 99 ? message.UnreadCnt : '...'"
            :title="message.UnreadCnt"
          ></div>
        </div>

        <!-- 昵称和消息内容 -->
        <div class="nick-content">
          <!-- 昵称 -->
          <div class="friend-nick ellipsis">
            <span v-text="message.Alias || message.Name"></span>
            <span v-if="message.Suffix" style="color: #67c23a">&nbsp;@{{ message.Suffix }}</span>
          </div>
          <!-- 消息内容 -->
          <div class="chat-content ellipsis" v-text="message.Digest"></div>
        </div>
        <!-- 时间和刷新 -->
        <div class="time-disturb">
          <div v-text="$options.filters.transformTime(message.UpdateTime)"></div>
          <div class="opration-btns">
            <i
              v-if="!message.Members"
              class="fa fa-retweet sigle-fresh"
              aria-hidden="true"
              @click.stop="$parent.getFriendDetail(message)"
            ></i>
          </div>
        </div>
      </div>
      <template v-if="currentInfo.length === 0">
        <div class="current-info-null">搜索不到结果！</div>
      </template>
    </div>

    <div class="friends-bottom">
      共 {{ currentConvs.length }} 个
      <el-button type="text" icon="el-icon-refresh" @click="refreshConversation">刷新</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { TriggerConversationPushTask } from '@/api/webSocketApi'

export default {
  name: 'ConversationList',
  data() {
    return {
      searchInfo: '', // 搜索内容
      maxNumber: 20
    }
  },
  computed: {
    ...mapGetters({
      currentWeChatId: 'conversation/currentWeChatId', // 当前选择的微信
      currentConvs: 'conversation/currentConvs', // 当前的会话列表
      contactsMap: 'conversation/contactsMap', // remoteId对应的信息
      currentFriendId: 'conversation/currentFriendId' // 当前微信选的好友
    }),
    // 当前的信息
    currentInfo() {
      if (this.searchInfo) {
        return this.currentConvs.filter((x) => {
          return x.Name && x.Name.indexOf(this.searchInfo) >= 0
        })
      }
      return this.currentConvs.slice(0, this.maxNumber)
    }
  },
  methods: {
    // 刷新数据
    refreshConversation() {
      if (!this.currentWeChatId) {
        this.$message({
          message: '请先选中微信',
          type: 'warning'
        })
        return
      }
      // 先清除本地数据
      this.$store.commit('conversation/DELETE_CONVERSATIONS', this.currentWeChatId)
      // 再获取最新数据
      TriggerConversationPushTask(this.currentWeChatId)
    },
    // 选择好友或会话
    choseFriend(message) {
      console.log(message)
      let otherInfo = {}
      let remoteId = message.RemoteId

      // 如果有未读消息，设置消息已读
      if (message.UnreadCnt && message.UnreadCnt > 0) {
        let readMsg = {
          WxId: this.currentWeChatId,
          RemoteId: message.RemoteId,
          Id: message.Id
        }
        // 本地设为已读
        this.$store.dispatch('conversation/SetConvReaded', readMsg)
        // 手机上设置消息已读
        this.$store.dispatch('websocket/TriggerMessageReadTask', readMsg)
      }
      // 会话对应的联系人信息
      if (this.contactsMap[remoteId]) {
        otherInfo = this.contactsMap[remoteId]
      }
      let currentContact = {
        wxid: this.currentWeChatId,
        contact: { ...message, ...otherInfo }
      }
      // 设置企业微信团队的头像
      if (remoteId === '1688852792312821') {
        currentContact.contact.Avatar = require('assets/images/wechatGroup.png')
      }
      // 设置coversation页面所选的好友
      this.$store.commit('conversation/SET_CURRENT_FRIENDS', currentContact)
    },
    // 滚动加载
    handlerScroll() {
      const st = document.getElementById('conversationsList').scrollTop
      const ch = document.getElementById('conversationsList').clientHeight
      const sh = document.getElementById('conversationsList').scrollHeight
      if (st + ch + 2 >= sh) {
        if (this.maxNumber <= this.currentConvs.length) {
          this.maxNumber = this.maxNumber + 5
        }
      }
    }
  }
}
</script>

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

  .friends-bottom {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: solid $border-color-base 2px;
  }
  .search-box {
    padding: 5px;
    background-color: $bg-color-content-base;
  }
  .friends-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    background-color: $bg-color-content-base;
    margin-bottom: 5px;

    .friend-info {
      height: 50px;
      width: 260px;
      overflow: hidden;
      min-height: 50px;
      display: flex;
      cursor: pointer;
      margin-top: 2px;

      .avatar-tip {
        height: 50px;
        width: 50px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 36px;
          height: 36px;
          margin: 5px;
          font-size: 14px;
        }
        .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%;
          }
        }
        .tip {
          border: solid red 1px;
          width: 20px;
          height: 20px;
          position: absolute;
          top: 0px;
          right: 0px;
          background: red;
          border-radius: 10px;
          color: white;
          text-align: center;
        }
      }

      .nick-content {
        width: 140px;
        display: flex;
        flex-direction: column;
        align-self: center;
        font-size: 12px;
        .chat-content {
          max-width: 100%;
          height: 20px;
          line-height: 20px;
        }
        .friend-nick {
          max-width: 100%;
          line-height: 20px;
          @include ellipsis(2);
        }
      }

      .time-disturb {
        width: 70px;
        min-width: 70px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        .sigle-fresh:hover {
          color: #41c0fc;
        }
        .opration-btns {
          display: flex;
          justify-content: space-around;
          width: 40px;
          // border: solid red 1px;
        }
      }

      &:hover {
        background-color: #dedcdb;
      }
    }
    .current-info-null {
      text-align: center;
      margin-top: 10px;
    }
    .selected {
      background-color: #c8c6c6;
      &:hover {
        background-color: #c8c6c6;
      }
    }
  }
}
</style>
