<template>
  <BasicModal v-bind="$attrs" :width="800" title="导入" @register="registerModal" @ok="handleSubmit">
    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { importTableColumns, importTableSearchFormSchema } from '../codegen.data';
  import { BasicModal, useModalInner, BasicTable, useListPage } from '@jdlinker/ui';
  import { createCodegenList, getSchemaTableList } from '../service';

  defineOptions({ name: 'InfraImportTableModal' });
  const emit = defineEmits(['success', 'register']);

  // 自适应列配置
  const adaptiveColProps: Partial<any> = {
    xs: 24, // <576px
    sm: 24, // ≥576px
    md: 24, // ≥768px
    lg: 12, // ≥992px
    xl: 8, // ≥1200px
    xxl: 8 // ≥1600px
  };

  const { tableContext } = useListPage({
    tableProps: {
      rowKey: 'name',
      api: getSchemaTableList,
      columns: importTableColumns,
      size: 'small',
      scroll: { y: 800 },
      isCanResizeParent: false,
      showIndexColumn: false,
      useSearchForm: true,
      pagination: true,
      showTableSetting: false,
      showActionColumn: false,
      formConfig: {
        schemas: importTableSearchFormSchema,
        baseColProps: adaptiveColProps,
        // 操作按钮配置
        actionColOptions: {
          style: { paddingLeft: '0px', paddingRight: '0px' }
        }
      },
      beforeFetch: (params) => {
        return Object.assign({ column: 'createTime', order: 'desc' }, params);
      }
    }
  });

  const [registerTable, { getForm }, { rowSelection, selectedRowKeys }] = tableContext;

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
    setModalProps({ confirmLoading: false });
  });

  async function handleSubmit() {
    const form = await getForm();
    await createCodegenList({
      dataSourceConfigId: form.getFieldsValue().dataSourceConfigId,
      tableNames: selectedRowKeys.value
    });
    closeModal();
    selectedRowKeys.value = [];
    rowSelection.value = null;
    emit('success');
  }
</script>
