<template>
  <div>
    <div class="demo-split">
      <Split v-model="split1">
        <div slot="left" class="demo-split-pane">
          <authorityObjPart :nowObj.sync="nowObj"></authorityObjPart>
        </div>
        <div slot="right" class="demo-split-pane">
          <authorityResPart :nowObj="nowObj" :nowRes.sync="nowRes"></authorityResPart>
        </div>
      </Split>
    </div>
    <div class="demo-split" style="margin-top:20px">
      <Split v-model="split2">
        <div slot="left" class="demo-split-pane">
          <functionPart :nowObj="nowObj" :nowRes="nowRes"></functionPart>
        </div>
        <div slot="right" class="demo-split-pane">
          <dataPermissionPart :nowObj="nowObj" :nowRes="nowRes"></dataPermissionPart>
        </div>
      </Split>
    </div>
  </div>
</template>

<script>
  import authorityObjPart from './obj-part.vue'
  import authorityResPart from './res-part.vue'
  import functionPart from './function-part.vue'
  import dataPermissionPart from './dataPermission-part.vue'

  let $this
  export default {
    name: 'authority_manage',
    components: {
      authorityObjPart,
      authorityResPart,
      functionPart,
      dataPermissionPart,
    },
    data () {
      return {
        split1: 0.5,
        split2: 0.5,
        nowObj: {},
        nowRes: {},
      }
    },
    methods: {
    },
    mounted () {
      $this = this
    }
  }
</script>

<style scoped>
  .demo-split {
    height: 450px;
    border: 1px solid #dcdee2;

  }

  .demo-split-pane {
    height: 450px;
    padding: 10px;
    overflow: auto;
  }
</style>
