<template>
  <div class="art-full-height">
    <!-- 搜索面板 -->
    <TableSearch v-model="searchForm" @search="handleSearch" @reset="resetSearchParams" />

    <ElCard class="art-table-card" shadow="never">
      <!-- 表格头部 -->
      <ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
        <template #left>
          <ElSpace wrap>
            <!--            <ElButton v-permission="'dice:player_ticket_record:index:save'" @click="showDialog('add')" v-ripple>-->
            <!--              <template #icon>-->
            <!--                <ArtSvgIcon icon="ri:add-fill" />-->
            <!--              </template>-->
            <!--              新增-->
            <!--            </ElButton>-->
            <!--            <ElButton-->
            <!--              v-permission="'dice:player_ticket_record:index:destroy'"-->
            <!--              :disabled="selectedRows.length === 0"-->
            <!--              @click="deleteSelectedRows(api.delete, refreshData)"-->
            <!--              v-ripple-->
            <!--            >-->
            <!--              <template #icon>-->
            <!--                <ArtSvgIcon icon="ri:delete-bin-5-line" />-->
            <!--              </template>-->
            <!--              删除-->
            <!--            </ElButton>-->
          </ElSpace>
        </template>
      </ArtTableHeader>

      <!-- 表格 -->
      <ArtTable
        ref="tableRef"
        rowKey="id"
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
        <!-- 操作列 -->
        <template #operation="{ row }">
          <div class="flex gap-2">
            <SaButton
              v-permission="'dice:player_ticket_record:index:update'"
              type="secondary"
              @click="showDialog('edit', row)"
            />
            <!--            <SaButton-->
            <!--              v-permission="'dice:player_ticket_record:index:destroy'"-->
            <!--              type="error"-->
            <!--              @click="deleteRow(row, api.delete, refreshData)"-->
            <!--            />-->
          </div>
        </template>
      </ArtTable>
    </ElCard>

    <!-- 编辑弹窗 -->
    <EditDialog
      v-model="dialogVisible"
      :dialog-type="dialogType"
      :data="dialogData"
      @success="refreshData"
    />
  </div>
</template>

<script setup lang="ts">
  import { useTable } from '@/hooks/core/useTable'
  import { useSaiAdmin } from '@/composables/useSaiAdmin'
  import api from '../../api/player_ticket_record/index'
  import TableSearch from './modules/table-search.vue'
  import EditDialog from './modules/edit-dialog.vue'

  // 搜索表单
  const searchForm = ref<Record<string, unknown>>({
    username: undefined,
    use_coins_min: undefined,
    use_coins_max: undefined,
    ante: undefined,
    total_ticket_count_min: undefined,
    total_ticket_count_max: undefined,
    paid_ticket_count_min: undefined,
    paid_ticket_count_max: undefined,
    free_ticket_count_min: undefined,
    free_ticket_count_max: undefined,
    create_time_min: undefined,
    create_time_max: undefined,
    create_time: undefined as [string, string] | undefined
  })

  // 搜索处理（将创建时间范围 create_time 转为 create_time_min / create_time_max）
  const handleSearch = (params: Record<string, any>) => {
    const p = { ...params }
    if (Array.isArray(p.create_time) && p.create_time.length === 2) {
      p.create_time_min = p.create_time[0]
      p.create_time_max = p.create_time[1]
    }
    delete p.create_time
    Object.assign(searchParams, p)
    getData()
  }

  // 表格配置
  const {
    columns,
    columnChecks,
    data,
    loading,
    getData,
    searchParams,
    pagination,
    resetSearchParams,
    handleSortChange,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: api.list,
      apiParams: { limit: 100 },
      columnsFactory: () => {
        const usernameFormatter = (row: Record<string, any>) =>
          row?.dicePlayer?.username ?? row?.player_id ?? '-'
        return [
          // { type: 'selection' },
          { prop: 'id', label: 'page.table.id', width: 80, align: 'center' },
          {
            prop: 'player_id',
            label: 'page.table.playerUsername',
            align: 'center',
            formatter: (row: Record<string, any>) => usernameFormatter(row)
          },
          { prop: 'use_coins', label: 'page.table.useCoins', align: 'center' },
          { prop: 'ante', label: 'page.table.ante', align: 'center' },
          { prop: 'total_ticket_count', label: 'page.table.totalDrawCount', align: 'center' },
          { prop: 'paid_ticket_count', label: 'page.table.paidDrawCount', align: 'center' },
          { prop: 'free_ticket_count', label: 'page.table.freeDrawCount', align: 'center' },
          { prop: 'remark', label: 'page.table.remark', width: 100, align: 'center', showOverflowTooltip: true },
          { prop: 'create_time', label: 'page.table.createTime', width: 170, align: 'center' },
          {
            prop: 'operation',
            label: 'table.actions.operation',
            width: 60,
            align: 'center',
            fixed: 'right',
            useSlot: true
          }
        ]
      }
    }
  })

  // 编辑配置
  const {
    dialogType,
    dialogVisible,
    dialogData,
    showDialog,
    // deleteRow,
    // deleteSelectedRows,
    handleSelectionChange
    // selectedRows
  } = useSaiAdmin()
</script>
