<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput
          v-model="formData.tableName"
          placeholder="表名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="数据库名称" prop="tableSchema"/>
      <ElTableColumn label="表名称" prop="tableName"/>
      <ElTableColumn label="备注" prop="tableComment"/>
    </template>
    <CodePreview ref="codePreview"/>
  </ATablePage>
</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 ATablePage, { buildTablePageProps } from '@/components/a-page/a-table-page/ATablePage.tsx'

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

const tablePageProps = buildTablePageProps<DbTableTypes.SearchTplParam, DbTableTypes.TableInfo>({
  pageLayout: {
    enableHighForm: false,
  },
  searchForm: {
    paging: DbTableApi.tablePaing,
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '预览',
          icon: 'yulan',
          action({row}: { row: DbTableTypes.TableInfo }) {
            codePreviewIns.value?.open(row)
          },
        },
      ],
    },
  },
})

</script>
