<template>
  <div>
    <el-button type="primary" v-permission="'group:CreateMembership'" style="margin-bottom: 10px;" @click="toAddUser">添加组成员</el-button>
    <el-table
      key="addedUserTable"
      :data="addedUserList"
      class="table-height-auto"
    >
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column
        prop="userName"
        label="用户登录名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="displayName"
        label="显示名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="joinTime"
        label="加入时间"
        min-width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="80">
        <template slot-scope="scope">
          <el-button v-permission="'group:DeleteMembership'" type="text" @click="removeUser(scope.$index)" >移出用户组</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加组成员 -->
    <el-dialog :append-to-body="true" style="min-height: 400px" title="添加组成员" :modal="true" top="100px" :close-on-click-modal="false" v-if="showAddUser" :visible.sync="showAddUser">
      <div slot="title" class="custom-el-dialog-header-title">
        <span>添加组成员</span>
        <div class="plain-button" @click="saveMembership">
          <i class="font_family icon-save plain-button-icon"></i><span class="plain-button-text">&nbsp;保存</span>
        </div>
      </div>
      <el-table
        ref="addUserTable"
        :data="availableUserList"
        class="table-height-auto"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column
          prop="id"
          label="用户名"
          min-width="250">
        </el-table-column>
        <el-table-column
          prop="displayName"
          label="显示名称"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="comments"
          label="备注"
          min-width="180">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'GroupUserSelector',
  props: {
    groupId: {
      required: true
    }
  },
  data () {
    return {
      showAddUser: false,
      allUserList: [],
      addedUserList: []
    }
  },
  computed: {
    availableUserList: function () {
      const groupSet = new Set(this.addedUserList.map(u => u.id))
      return this.allUserList.filter(g => !groupSet.has(g.id))
    }
  },
  created () {
  },
  mounted () {
    // 加载用户组成员
    this.loadGropUser()
  },
  methods: {
    loadAllUser () {
      this.$http.get(this.$apiUrl('listUser'))
        .then(response => {
          this.allUserList = response.data.data
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },
    loadGropUser () {
      // 加载指定用户组的成员信息
      this.$http.get(this.$apiUrl('getUsersOfGroup') + `?id=${this.groupId}`).then((response) => {
        this.addedUserList = response.data.data
      }).catch((response) => {
        console.log('获取用户组列表失败', response)
        this.$message.error(response.message)
      })
    },
    toAddUser () {
      this.showAddUser = true
      if (this.allUserList.length === 0) {
        this.loadAllUser()
      }
    },
    // 保存添加组
    saveMembership () {
      const selectionUser = this.$refs.addUserTable.selection
      const userId = selectionUser.map(group => group.id)
      if (userId.length === 0) {
        return this.$message.warning('请选择用户')
      }
      // this.$qs.stringify(this.userForm)

      this.$http.post(this.$apiUrl('createMembershipOfUser'), { groupId: this.groupId, userId })
        .then(response => {
          this.$message.success('添加组成员成功')
          this.addedUserList.push(...selectionUser)
          this.showAddUser = false
          // console.log(this.addedUserList)
        })
        .catch(error => {
          this.$message.error(`添加组成员失败! ${error.message}`)
        })
        .always(() => {
        })
    },
    removeUser (index) {
      const userId = [this.addedUserList[index].id]
      const url = this.$apiUrl('deleteMembershipOfUser') + '?' + this.$qs.stringify({ groupId: this.groupId, userId })
      this.$http.delete(url)
        .then(response => {
          this.$message.success('移出用户组成功')
          this.addedUserList.splice(index, 1).map(group => group.id)
          console.log(this.addedUserList)
        })
        .catch(error => {
          this.$message.error(`移出用户组失败! ${error.message}`)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '../../style/mixin';
</style>
