<template>
  <el-dialog title="添加用户到角色" :visible.sync="isShow" @open="dialogOpen" class="role-user-select-dialog">
    <el-toolbar>
      <el-col :span="10" class="dialog-search-box-l">
        <el-input v-model="searchName" placeholder="请输入用户名/真实姓名" size="medium" @keyup.enter.native="searchClickHandlder"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchClickHandlder" title="查询"></i></span>
      </el-col>
    </el-toolbar>
    <div class="select-user-wrap" v-loading="dataLoading">
      <el-table style="width: 100%" :data="selectUsers" @selection-change="usersSelectionChangeHandler">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="130"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="150"></el-table-column>
        <el-table-column label="所属角色">
          <template slot-scope="scope">
            <span v-for="(role, index) in scope.row.roles" :key="role.roleCode">
              {{index==0?'':', '}}{{role.name}}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" :loading="confirmLoading" :disabled="!selectedRows.length" @click="selectConfirmClickHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    roleCode: {
      type: String,
      default: '',
      required: true
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  data() {
    return {
      selectUsers: [],
      selectedRows: [],
      dataLoading: false,
      confirmLoading: false,
      searchName: ''
    }
  },
  methods: {
    dialogOpen() {
      this.confirmLoading = false
      this.selectedRows = []
      this.selectUsers = []
      this.loadUsersData()
    },
    async loadUsersData() {
      this.dataLoading = true
      let res = await axios.get(`/ui/roles/${this.roleCode}/users`, {params: {optional: true, searchName: encodeURIComponent(this.searchName.trim())}})
      this.dataLoading = false
      this.selectUsers = res.data.status === 1 ? res.data.data : []
    },
    searchClickHandlder() {
      this.loadUsersData()
    },
    usersSelectionChangeHandler(selection) {
      this.selectedRows = selection
    },
    async selectConfirmClickHandler() {
      this.confirmLoading = true
      let ids = this.selectedRows.map(val => val.userName)
      let usernames = ids.join(',')
      let res = await axios.put(`/ui/roles/${this.roleCode}/users`, { usernames })
      util.showMessage(res)
      if (res.data.status === 1) {
        this.isShow = false
        this.$emit('callback')
      }
    }
  }
}
</script>
<style>
.role-user-select-dialog  .el-dialog {
  width:800px;
}
@media (max-width:480px){
  .role-user-select-dialog  .el-dialog {
    width:96%;
  }
}
.role-user-select-dialog .search-icon{
  top:6px;
}
</style>
