<template>
  <div class="side_tree_page">
    <side-tree-view
      v-bind="$attrs"
      v-on="$listeners"
      ref="sideTree"
      class="side_tree"
    >
      <template #customTreeSlot>
        <slot name="customTreeSlot"></slot>
      </template>
    </side-tree-view>

    <div class="page_view">
      <slot name="sideTreePageSlot"></slot>
      <page-view
        v-bind="$attrs"
        v-on="$listeners"
        ref="pageView"
        :columns="columns"
      >
        <template v-for="item in columns" v-slot:[item.customSlot]="slotProps">
          <slot
            :name="item.customSlot"
            v-bind:customSlotData="slotProps.customSlotData"
          ></slot>
        </template>
      </page-view>
    </div>
  </div>
</template>
<script>
import pageView from './pageView.vue'
import sideTreeView from './baseView/sideTree'
export default {
  name: 'side-tree-page-view',
  props: {
    //表格列
    columns: {
      type: [Object, Array],
      default: () => {
        return {} || []
      }
    }
  },
  components: {
    pageView,
    sideTreeView
  }
}
</script>
<style scoped lang="less">
.side_tree_page {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  .page_view {
    flex: 1 0 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding: 16px;
  }
}
</style>
