<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:index:save'" @click="showDialog('add')" v-ripple>
              <template #icon>
                <ArtSvgIcon icon="ri:add-fill" />
              </template>
              {{ $t('table.actions.add') }}
            </ElButton>
            <ElButton
              v-permission="'dice:player:index:destroy'"
              :disabled="selectedRows.length === 0"
              @click="deleteSelectedRows(api.delete, refreshData)"
              v-ripple
            >
              <template #icon>
                <ArtSvgIcon icon="ri:delete-bin-5-line" />
              </template>
              {{ $t('table.actions.delete') }}
            </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 #status="{ row }">
          <ElSwitch
            v-permission="'dice:player:index:update'"
            :model-value="row.status === 1"
            :loading="row._statusLoading"
            @change="(v: string | number | boolean) => handleStatusChange(row, v ? 1 : 0)"
          />
        </template>
        <!-- 平台币，点击可操作 -->
        <template #coin="{ row }">
          <ElTag
            type="info"
            size="small"
            class="cursor-pointer hover:opacity-80"
            @click="openWalletOperate(row)"
          >
            {{ row.coin ?? 0 }}
          </ElTag>
        </template>
        <!-- 操作 -->
        <template #operation="{ row }">
          <div class="flex items-center justify-center gap-1">
            <SaButton
              v-permission="'dice:player:index:getGameUrl'"
              type="success"
              icon="ri:links-line"
              :tool-tip="$t('page.table.getGameLink')"
              @click="handleGetGameUrl(row)"
            />
            <SaButton
              v-permission="'dice:player:index:update'"
              type="secondary"
              @click="showDialog('edit', row)"
            />
            <SaButton
              v-permission="'dice:player: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"
    />

    <!-- 钱包操作弹窗 -->
    <WalletOperateDialog
      v-model="walletDialogVisible"
      :player="walletOperatePlayer"
      @success="refreshData"
    />
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { useClipboard } from '@vueuse/core'
  import { useI18n } from 'vue-i18n'
  import { useTable } from '@/hooks/core/useTable'
  import { useSaiAdmin } from '@/composables/useSaiAdmin'
  import api from '../../api/player/index'
  import { withChannelDeptParams } from '@/composables/useChannelDeptScope'
  import TableSearch from './modules/table-search.vue'
  import EditDialog from './modules/edit-dialog.vue'
  import WalletOperateDialog from './modules/WalletOperateDialog.vue'
  import { lotteryPoolRowLabel } from '@/views/plugin/dice/utils/lotteryPoolDisplay'

  const { t } = useI18n()
  const { copy } = useClipboard()

  // 搜索表单
  const searchForm = ref({
    username: undefined,
    name: undefined,
    phone: undefined,
    status: undefined,
    coin: undefined,
    lottery_config_id: undefined
  })

  // 搜索
  const handleSearch = (params: Record<string, any>) => {
    Object.assign(searchParams, params)
    getData()
  }

  // 权重列显示为百分比
  const weightFormatter = (prop: string) => (row: any) => {
    const cellValue = row[prop]
    return cellValue != null && cellValue !== '' ? `${cellValue}%` : '-'
  }

  const lotteryConfigNameFormatter = (row: any) => {
    const label = lotteryPoolRowLabel(row)
    if (label === '-' && !row?.lottery_config_id) {
      return t('page.table.customConfig')
    }
    return label
  }

  // 表格
  const {
    columns,
    columnChecks,
    data,
    loading,
    getData,
    searchParams,
    pagination,
    resetSearchParams,
    handleSortChange,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: api.list,
      columnsFactory: () => [
        { type: 'selection' },
        { prop: 'username', label: 'page.table.username', align: 'center' },
        { prop: 'phone', label: 'page.table.phone', align: 'center' },
        { prop: 'name', label: 'page.table.nickname', align: 'center' },
        {
          prop: 'status',
          label: 'page.table.status',
          width: 88,
          align: 'center',
          useSlot: true
        },
        {
          prop: 'coin',
          label: 'page.table.coin',
          width: 110,
          align: 'center',
          useSlot: true
        },
        {
          prop: 'lottery_config_id',
          label: 'page.table.lotteryPoolConfig',
          width: 120,
          align: 'center',
          formatter: (row: any) => lotteryConfigNameFormatter(row)
        },
        {
          prop: 't1_weight',
          label: 'page.table.t1Weight',
          width: 80,
          align: 'center',
          formatter: weightFormatter('t1_weight')
        },
        {
          prop: 't2_weight',
          label: 'page.table.t2Weight',
          width: 100,
          align: 'center',
          formatter: weightFormatter('t2_weight')
        },
        {
          prop: 't3_weight',
          label: 'page.table.t3Weight',
          width: 100,
          align: 'center',
          formatter: weightFormatter('t3_weight')
        },
        {
          prop: 't4_weight',
          label: 'page.table.t4Weight',
          width: 100,
          align: 'center',
          formatter: weightFormatter('t4_weight')
        },
        {
          prop: 't5_weight',
          label: 'page.table.t5Weight',
          width: 100,
          align: 'center',
          formatter: weightFormatter('t5_weight')
        },
        { 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: 'create_time', label: 'page.table.createTime', align: 'center' },
        { prop: 'update_time', label: 'page.table.updateTime', align: 'center' },
        {
          prop: 'operation',
          label: 'table.actions.operation',
          width: 132,
          align: 'center',
          fixed: 'right',
          useSlot: true
        }
      ]
    }
  })

  // 状态切换
  const handleStatusChange = async (row: Record<string, any>, status: number) => {
    row._statusLoading = true
    try {
      await api.updateStatus(withChannelDeptParams({ id: row.id, status }))
      row.status = status
    } catch {
      refreshData()
    } finally {
      row._statusLoading = false
    }
  }

  // 弹窗与删除
  const {
    dialogType,
    dialogVisible,
    dialogData,
    showDialog,
    deleteRow,
    deleteSelectedRows,
    handleSelectionChange,
    selectedRows
  } = useSaiAdmin()

  // 钱包操作弹窗
  const walletDialogVisible = ref(false)
  type WalletPlayer = { id: number; username?: string; coin?: number }
  const walletOperatePlayer = ref<WalletPlayer | null>(null)

  function openWalletOperate(row: Record<string, any>) {
    walletOperatePlayer.value = {
      id: Number(row.id),
      username: row.username,
      coin: row.coin != null ? Number(row.coin) : undefined
    }
    walletDialogVisible.value = true
  }

  async function handleGetGameUrl(row: Record<string, any>) {
    try {
      const res = await api.getGameUrl({ id: row.id })
      const url =
        typeof res?.url === 'string' ? res.url : typeof res?.data?.url === 'string' ? res.data.url : ''
      if (!url) {
        ElMessage.warning(t('page.table.getGameLinkFail'))
        return
      }
      await copy(url)
      ElMessage.success(t('page.table.getGameLinkSuccess'))
    } catch (e: any) {
      const msg = typeof e?.message === 'string' && e.message !== '' ? e.message : t('page.table.getGameLinkFail')
      ElMessage.warning(msg)
    }
  }
</script>
