<script setup lang="tsx">
import { reactive,  unref } from 'vue'
import { couponGetList } from '@/api/marketing'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { TableImage } from '@/components/tableImage'

const props = defineProps({
  cid: Number
})
const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const res = await couponGetList({
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10,
      cid: props.cid || 0
    })
    return {
      list: res.data.list,
      total: res.data.count || 0
    }
  }
})

const { dataList, loading, total, currentPage, pageSize } = tableState

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'user.nickname',
    label: '用户名',
    minWidth: 150
  },
  {
    field: 'user',
    label: '用户头像',
    minWidth: 150,
    slots: {
      default: ({ row }: any) => {
        return (
          <>
            <TableImage src={row.user.avatar}/>
          </>
        )
      }
    }
  },
  {
    field: 'add_time',
    label: '领取时间',
    minWidth: 150
  }
])

</script>

<template>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
</template>
