<template>
  <TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns" :isPageTable="false" :pagination="pa" :remote="false">
    <template #selectionExtra>
      <n-button size="small" text @click="logRows">123</n-button>
    </template>
  </TablePro>
</template>
<script setup lang="tsx">
import api from '@/axios'
import type { TableProInst, TableProProps } from '@/components/tablePro/src/interface'
import TablePro from '@/components/tablePro/src/TablePro.vue'
import { reactive, ref, useTemplateRef } from 'vue'

type TableType = TableProProps<any, any>

const tableRef = useTemplateRef<TableProInst>('tableRef')
const logRows = () => {
  console.log(tableRef.value)
  console.log(tableRef.value?.selectRows)
  console.log(tableRef.value?.selectKeys)
}
const reqApi: TableType['requestApi'] = (params) => {
  
  const pa = {
    params: params,
    page: {
      current: 1,
      size: 100,
    },
  }
  return api.post('/common/pager', pa)
}

const pa = reactive({
  page: 1,
  pageSize: 10,
  onUpdatePage: (n: number) => {
    pa.page = n
  },
  onUpdatePageSize: (s: number) => {
    pa.pageSize = s
  },
})
const searchFormOptions = reactive<TableType['searchFormOptions']>({
  projectName: {
    type: 'input',
    label: '名字',
  },
})

const columns = ref<TableType['columns']>([
  {
    type: 'selection',
  },
  {
    key: 'name',
    title: '名字',
  },
  {
    key: 'address',
    title: '地址',
  },
])
</script>
<style scoped></style>
