<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-select v-model="listQuery.unitname" clearable style="width:200px;margin-right:15px;" placeholder="请选择单位" size="mini" @change="selectChange" >
          <el-option
          v-for="item in unitOptions"
          :key="item.id"
          :label="item.unitName"
          :value="item.unitName">
          </el-option>
      </el-select>

        <el-input placeholder="请输入人员名称"  v-model="listQuery.username" @keyup.enter="getList" style="width:300px;margin-right:15px;" size="mini"></el-input>
        
        <el-button type="default" size="mini" icon="el-icon-search" @click="getListByBtn">搜索</el-button>
      </div>

      <el-table ref="mainTable2"   :data="tableData" 
      :reserve-selection="true"
        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="UnitName" 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"
        :page-size="15"
        :total="total">
      </el-pagination>
  </div>
</template>
<script>
import { getMethodCommon,postMethodCommon} from '../../../api/common'
export default {
  name:"SelectRoles",
  props:['serviceId'],
  data(){
    return {
      unitOptions:[],
      listQuery:{
        pageIndex: 1,
        pageSize: 15,
        username: null,
        unitName:null,
      },
      tableData:[],
      total:0,
      multipleSelection:[],
    }
  },
  created(){
    this.handleGetUnitList();
    this.getList();
  },
  methods:{
    getListByBtn(){
      this.listQuery.pageIndex = 1;
      this.getList()
    },
    selectChange(e){
      this.listQuery.pageIndex = 1;
      this.getList();
    },
    handleGetUnitList(){
            getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
                if(res.code == 200){
                    this.unitOptions = res.data;
                }
            })
        },
    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>