<template>
  <div class="split-pane-page-wrapper">
    <split-pane v-model="offset" @on-moving="handleMoving">
      <div slot="left" class="pane left-pane">
          <slot name="left"></slot>
      </div>
      <div slot="right" class="pane right-pane">
          <slot name="right"></slot>
      </div>
    </split-pane>
  </div>
</template>

<script>
import SplitPane from '_c/split-pane'
import Icons from '_c/icons'
export default {
  name: 'split_pane_page',
  components: {
    SplitPane,
    Icons
  },
  data () {
    return {
      offset: 0.2,
      offsetVertical: '250px'
    }
  },
  methods: {
    handleMoving (e) {
      console.log(e.atMin, e.atMax)
    }
  }
}
</script>

<style lang="less">

.split-pane-page-wrapper{
  height: 100%;
  .pane{
    width: 100%;
    height: 100%;
    &.left-pane{

    }
    &.right-pane{
    
    }
    &.top-pane{
     
    }
    &.bottom-pane{
     
    }
  }
}
</style>
