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

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

const loading = ref(false)

const columns = ref([
  {
    title: 'ID',
    align: 'center',
    key: 'ID',
  },
  {
    title: '头像',
    align: 'center',
    slot: 'avatar',
    render(row) {
      return h('img', {
        src: row.avatar,
        style: {
          width: '30px',
          height: '30px',
          borderRadius: '50%',
        },
      })
    },
  },
  {
    title: '电话',
    align: 'center',
    key: 'phone',
  },
  {
    title: '用户积分',
    align: 'center',
    key: 'integral',
  },
  {
    title: '用户豆子',
    align: 'center',
    key: 'pulse',
  },
  {
    title: '操作',
    align: 'center',
    slot: 'action',
    render(row) {
      console.log(row)
    },
  },
])

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.getUser({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
    })
    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>
