<template>
  <div>
          <el-table ref="mainTable2"   :data="tableData"  border fit
        highlight-current-row style="width:780px;" height="640px"  @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="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.status == 0 ? '正常':'停用'}}</template>
        </el-table-column>

      </el-table>
      <el-button type="primary" size="mini" @click="submit">确认</el-button>
  </div>
</template>
<script>
import { getMethodCommon,postMethodCommon} from '../../../../api/common'
export default {
  name:"SelectRoles",
  props:['serviceId'],
  data(){
    return {
      tableData:[],
      multipleSelection:[],
    }
  },
  created(){
    this.getRoles();
  },
  methods:{
    getRolesById(){
      postMethodCommon("/CimService/GetRoleByServiceId?ServiceId="+this.serviceId).then(res=>{
        if(res.code == 200){
          let _this = this;
          res.result.forEach((item,index)=>{
            _this.$nextTick(()=>{
              // let arr = _this.tableData.find(row=>{
              //   return row.id == item.id;
              // })
             
                _this.$refs.mainTable2.toggleRowSelection(_this.tableData.find(row=>{
                  return row.id == item.id;
                }),true);
              
            })
              
          })
        }
      })
    },
    getRoles(){
      getMethodCommon("/roles/load").then(res=>{
        this.tableData = res.result;
        this.getRolesById();
      })
    },
    getRowKeys(row){
      return row.id
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    submit(){
      let formData ={
        isRoleService:true,
        roleServices:[],
      };
      this.multipleSelection.forEach((item,index)=>{
        let obj = {
          roleId:item.id,
          serviceId:this.serviceId,
          description:"",
        }
        formData.roleServices.push(obj);
      })


      postMethodCommon("/CimService/AddRoleService",formData).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"绑定成功",
          })
          this.$emit("serviceSuccess");
        }
      })

    }
  }
}
</script>