<template>
  <!-- <div> -->
  <CommonPage show-footer :title="$route.title">
    <n-data-table
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />
  </CommonPage>
  <!-- </div> -->
</template>

<script setup>
import api from './api'

const loading = ref(false)
const columns = ref([
  {
    title: 'ID',
    key: 'ID',
    align: 'center',
  },
  {
    title: '订单号',
    key: 'oid',
    align: 'center',
  },
  {
    title: '获取积分',
    key: 'number',
    align: 'center',
  },
])
const data = ref([])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

onMounted(() => {
  getList()
})

const getList = async () => {
  loading.value = true
  try {
    const res = await api.getJF({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
    })
    console.log(res)
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}
</script>

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