<script lang="ts">
export default { name: 'stakingRecord' };
</script>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { listStakingRecords } from '@/api/staking/index';
import { StakingRecordItem } from '@/types/api/staking/index';

const RECORD_TYPE: Record<number, string> = { 0: '质押', 1: '解冻释放' };

const state = reactive({
  loading: false,
  queryParams: { pageNo: 1, pageSize: 15 },
  list: [] as StakingRecordItem[],
  total: 0
});

const { loading, queryParams, list, total } = toRefs(state);

function handleQuery() {
  state.loading = true;
  listStakingRecords(state.queryParams)
    .then(({ data }: any) => {
      state.list = data.content;
      state.total = data.totalElements;
    })
    .finally(() => {
      state.loading = false;
    });
}

onMounted(handleQuery);
</script>

<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="list" border height="520">
      <el-table-column label="流水ID" prop="id" width="90" align="center" />
      <el-table-column label="用户ID" prop="memberId" width="100" align="center" />
      <el-table-column label="订单ID" prop="orderId" width="90" align="center" />
      <el-table-column label="币种" prop="coinUnit" width="100" align="center" />
      <el-table-column label="金额" prop="amount" min-width="130" align="center" />
      <el-table-column label="类型" prop="type" width="100" align="center">
        <template #default="{ row }">{{ RECORD_TYPE[row.type] ?? row.type }}</template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
      <el-table-column label="时间" prop="createTime" min-width="160" align="center" />
    </el-table>
    <pagination
      v-if="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
  </div>
</template>
