<script lang="ts" setup name="DialogPane">
import { ref, computed } from 'vue'
import SplitPane from '@/components/SplitPane/index.vue'
import Tree from '@/components/Tree/index.vue'
import Table from '@/components/Table/index.vue'
const props = defineProps({
  pane: {
    type: Object,
    default: {}
  },
})
const treeInfo = computed(() => {
  return props.pane.treeInfo
})
const tableInfo = computed(() => {
  return props.pane.tableInfo
})
const paneLengthPercent = ref(20)
const setPaneLengthPercent = (val) => {
  paneLengthPercent.value = val
}
</script>
<template>
  <div class="dialog_panel_wrap" :style="{ width: props.pane.width, height: props.pane.height }">
    <SplitPane :direction="'row'" :min="10" :max="30" :triggerLength="1" :paneLengthPercent="paneLengthPercent"
      @setPaneLengthPercent="setPaneLengthPercent">
      <template v-slot:one>
        <Tree :treeInfo="treeInfo" />
      </template>
      <template v-slot:two>
        <Table :tableInfo="tableInfo" />
      </template>
    </SplitPane>
  </div>
</template>
<style lang="scss" scoped></style>