<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.newPlayer.title') }}</h4>
        <p class="text-g-600 text-sm mt-1">{{ $t('console.newPlayer.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.newPlayer.player')" prop="name" min-width="120" align="center" />
        <ElTableColumn :label="$t('console.newPlayer.balance')" prop="coin" min-width="120" align="center">
          <template #default="scope">
            {{ formatCoin(scope.row.coin) }}
          </template>
        </ElTableColumn>
        <ElTableColumn :label="$t('console.newPlayer.ticket')" prop="total_ticket_count" min-width="100" align="center" />
      </template>
    </ArtTable>
  </div>
</template>

<script setup lang="ts">
  import { fetchNewPlayerList, type NewPlayerItem } from '@/api/dashboard'

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

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

  onMounted(() => {
    fetchNewPlayerList().then((data) => {
      tableData.value = Array.isArray(data) ? data : []
    })
  })
</script>
