<template>
  <div class="art-card p-5 overflow-hidden mb-5 max-sm:mb-4">
    <div class="art-card-header mb-4">
      <div class="title">
        <h4>{{ $t('console.walletRecord.title') }}</h4>
        <p class="text-g-600 text-sm mt-1">{{ $t('console.walletRecord.subtitle') }}</p>
      </div>
    </div>
    <ArtTable
      class="w-full"
      :data="tableData"
      style="width: 100%"
      size="default"
      :border="false"
      :stripe="true"
      :header-cell-style="{ background: 'transparent' }"
    >
      <template #default>
        <ElTableColumn :label="$t('console.walletRecord.player')" prop="player_name" min-width="120" align="center" />
        <ElTableColumn :label="$t('console.walletRecord.chargeAmount')" prop="coin" min-width="120" align="center">
          <template #default="scope">
            {{ formatCoin(scope.row.coin) }}
          </template>
        </ElTableColumn>
        <ElTableColumn :label="$t('console.walletRecord.chargeTime')" prop="create_time" min-width="170" align="center" />
      </template>
    </ArtTable>
  </div>
</template>

<script setup lang="ts">
  import { fetchWalletRecordList, type WalletRecordItem } from '@/api/dashboard'
  import { getChannelDeptRequestParams, useChannelDeptReload } from '@/composables/useChannelDeptScope'

  const tableData = ref<WalletRecordItem[]>([])

  function formatCoin(val: number | undefined): string {
    if (val === undefined || val === null) return '0.00'
    return Number(val).toFixed(2)
  }

  const loadList = () => {
    fetchWalletRecordList(getChannelDeptRequestParams()).then((data) => {
      tableData.value = Array.isArray(data) ? data : []
    })
  }

  useChannelDeptReload(loadList)
</script>
