<template>
  <div class="customer-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.lazy.trim="searchInfo"
      ></el-input>
    </div>

    <!-- 我的客户列表 -->
    <div id="customerList" class="friends-content scroll" @scroll="handlerScroll">
      <!-- 会话|通讯录|群聊|搜索结果 -->
      <div
        class="friend-info"
        :class="{ selected: message.RemoteId === currentFriendId }"
        v-for="(message, index) in currentInfo"
        :key="index"
        @click="choseCustomer(message)"
      >
        <!-- 头像 -->
        <el-avatar shape="square" :size="36" :src="message.Avatar">
          <i class="fa fa-picture-o" aria-hidden="true" title="头像miss"></i>
        </el-avatar>

        <!-- 昵称和后缀 -->
        <div class="friend-nick">
          <span v-text="message.Alias || message.Name"></span>
          <span v-if="message.Suffix" style="color: #67c23a">&nbsp;@{{ message.Suffix }}</span>
        </div>

        <!-- 获取详情 -->
        <div class="opration-btns">
          <i class="fa fa-retweet sigle-fresh" aria-hidden="true" @click.stop="$parent.getFriendDetail(message)"></i>
        </div>
      </div>
    </div>

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

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

export default {
  data() {
    return {
      searchInfo: '', // 搜索内容
      maxNumber: 20
    }
  },
  computed: {
    ...mapGetters({
      currentWeChatId: 'conversation/currentWeChatId', // 当前选择的微信
      currentCustomers: 'conversation/currentCustomers', // 当前的客户
      currentFriendId: 'conversation/currentFriendId' // 当前微信选的好友
    }),
    // 当前的信息
    currentInfo() {
      if (this.searchInfo) {
        return this.currentCustomers.filter((x) => {
          return x.Name.indexOf(this.searchInfo) >= 0 || x.Alias.indexOf(this.searchInfo) >= 0
        })
      }
      return this.currentCustomers.slice(0, this.maxNumber)
    }
  },
  methods: {
    // 刷新数据
    refreshCustomer() {
      if (!this.currentWeChatId) {
        this.$message({
          message: '请先选中微信',
          type: 'warning'
        })
        return
      }
      this.$store.dispatch('conversation/RemoveAllCustomersByWechatId', this.currentWeChatId)
      TriggerCustomerPushTask(this.currentWeChatId)
    },
    // 选择好友或会话
    choseCustomer(message) {
      let currentContact = {
        wxid: this.currentWeChatId,
        contact: { ...message }
      }
      // 设置coversation页面所选的好友
      this.$store.commit('conversation/SET_CURRENT_FRIENDS', currentContact)
    },
    // 滚动加载
    handlerScroll() {
      const st = document.getElementById('customerList').scrollTop
      const ch = document.getElementById('customerList').clientHeight
      const sh = document.getElementById('customerList').scrollHeight
      if (st + ch + 2 >= sh) {
        if (this.maxNumber <= this.currentCustomers.length) {
          this.maxNumber = this.maxNumber + 5
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-list {
  width: 270px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 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 {
      width: 100%;
      height: 50px;
      min-height: 50px;
      overflow: hidden;
      cursor: pointer;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .friend-nick {
        width: 170px;
        // width: calc(100% -80px);
        line-height: 20px;
        @include ellipsis(2);
      }

      .opration-btns {
        display: flex;
        justify-content: space-around;
        width: 40px;
      }

      &:hover {
        background-color: #dedcdb;
      }
    }

    .selected {
      background-color: #c8c6c6;
      &:hover {
        background-color: #c8c6c6;
      }
    }
  }

  .friends-bottom {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: solid $border-color-base 2px;
  }
}
</style>
