<template>
  <el-dialog v-model="visible" title="竞拍记录" width="50%">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="userName" label="竞拍人" />
      <el-table-column prop="bidTime" label="竞拍时间">
        <template #default="{ row }">
          {{ dayjs.unix(row.bidTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column prop="bidPrice" label="竞拍价格">
        <template #default="{ row }"> {{ row.bidPrice }} YA币 </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-3">
      <el-pagination
        v-model:current-page="searchParams.current"
        v-model:page-size="searchParams.size"
        :total="total"
        @size-change="changePageSize"
        @current-change="goToPage"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { usePageSearch } from '@/hooks'
import { getAuctionRecord } from '@/api/backend'
import dayjs from 'dayjs'
const visible = ref(false)

const { list, total, goToPage, changePageSize, searchParams, search } = usePageSearch(
  getAuctionRecord,
  {
    immediate: false,
  },
)

const open = (id: number) => {
  searchParams.value.id = id
  search()
  visible.value = true
}

defineExpose({
  open,
})
</script>
