<template>
  <FormPage
    :action-column="actionColumn"
    :paging="paging">
    <template #searchFormItem="{searchForm}">
      <ElFormItem label="表名称">
        <ElInput
          v-model="searchForm.tableName"
          placeholder="表名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="数据库名称" prop="tableSchema"/>
      <ElTableColumn label="表名称" prop="tableName"/>
      <ElTableColumn label="备注" prop="tableComment"/>
    </template>
    <CodePreview ref="codePreview"/>
  </FormPage>
</template>
<script lang="ts" setup>
import CodePreview from '@/pages/sys/gen/db-table/CodePreview.vue'
import DbTableApi from '@/pages/sys/gen/db-table/db-table-api.ts'
import FormPage from '@/components/page/FormPage.vue'
import type { ActionColumnType } from '@/components/page/a-page-type.ts'

const codePreviewIns = useTemplateRef<InstanceType<typeof CodePreview>>('codePreview')

const actionColumn = reactive<ActionColumnType<DbTableTypes.TableInfo>>({
  tableActions: [
    {
      tooltip: '预览',
      icon: 'Edit',
      action({row}: { row: DbTableTypes.TableInfo }) {
        codePreviewIns.value?.open(row)
      },
    },
  ],
})

function paging(param: DbTableTypes.SearchTplParam) {
  return DbTableApi.tablePaing(param)

}
</script>
