<script setup lang="ts" generic="T extends { [key: string]: any;}">
const { list, columns, menus, refresh, defaultPageSizes = [10, 20, 30, 40] } = defineProps<{
  defaultPageSizes?: number[]
  list: T[]
  pageTotal: number
  columns: {
    key: keyof T
    label?: string
    sortable?: boolean
  }[]
  menus?: (row: T) => any[][]
  refresh?: () => Promise<any>
  loading?: boolean
  searchText?: string
  error?: any
}>()

defineSlots<{
  'selected': any
  'filter': any
  [k: string]: (scope: { row: T }) => any
}>()

const { query, selected, pageSize, pageIndex, sort } = defineModels<{
  query: string
  selected?: T[]
  pageSize: number
  pageIndex: number
  sort?: {
    clumn: keyof T
    direction: 'asc' | 'desc'
  }
}>()

const attrs = useAttrs()

onMounted(() => {
  pageSize.value = defaultPageSizes[0]
  pageIndex.value = 1
})

if (menus) {
  // eslint-disable-next-line vue/no-mutating-props
  columns.push({
    label: '',
    key: 'opt-actions',
  })
}

const showColumns = ref<{ key: any; label?: string }[]>([...columns])

const selectedColumns: any = computed(() => columns.filter(c => showColumns.value.some(sc => sc.key === c.key)))
const slots = useSlots()
const invoices = [
  {
    invoice: 'INV001',
    paymentStatus: 'Paid',
    totalAmount: '$250.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV002',
    paymentStatus: 'Pending',
    totalAmount: '$150.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV003',
    paymentStatus: 'Unpaid',
    totalAmount: '$350.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV004',
    paymentStatus: 'Paid',
    totalAmount: '$450.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV005',
    paymentStatus: 'Paid',
    totalAmount: '$550.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV006',
    paymentStatus: 'Pending',
    totalAmount: '$200.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV007',
    paymentStatus: 'Unpaid',
    totalAmount: '$300.00',
    paymentMethod: 'Credit Card',
  },
]
</script>

<template>
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead class="w-[100px]">
          Invoice
        </TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead class="text-right">
          Amount
        </TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell class="font-medium">
          INV001
        </TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell class="text-right">
          $250.00
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>
