<template>
  <div>
    <Card style="height: 95%">
      <p slot="title"><Icon type="md-contacts" />功能权限设置</p>
     
      <Table ref="tables" searchable search-place="top" :data="tableData" :columns="dataColumns" size="small"
             :loading="loading" :row-class-name="rowClassName"
              style="margin-top: 10px;" border>
        <template slot="actions" slot-scope="{ row }">
          <Button v-if="(!row.isDefault) && (!row.hasPermission)" type="primary" size="small" @click="addFuncPermission(row)"  style="margin-right: 5px">授权</Button>
          <Button v-if="(!row.isDefault) && row.hasPermission " type="error" size="small" @click="deleteFuncPermission(row)"  style="margin-right: 5px">删除授权</Button>
          <span v-if="row.isDefault">无需授权</span>
        </template>
      </Table>
      <bcPage ref="function-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small" :pageSize.sync="pageSize" ></bcPage>
    </Card>
  </div>
</template>

<script>
import { getFunctionPageByObjAndRes,addObjResFunction,deleteObjResFunction } from '../../../../api/rbac/obj-res-function-api'
let $this;
export default {
  name: 'functionPart',
  components: {
  },
  props : {
    nowObj:Object,
    nowRes:Object,
    title:String
  },
  data () {
    return {
      importUrl: '',
      uploadFunction:false,
      searchForm:{},
      showModal: false,
      modalParams: {},
      nowFunction:{},
      dataCount:0,
      pageSize:10,
      columnsShow: [],
      dataColumns: [
              /*{ title: '所属菜单', key: 'menuId', sortable: true, show: true },*/
              /*{ title: '功能编码', key: 'code', sortable: true, show: true },*/
              { title: '类型', key: '',render: (h, params) => h('span', params.row.type==1?'按钮':'其他'), sortable: true, show: true },
              { title: '功能名称', key: 'name', sortable: true, show: true },
              { title: '是否默认授权', key: '',render: (h, params) => h('span', params.row.isDefault==1?'是':'否'), sortable: true, show: true },
              /*{ title: '状态', key: '',render: (h, params) => h('span', params.row.state==1?'正常':'禁用'), sortable: true, show: true },*/
              /*{ title: '备注', key: 'remark', sortable: true, show: true },*/
              { title: '操作', key: 'action', width: 200, align: 'center',slot:'actions', show: true }
      ],
      tableData: [],
      selectedData: [],
      loading: false,
    }
  },
  methods: {
    addFuncPermission (row) {
      let params = {functionId: row.id, functionName: row.name, functionCode: row.code, functionType: row.type,
        objId: this.nowObj.id, objName: this.nowObj.name,
        resId: this.nowRes.id, resName: this.nowRes.name}
      addObjResFunction(params).then( data => {
        if (!data.status) {
          this.$Message.error(data.error.message)
          console.log(data)
          return false
        }
        this.$Message.success( "操作成功！");
        this.reloadData();
      }).catch(err =>{
        this.$Message.error( "操作失败！");
        console.log(err);
      })
    },
    deleteFuncPermission (row) {
      deleteObjResFunction(row.orfId).then( data => {
        this.$Message.success( "操作成功！");
        this.reloadData();
      }).catch(err =>{
        this.$Message.error( "操作失败！");
        console.log(err);
      })
    },
    reloadData (pageSize,pageNo) {
      //表格加载中效果
      this.loading = true;
      //处理表单查询参数及分页
      if (!pageNo) {
        this.dataCount = 0
      }
      if (!pageSize) {
        pageSize = this.pageSize;
      }
      let page_params = {'pageSize':pageSize,'pageNo':pageNo};
      let params = Object.assign({},page_params,this.searchForm); // 这样不会改变原对象

      getFunctionPageByObjAndRes(this.nowObj.id,this.nowRes.id,params).then(res => {
        if (res.data.result.totalSize) {
            this.dataCount = parseInt(res.data.result.totalSize)
        }
        if (res.data.result.datas && res.data.result.datas.length > 0) {
          this.tableData = res.data.result.datas;
          this.nowFunction = this.tableData[0];
        } else {
            this.tableData = [];
        }
        this.loading = false;
      }).catch(err => {
        this.tableData = [];
        this.$Message.error('查询失败！')
        console.log(err)
      })
    },
    resetTable(){
      this.tableData = [];
      this.dataCount = 0;
    },
    rowClassName (row, index) {
      if (row.isDefault === 1) {
        return 'demo-table-isDefault-row';
      } else if (row.hasPermission) {
        return 'demo-table-hasPermission-row';
      }else {
        return 'demo-table-hasNotPermission-row';
      }
      return '';
    },
  },
  mounted () {
    if (!this.nowRes.id){
      this.resetTable();
    }else {
      this.reloadData();
    }
    $this = this;
  },
  watch:{
    nowRes:{
      immediate:true,
      handler:function(){
        if (!this.nowRes.id){
          this.resetTable();
        }else {
          this.reloadData();
        }
      }
    },
    nowObj:{
      immediate:true,
      handler:function(){
        this.resetTable();
      }
    },
  }
}
</script>

<style>
  .ivu-table .demo-table-hasPermission-row td{
    background-color: #2db7f5;
    color: #fff;
  }
  .ivu-table .demo-table-hasNotPermission-row td{
    background-color: #ff6600;
    color: #fff;
  }
  .ivu-table .demo-table-isDefault-row td{
    background-color: #187;
    color: #fff;
  }
</style>
