<template>
  <div class="h-full flex p-4">
    <div class="flex flex-col pr-4 w-1/2">
      <div class="flex-1">
        <BzTable @register="registerTable" />
      </div>
      <div class="flex-1">
        <BzTable @register="registerTable" />
      </div>
    </div>
    <div class="flex-1 flex flex-col w-1/2 h-full">
      <div class="h-1/3 mb-4">
        <BzTable @register="registerTable" />
      </div>
      <div class="h-1/3 mb-4">
        <BzTable @register="registerTable2" />
      </div>
      <div class="h-1/3">
        <BzTable @register="registerTable1" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BzTable, useTable } from '/@/index';
  import { getBasicColumns, getFormConfig } from './tableData';

  import { demoListApi } from './tableData';

  export default defineComponent({
    components: { BzTable },
    setup(_) {
      const [registerTable] = useTable({
        api: demoListApi,
        columns: getBasicColumns(),
        useSearchForm: false,
        formConfig: getFormConfig(),
        showIndexColumn: false,
        isCanResizeParent: true,
        rowKey: 'id',
      });

      const [registerTable1] = useTable({
        api: demoListApi,
        columns: getBasicColumns(),
        formConfig: getFormConfig(),
        showIndexColumn: false,
        isCanResizeParent: true,
        useSearchForm: false,
        rowKey: 'id',
      });

      const [registerTable2] = useTable({
        api: demoListApi,
        columns: getBasicColumns(),
        formConfig: getFormConfig(),

        showIndexColumn: false,
        isCanResizeParent: true,
        useSearchForm: false,
        pagination: false,
        rowKey: 'id',
      });

      return {
        registerTable,
        registerTable1,
        registerTable2,
      };
    },
  });
</script>
