<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import type { DataTableColumns, PaginationProps } from 'naive-ui';

const props = defineProps<{
  fetchData: (pagination: PaginationProps) => Promise<{ data: any[]; itemCount: number }>;
  columns: DataTableColumns;
  pagination: PaginationProps;
}>();

const data = ref<any[]>([]);
const headerColumns = computed(() => {
  return props.columns
    .filter(col => {
      return !col.fixed;
    })
    .map(col => {
      return {
        key: col.key,
        title: col.title,
        checked: true,
        visible: true
      };
    });
});

async function loadData() {
  const result = await props.fetchData(props.pagination);
  data.value = result.data;
  props.pagination!.itemCount = result.itemCount;
}

onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="space-y-5">
    <TableHeaderOperation :columns="headerColumns" />
    <NDataTable :columns="columns" :data="data!" :pagination="pagination" :bordered="false" />
  </div>
</template>

<style lang="css" scoped></style>
