<script lang="ts" setup>
  import { Button } from 'ant-design-vue';
  import { columns, searchFormSchema } from './config/config';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table';
  import PackageDetailModal from './components/PackageDetailModal.vue';
  import { useModal } from '/@/components/Modal';

  const [register] = useTable({
    columns,
    title: '包仓库',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
  });

  const [registerModal, { openModal }] = useModal();

  const handleCreatePackage = () => {
    openModal(true);
  };
</script>

<template>
  <PageWrapper dense contentFullHeight contentClass="flex flex-col">
    <BasicTable @register="register">
      <template #toolbar>
        <Button @click="handleCreatePackage" type="primary">新增包</Button>
      </template>
    </BasicTable>
    <PackageDetailModal @register="registerModal" />
  </PageWrapper>
</template>