<template>
  <div class="friend-item-container">
    <el-row v-for="friend in currentUnMemberList" :key="friend.id" style="margin-bottom: 5px" class="friend-list"
            type="flex" align="middle" justify="center" :gutter="16">
      <el-col :span="6">
        <avatar class="friend-avatar" :src="friend.avatar"/>
      </el-col>
      <el-col :span="14">
        <el-tooltip placement="top" :key="friend.id" :content="friend.name">
          <div class="friend-name text-ellipsis">{{ friend.name }}</div>
        </el-tooltip>
      </el-col>
      <el-col :span="4">
        <div class="btn-add-member" :title="`添加:${friend.name}`" @click="addGroupMember(friend)">
          <span class="tim-icon-friend-add"></span>
        </div>
      </el-col>
    </el-row>
    <el-button v-show="currentUnMemberList.length < currentUnMemberTotal" style="width: inherit;margin: 0 auto" long
               type="text"
               @click="$store.dispatch('getGroupUnMemberList', group)">加载更多
    </el-button>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Helper from '../../../utils/helper'
import {Button, Tooltip} from 'element-ui'

export default {
  components: {
    ElTooltip: Tooltip,
    ElButton: Button
  },
  props: {
    group: {
      type: String, required: true
    }
  },
  computed: {
    ...mapState({
      currentConversation: state => state.conversation.currentConversation,
      currentMemberList: state => state.group.currentMemberList,
      currentUnMemberList: state => state.group.currentUnMemberList,
      currentUnMemberTotal: state => state.group.currentUnMemberMeta.total
    }),
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    addGroupMember(user) {
      const groupID = this.currentConversation.conversationID.replace('GROUP', '')
      Helper.joinGroup(groupID, user.esm_id).then(() => {
        this.$store.commit('showMessage', {message: `群成员：${user.name}，加群成功`, type: 'success'})
        this.tim.getGroupMemberProfile({groupID, userIDList: [user.esm_id]})
            .then(({data: {memberList}}) => {
              this.$store.commit('updateCurrentMemberList', memberList)
              this.$store.commit('deleteGroupUnMember', user.esm_id)
            })
      })
      // this.tim
      //     .addGroupMember({
      //       groupID,
      //       userIDList: [userID]
      //     })
      //     .then((imResponse) => {
      //       const {
      //         successUserIDList,
      //         failureUserIDList,
      //         existedUserIDList
      //       } = imResponse.data
      //       if (successUserIDList.length > 0) {
      //         this.$store.commit('showMessage', {message: `群成员：${successUserIDList.join(',')}，加群成功`, type: 'success'})
      //         this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
      //             .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
      //       }
      //       if (failureUserIDList.length > 0) {
      //         this.$store.commit('showMessage', {message: `群成员：${failureUserIDList.join(',')}，添加失败！`, type: 'error'})
      //       }
      //       if (existedUserIDList.length > 0) {
      //         this.$store.commit('showMessage', {message: `群成员：${existedUserIDList.join(',')}，已在群中`})
      //       }
      //     })
      //     .catch(error => {
      //       this.$store.commit('showMessage', {type: 'error', message: error.message})
      //     })
    }
  },
}
</script>

<style lang="stylus" scoped>
.friend-item-container
  width: 200px;
  max-height: 60vh;
  overflow-x: hidden
  overflow-y scroll

  &::-webkit-scrollbar
    width: 0 !important


.btn-add-member
  width 30px
  height 30px
  font-size 28px
  text-align center
  line-height 32px
  cursor pointer
  float right

  &:hover
    color $light-primary
</style>