<script setup lang="ts">
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicTable, useTable } from '@/components/Table'

const [register, { changeLoading }] = useModalInner()

const [registerTable] = useTable({
  dataSource: Array.from({ length: 100 }, (_, index) => ({ index1: index, index2: index, index3: index })),
  canResize: true,
  maxHeight: 300,
  showTableSetting: true,
  columns: [
    {
      title: '列一',
      dataIndex: 'index1',
    },
    {
      title: '列二',
      dataIndex: 'index2',

    },
    {
      title: '列三',
      dataIndex: 'index3',
    },
  ],
})
const handleSave = () => {
  setTimeout(() => {
    changeLoading(true)
  }, (3000))
}
</script>

<template>
  <BasicModal title="配置" width="80%" @register="register" @ok="handleSave">
    <BasicTable @register="registerTable" />
  </BasicModal>
</template>