<template>
  <!-- 交易记录表格 -->
  <el-table v-loading="result.loading" :data="result.data" style="width: 100%">
    <el-table-column prop="bizType" label="交易分类">
      <template #default="{ row }">
        {{ bizTypeMap[row.bizType as number] || '未知' }}
      </template>
    </el-table-column>
    <el-table-column prop="price" label="交易金额"> </el-table-column>
    <el-table-column prop="title" label="标题" />
    <el-table-column prop="createTime" label="交易时间">
      <template #default="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div class="pagination mt-15px">
    <el-pagination v-model:current-page="query.pageNo" :page-size="10" :total="result.total" background layout="prev, pager, next, jumper" />
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  // import { accDiv } from '~/utils/utils'
  import dayjs from 'dayjs'
  import { bizTypeMap } from '~/enum/index'
  import { getWalletRechargeRecordPage } from '~/api/pay/index'
  import type { AppPayWalletRechargeRespVO } from '~/api/pay/types'

  const result = reactive({
    data: [] as AppPayWalletRechargeRespVO[],
    total: 0,
    loading: false,
  })
  const query = reactive({
    pageNo: 1,
    pageSize: 10,
  })

  // 获取交易记录
  const getTradeRecords = async () => {
    try {
      result.loading = true
      const res = await getWalletRechargeRecordPage(query)
      result.data = res.data.list || []
      result.total = res.data.total || 0
    } finally {
      result.loading = false
    }
  }
  getTradeRecords()
</script>
<style lang="scss" scoped>
  :deep(.el-pagination) {
    .el-input__inner {
      text-align: center !important;
    }
  }
</style>
