<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.playRecord.title') }}</h4>
        <p class="text-g-600 text-sm mt-1">{{ $t('console.playRecord.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.playRecord.player')"
          prop="player_name"
          min-width="120"
          align="center"
        />
        <ElTableColumn
          :label="$t('console.playRecord.reward')"
          prop="reward_tier_label"
          min-width="140"
          align="center"
        />
        <ElTableColumn
          :label="$t('console.playRecord.winCoin')"
          prop="win_coin"
          min-width="120"
          align="center"
        >
          <template #default="scope">
            {{ formatCoin(scope.row.win_coin) }}
          </template>
        </ElTableColumn>
        <ElTableColumn
          :label="$t('console.playRecord.playTime')"
          prop="create_time"
          min-width="170"
          align="center"
        />
      </template>
    </ArtTable>
  </div>
</template>

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

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

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

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

  useChannelDeptReload(loadList)
</script>
