<template>
  <div>
    <el-dialog title="会员列表" :visible.sync="isShow" @open="beforeDialogOpen" class="member-list-dlg">
      <!-- <div :style="{'margin':'10px 0px 0px 10px'}">
        <el-input v-model="search.key" placeholder="请输入用户名/真实姓名/Email" :style="{width:'30%'}">
          <el-button icon="search" slot="append" title="查询" @click="searchClickHandlder"></el-button>
        </el-input>
      </div> -->
      <el-col :span="10" class="dialog-search-box-l">
        <el-input v-model="search.key" placeholder="请输入用户名/真实姓名/Email" 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-table ref="refMembersTable" :data="members" :data-read-url="loadMemberList" :page-size="10" tooltip-effect="dark" @selection-change="onSelectionChange" style="width:100%">
        <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column prop="userName" width="180" show-overflow-tooltip label="会员名"></el-table-column>
        <el-table-column prop="realName" width="180" show-overflow-tooltip label="真实姓名"></el-table-column>
        <el-table-column prop="email" show-overflow-tooltip label="电子邮箱"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="confirmLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import util from '@src/common/util.js'
export default {
  props: { roleCode: String, show: Boolean },
  data() {
    return {
      search: { key: '' }, //  添加会员弹出框用户输入查询变量
      members: [], //  未选角色列表
      selectedRows: [], // 选中的会员
      confirmLoading: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    // 添加会员到指定角色提交事件
    async confirm() {
      let rowIDs = []
      if (!this.selectedRows.length) {
        this.$alert('请至少选择一条数据', '警告', {
          type: 'warning'
        })
        return
      }
      this.confirmLoading = true
      this.selectedRows.forEach(function(row) {
        rowIDs.push(row.ID)
      })
      try {
        let params = { memberIDs: rowIDs.join() }
        let res = await axios.put(
          `/ui/memberroles/${this.roleCode}/addmember2role`,
          params
        )
        this.confirmLoading = false
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.isShow = false
          this.$emit('callback')
        }
      } catch (e) {
        this.confirmLoading = false
        // util.showErrorNotification(e)
      }
    },
    beforeDialogOpen() {
      this.confirmLoading = false
      this.search.key = ''
      this.selectedRows = []
      this.$nextTick(() => {
        this.loadMemberData()
      })
    },
    // 查询事件
    searchClickHandlder() {
      this.loadMemberData()
    },
    // 会员选中事件
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 加载非角色会员列表
    loadMemberList() {
      return ['/ui/memberroles/memberlist', {
        params: {
          roleCode: this.roleCode,
          searchName: encodeURIComponent(this.search.key.trim())
        }
      }]
    },

    // 刷新表格数据
    loadMemberData() {
      this.$refs.refMembersTable.getData()
    }
  }
}
</script>
<style>
.member-list-dlg .el-dialog{
  width:800px;
}
.member-list-dlg .el-dialog .search-icon {
  top: 8px;
  right: 15px;
}
@media (max-width:480px){
  .member-list-dlg .el-dialog{
    width:96%;
  }
}
</style>
