<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">
        <div class="friend-name">{{ friend.name }}</div>
      </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>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Helper from '../../../utils/helper'

export default {
  computed: {
    ...mapState({
      users: state => state.friend.userList,
      currentConversation: state => state.conversation.currentConversation,
      currentMemberList: state => state.group.currentMemberList
    }),
    currentUnMemberList() {
      return this.users.filter(item => this.currentMemberList.filter(data => data.userID === item.esm_id).length === 0)
    }
  },
  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.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>
.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>