<script setup lang="ts">
  import type {
    TableProps,
    TableRowData,
    RowEventContext,
  } from 'tdesign-vue-next';

  const emit = defineEmits(['pageChange', 'onRowClick']);

  const data = defineModel<unknown>('data');
  const columns = defineModel<TableProps['columns']>('columns');
  const loading = defineModel<boolean>('loading');
  const pagination = defineModel<TableProps['pagination']>('pagination');

  async function onPageChange(pageInfo: { current: number; pageSize: number }) {
    console.log('Page change');
    console.log(pageInfo);
    emit('pageChange', pageInfo);
  }
  function onRowClick(x: RowEventContext<TableRowData>) {
    emit('onRowClick', x);
  }
  function onSelectChange() {
    console.log('Select change');
  }
</script>

<template>
  <t-table
    row-key="index"
    :data="data as TableRowData[]"
    :columns="columns"
    :pagination="pagination"
    :table-layout="'auto'"
    :bordered="true"
    :stripe="true"
    :lazy-load="true"
    :loading="loading"
    @page-change="onPageChange"
    @select-change="onSelectChange"
    @row-click="onRowClick"
  >
  </t-table>
</template>
