<template>
  <div class="select-user-container">
      <div class="operate-container">
          <el-link type="default" @click="$emit('cancle')">取消</el-link>
          <el-link type="primary" style="float:right;" @click="$emit('confirm',multipleSelection)">确定</el-link>
      </div>

      <div class="search-container">
        <el-input placeholder="请输入搜索人员姓名"  v-model="listQuery.name" @keyup.enter="getList" style="width: calc( 100% - 88px);margin-right:15px;" size="mini"></el-input>
        <el-button type="default" size="mini" icon="el-icon-search" @click="getList">搜索</el-button>
      </div>

      <el-table ref="mainTable2"   :data="tableData" 
        highlight-current-row  @selection-change="handleSelectionChange" :row-key="getRowKeys">
        
        <el-table-column type="selection" align="center" width="55" :reserve-selection="true">
        </el-table-column>

        <el-table-column align="center" prop="Name" label="人员名称" show-overflow-tooltip>
        </el-table-column>

        <el-table-column  align="center" prop="Account" label="联系电话" show-overflow-tooltip>
          
        </el-table-column>

      </el-table>


      <el-pagination
        background
        style="margin-top:12px;"
        @current-change="pageChange"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
  </div>
</template>
<script>
import { getMethodCommon,postMethodCommon} from '../../../../api/common'
export default {
  name:"SelectRoles",
  props:['serviceId'],
  data(){
    return {
      listQuery:{
        pageIndex: 1,
        pageSize: 15,
        name: null,
      },
      tableData:[],
      total:0,
      multipleSelection:[],
    }
  },
  created(){
    this.getList();
  },
  methods:{
    pageChange(e){
      this.listQuery.pageIndex = e;
      this.getList();
    },  
    getListById(){
      postMethodCommon("/CimService/GetRoleByServiceId?ServiceId="+this.serviceId).then(res=>{
        if(res.code == 200){
          let _this = this;
          res.result.forEach((item,index)=>{
            _this.$nextTick(()=>{
              _this.$refs.mainTable2.toggleRowSelection(_this.tableData.find(row=>{
                return row.id == item.id;
              }),true);
            })
              
          })
        }
      })
    },
    getList(){
      getMethodCommon("/FireCodeApp/GetForestryUser", this.listQuery).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.total = res.count;
          }
        }
      );
    },
    getRowKeys(row){
      return row.id
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    }
  }
}
</script>
<style scoped>
.select-user-container{
  width:100%;
  height:100%;
  padding:20px;
  background:#fff;
}
.operate-container{
  width:100%;
  height:40px;
}

.search-container{
  width:100%;
  height:40px;
  margin:5px 0px;
}

::v-deep .el-input__inner{
  background:none!important;
  color:#666!important;
}

::v-deep .el-table th.el-table__cell{
  border:0px!important;
  }
</style>