<template>
  <Card>
    <template #title>
    <p ><Icon type="md-contacts" />{{title}}</p>
    </template>
    <!--<Button @click="addObjRole" style="margin: 10px 0;" type="primary" size="small">授权角色</Button>-->
    <Table ref="roleTable" searchable search-place="top" :data="roleData" stripe  :columns="columns" :size="size" height="500" ></Table>
    <bcPage ref="role-table-page" @reload-data="reloadData" :dataCount="dataCount" :size="size" ></bcPage>
  </Card>
</template>

<script>
  import { getResRolePage,/*removeResRole*/ } from '../../../../api/rbac/res-manage'
  export default {
    name: "role-tree",
    props : {
      nowObj:Object,
      type:String,//父组件类型 res与其他(用户,机构,用户组)
      size: String, //组件间交互的参数
      title:String
    },
    components: {
    },
    data () {
      return{
        show1:false,
        userId:0,
        flag:'',
        saveLoading: false,
        modalTitle: '',
        dataCount:0,
        showRoleTreeModal:false,
        modalParams:{},
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        },
        columns: [
          { title: '对象名', key: 'objName', sortable: true },
          { title: '对象类型', key: '',render: (h, params) => h('span', params.row.objType==1?'角色':params.row.busUrlType==2?'用户':'其他')},
          /*{ title: '所属应用', key: 'forSystem' },*/
          { title: '备注', key: 'remark' },
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?',
                  placement:'bottom',
                  width:180,
                  transfer:true
                },
                on: {
                  'on-ok': () => {
                    this.remove(params)
                    this.roleData.splice(params.index, 1);
                  }
                }
              }, [
                h('Button',{
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  }
                }, '删除')
              ]);
            }
          }
        ],
        roleData:[]
      }
    },
    methods: {
      addObjRole () {
        this.showRoleTreeModal = true;
        this.modalParams = {title:'分配角色',flag:this.type,objectId:this.nowObj.id};
      },
      remove (params) {//发送请求--删除对象权限
        let roleIds = [];
        roleIds.push(params.row.roleId);
        //调用方法发送请求
        let promise;
        if (this.type=='res') {//通过资源id去操作
          //promise = removeResRole(this.nowObj.id,roleIds);
        }else{
          //promise = removeObjRole(this.type,this.nowObj.id,roleIds);
        }
        //处理操作结果回调
        promise.then( data => {
          this.$Message.success( "操作成功！");
          this.saveLoading = false;
        }).catch(err =>{
          this.$Message.error( "操作失败！");
          console.log(err);
          this.saveLoading = false;
        });
      },
      reloadData (pageSize,pageNo) {
        if(!this.nowObj.id){return;}
        if (!pageNo){
          this.dataCount = 0;
        }
        //判断是对象与权限的操作还是资源与权限的操作.逻辑一样,但是url与参数不一样
        let promise;
        let params;
        if (this.type=='res') {//通过资源id去操作
          params = {'pageSize':pageSize,'pageNo':pageNo,resId:this.nowObj.id};
          //调用方法发送请求
          promise = getResRolePage(params);
        }else{//通过其他id去操作
          params = {'pageSize':pageSize,'pageNo':pageNo,objectId:this.nowObj.id};
          //promise = getObjRolePage(this.type,params);
        }
        promise.then(res => {
          this.dataCount = parseInt(res.data.result.totalSize);
          this.roleData = res.data.result.datas;
        })
      }
    },
    watch:{
      nowObj:{
        immediate:true,
        handler:function(){
          this.reloadData();
        }
      },
    }
  }
</script>

<style scoped>
  .ivu-form-item-search {
    margin-bottom: 3px;
  }
</style>
