<template>
  <div class="layout-no-cols member-role-info-page">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <!-- <el-position></el-position> -->
    <div class="margin-top-8">
      <div class="panel-card member-role-info">
        <h4>基本信息</h4>
        <el-row class="info-title f16">
          <el-col :span="8" class="th">
            <i class="fa fa-user-o gray" aria-hidden="true"></i> 角色名</el-col>
          <el-col :span="8" class="th">
            <i class="fa fa-tumblr-square gray" aria-hidden="true"></i> 角色代码</el-col>
          <el-col :span="8" class="th">
            <i class="fa fa-commenting-o gray" aria-hidden="true"></i> 备注</el-col>
        </el-row>
        <div class="divider"></div>
        <el-row class="info-content gray">
          <el-col :span="8">
            <span>{{roleInfo.roleName}}</span>
          </el-col>
          <el-col :span="8">
            <span>{{roleInfo.roleCode}}</span>
          </el-col>
          <el-col :span="8">
            <span>{{roleInfo.memo}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="panel-card operate-box">
        <el-row class="operate">
          <el-col :span="12">
            <div style="line-height: 60px; padding-left:20px;">
              <el-button class="dashed" @click="addMember2RoleClickHandler" priv="Member.Role.AddUser">
                <i class="fa fa-plus"></i>添加会员到角色
              </el-button>
              <!-- <el-button class="dashed" @click="delMember4RoleClickHandler(selectedRows)" :disabled="selectedRows.length===0">
                <i class="fa fa-minus"></i>从角色中删除会员
              </el-button> -->
            </div>
          </el-col>
          <el-col :span="8" class="search-box-r tool-search-box-r">
            <el-input v-model="search.key" placeholder="请输入用户名/真实姓名/Email" class="search-bar-algin-toolbar" @keyup.enter.native="searchClickHandlder"></el-input>
            <span class="search-icon">
              <i class="fa fa-search" @click="searchClickHandlder" title="查询"></i>
            </span>
          </el-col>
        </el-row>
        <el-table class="role-users" style="padding:0;" ref="refTable" :data="users" :data-read-url="getData" :page-size="10" @selection-change="onSelectionChange">
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column prop="userName" width="200" show-overflow-tooltip label="会员名"></el-table-column>
          <el-table-column prop="realName" width="150" show-overflow-tooltip label="真实姓名"></el-table-column>
          <el-table-column prop="email" show-overflow-tooltip label="电子邮箱" width="200"></el-table-column>
          <el-table-column prop="roleNames" show-overflow-tooltip label="所属角色"></el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button @click.stop="delMember4RoleClickHandler([scope.row])" type="text" title="从角色中删除会员" priv="Member.Role.RemoveUser">
                <i class="fa fa-remove f16"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <member-list-dialog :role-code="roleCode" :show.sync="isShowModal" @callback="loadRoleMemberData">
    </member-list-dialog>
  </div>
</template>
<script>

import util from '@src/common/util.js'
import memberListDialog from './memberListDialog.vue'
export default {
  components: {
    'member-list-dialog': memberListDialog
  },
  props: {
    roleCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      roleTable: [
        { key: '角色名：', value: '' },
        { key: '备注：', value: '' }
      ], //  角色详细信息
      users: [], //  角色会员列表
      search: { key: '' }, //  用户输入查询变量
      selectedRows: [], //  选中角色
      isShowModal: false,
      roleInfo: {}
    }
  },
  created() {
    this.initRoleInfo()
    // this.loadRoleMemberData()
  },
  methods: {
    async initRoleInfo() {
      this.dialogLoading = true
      let res = await axios.get(`/ui/memberroles/${this.roleCode}`)
      this.dialogLoading = false
      if (res.data.status === 1) {
        this.roleInfo = res.data.data
      }
    },
    // 添加用户到角色
    addMember2RoleClickHandler() {
      this.isShowModal = true
    },
    /**
       *从角色中删除会员
       */
    async delMember4RoleClickHandler(rows) {
      let rowIDs = []
      if (rows.length === 0) {
        this.$alert('请至少选择一条数据', '警告', {
          type: 'warning'
        })
        return
      }
      rows.forEach(function (row) {
        rowIDs.push(row.ID)
      })
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(
          `/ui/memberroles/${this.roleCode}/delmember4role`,
          { params: { memberIDs: rowIDs.join() } }
        )
        util.showMessage(res)
        if (res.data.status === 1) {
          this.loadRoleMemberData()
          this.selectedRows = []
        }
      } catch (e) {

      }
    },
    // 角色会员选中事件
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 角色会员查询事件
    searchClickHandlder() {
      this.loadRoleMemberData()
    },
    // 加载角色会员列表
    getData() {
      return ['/ui/memberroles/rolemember', {
        params: {
          roleCode: this.roleCode,
          searchName: encodeURIComponent(this.search.key.trim())
        }
      }]
    },
    loadRoleMemberData() {
      this.$refs.refTable.getData()
    }
  }
}
</script>
<style scope>
  .member-role-info .th {font-size: 14px;}
  .member-role-info .th i {padding-right: 6px;}
  .member-role-info-page .member-role-info {
    padding: 30px;
  }

  .member-role-info-page .member-role-info h4 {
    font-weight: 600;
  }

  .member-role-info-page .member-role-info .info-content {
    padding: 20px;
  }

  .member-role-info-page .member-role-info .info-title {
    padding: 20px;
    font-weight: 600;
  }

  .member-role-info-page .member-role-info .divider {
    height: 2px;
    border-bottom: 1px solid #eee;
  }

  .member-role-info-page .gray {
    color: #c9c9c9;
  }

  .member-role-info-page td {
    color: #949ba5;
  }

  .member-role-info-page .operate {
    height: 60px;
    background: #f8f8f8;
    border-radius: 2px;
  }

  .member-role-info-page th,
  .member-role-info-page .info-title {
    color: #6D6B6A
  }

  .member-role-info-page .operate-box {
    padding: 20px;
  }

  .member-role-info-page .el-table {
    box-shadow: none;
  }

  .member-role-info-page .el-table__header th {
    background: transparent !important;
  }

  .member-role-info-page .el-toolbar i {
    font-size: 12px;
  }
  .tool-search-box-r {margin-top: 5px;margin-right: 15px;}
</style>
