<template>
  <div>
      <div class="filter-container" style="margin-bottom:8px;text-align:right;">
        <el-input @keyup.enter.native="handleFilter" size="mini" prefix-icon="el-icon-search" style="width:300px;margin-bottom: 0;margin-right:12px;" class="filter-item" :placeholder="'关键字'"
          v-model="listQuery.key">
        </el-input>
        <el-button type="primary" size="mini">搜索</el-button>
      </div>
      <el-table ref="mainTable2"   :data="tableData"  border fit
        highlight-current-row style="width: 100%;" height="500px"  @selection-change="handleSelectionChange" :row-key="getRowKeys">
        <el-table-column type="selection" align="center" width="55" :reserve-selection="true">
        </el-table-column>


        <el-table-column prop="name" label="工具名称" show-overflow-tooltip>
        </el-table-column>

        <el-table-column  prop="description" label="工具描述" show-overflow-tooltip>
        </el-table-column>

      </el-table>
      <div style="width:100%;height:50px;">
       <pagination style="width:100%;height:50px;" v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange" />
      </div>
      <div style="text-align:right;">
        共选择了{{multipleSelection.length}}个服务
        <el-button type="primary" size="mini" @click="submit()">确定</el-button>
      </div>
  </div>
</template>
<script>
import { getMethodCommon,postMethodCommon } from '../../api/common'
import Pagination from '@/components/Pagination'
export default {
  name:"SelectService",
  components:{
    Pagination
  },
  props:['roleId'],
  data(){
    return {
      listQuery:{
        "page": 1,
        "limit": 20,
      },
      tableData:[],
      total:0,
      multipleSelection:[],
    }
  },
  created(){
    this.getList();
  },
  methods:{
    getRowKeys(row) {
      return row.id
    },
    getRoleService(){
      getMethodCommon("/CimBackStageManagement/GetRoleAssignToolList",{id:this.roleId}).then(res=>{
        if(res.code == 200){
            let _this = this;
            this.multipleSelection = res.data;
            res.data.forEach((item,index)=>{
              _this.$nextTick(()=>{
                let arr = _this.tableData.find(row=>{
                  return row.Id == item.id;
                })

                if(arr){
                  _this.$refs.mainTable2.toggleRowSelection(arr,true);
                }
                
              })
                
            })
        }
      })
    },
    handleSelectionChange(val){
     
      this.multipleSelection = val;
    },
    handleCurrentChange(val){
      this.listQuery.page = val.page;
      this.listQuery.size = val.limit;
      this.getList();
    },
    getList(){
      getMethodCommon("/CimBackStageManagement/LoadCimToolsList",this.listQuery).then(res=>{
        this.tableData = res.data;
        this.total = res.count;
        this.getRoleService();
      })
    },
    submit(){
     

      let formData ={
        roleId:this.roleId,
        toolIds:[],
      };


      this.multipleSelection.forEach((item,index)=>{
        
        formData.toolIds.push(item.Id);
      })

      console.log("formData",formData);
   
      postMethodCommon("/CimBackStageManagement/RoleAssignTool",formData).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"绑定成功",
          })
          this.$emit("serviceSuccess");
        }
      })
    }
  }
}
</script>