<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { http } from '../../api/http'
import { formatDateTimeZh, formatDateZh } from '../../utils/datetime'
import { bookingTypeLabel } from '../../utils/bookingType'
import { listTableRowIndex } from '../../utils/listTableRowIndex'
import { reservationStatusLabel } from '../../utils/reservationStatus'

const TG_REGISTRATIONS_LIST_SCROLL_X = 1680

type Row = {
  id: number
  visitor_name: string
  visitor_phone?: string | null
  id_card?: string | null
  booking_type?: string | null
  ticket_count?: number
  status: 'pending' | 'verified' | 'cancelled' | 'expired'
  qr_token: string
  created_at: string
  verified_at?: string | null
  entry_date?: string | null
  venue?: { id: number; name: string }
  ticket_grab_event?: { id: number; title: string }
}

type TicketGrabEventOption = { id: number; title: string }

const loading = ref(false)
const status = ref<'all' | 'pending' | 'verified' | 'cancelled' | 'expired'>('all')
const keyword = ref('')
const ticketGrabEventId = ref<number | undefined>(undefined)
const dateRange = ref<string[]>([])
const pagination = reactive({ current: 1, pageSize: 10, total: 0 })
const rows = ref<Row[]>([])
const ticketGrabEvents = ref<TicketGrabEventOption[]>([])

async function loadTicketGrabEvents() {
  try {
    const { data } = await http.get<{ data: { id: number; title: string }[] }>('/ticket-grab-events/options', {
      params: { limit: 2000 },
    })
    ticketGrabEvents.value = data.data ?? []
  } catch {
    ticketGrabEvents.value = []
  }
}

async function loadRows() {
  loading.value = true
  try {
    const { data } = await http.get('/activity-registrations', {
      params: {
        reservation_kind: 'ticket_grab',
        ticket_grab_event_id: ticketGrabEventId.value || undefined,
        status: status.value,
        keyword: keyword.value || undefined,
        start_date: dateRange.value?.[0] || undefined,
        end_date: dateRange.value?.[1] || undefined,
        page: pagination.current,
        page_size: pagination.pageSize,
      },
    })
    rows.value = data.data
    pagination.total = data.total
  } catch (e: any) {
    Message.error(e?.response?.data?.message ?? '加载失败')
  } finally {
    loading.value = false
  }
}

function onPageChange(cur: number) {
  pagination.current = cur
  void loadRows()
}

function onPageSizeChange(s: number) {
  pagination.pageSize = s
  pagination.current = 1
  void loadRows()
}

onMounted(async () => {
  await loadTicketGrabEvents()
  await loadRows()
})
</script>

<template>
  <a-card title="抢票管理 / 抢票报名" :bordered="false">
    <a-space direction="vertical" fill>
      <a-space wrap :size="12">
        <a-select
          v-model="ticketGrabEventId"
          allow-clear
          placeholder="抢票活动（全部）"
          style="width: 260px"
          allow-search
          @change="
            () => {
              pagination.current = 1
              loadRows()
            }
          "
        >
          <a-option v-for="e in ticketGrabEvents" :key="e.id" :value="e.id">{{ e.title }}</a-option>
        </a-select>
        <a-radio-group v-model="status" type="button" size="small" @change="loadRows">
          <a-radio value="all">全部</a-radio>
          <a-radio value="pending">待核销</a-radio>
          <a-radio value="verified">已核销</a-radio>
          <a-radio value="cancelled">已取消</a-radio>
          <a-radio value="expired">已过期</a-radio>
        </a-radio-group>
        <a-input v-model="keyword" placeholder="姓名 / 身份证 / token" allow-clear style="width: 220px" />
        <a-range-picker v-model="dateRange" style="width: 260px" />
        <a-button
          type="primary"
          @click="
            () => {
              pagination.current = 1
              loadRows()
            }
          "
        >
          查询
        </a-button>
      </a-space>

      <a-table
        :scroll="{ x: TG_REGISTRATIONS_LIST_SCROLL_X }"
        :data="rows"
        :loading="loading"
        row-key="id"
        :pagination="{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          showTotal: true,
          onChange: onPageChange,
          onPageSizeChange,
        }"
      >
        <template #columns>
          <a-table-column title="" :width="50" :ellipsis="true" :tooltip="true">
            <template #cell="{ rowIndex }">{{
              listTableRowIndex(rowIndex, pagination.current, pagination.pageSize)
            }}</template>
          </a-table-column>
          <a-table-column title="抢票活动" :width="200" :ellipsis="true" :tooltip="true">
            <template #cell="{ record }">{{ record.ticket_grab_event?.title ?? '-' }}</template>
          </a-table-column>
          <a-table-column title="场馆" :width="160" :ellipsis="true" :tooltip="true">
            <template #cell="{ record }">{{ record.venue?.name ?? '-' }}</template>
          </a-table-column>
          <a-table-column title="姓名" data-index="visitor_name" :width="100" />
          <a-table-column title="身份证" data-index="id_card" :width="180" :ellipsis="true" :tooltip="true" />
          <a-table-column title="入馆日" :width="120">
            <template #cell="{ record }">{{
              record.entry_date ? formatDateZh(String(record.entry_date)) : '-'
            }}</template>
          </a-table-column>
          <a-table-column title="预约类型" :width="100">
            <template #cell="{ record }">{{ bookingTypeLabel(record.booking_type, record.ticket_count) }}</template>
          </a-table-column>
          <a-table-column title="票数" :width="80">
            <template #cell="{ record }">{{ record.ticket_count ?? 1 }}</template>
          </a-table-column>
          <a-table-column title="状态" :width="100">
            <template #cell="{ record }">
              <a-tag
                :color="
                  record.status === 'verified'
                    ? 'green'
                    : record.status === 'pending'
                      ? 'arcoblue'
                      : 'gray'
                "
                >{{ reservationStatusLabel(record.status) }}</a-tag
              >
            </template>
          </a-table-column>
          <a-table-column title="下单时间" :width="170">
            <template #cell="{ record }">{{ formatDateTimeZh(record.created_at) }}</template>
          </a-table-column>
          <a-table-column title="核销时间" :width="170">
            <template #cell="{ record }">{{
              record.verified_at ? formatDateTimeZh(String(record.verified_at)) : '-'
            }}</template>
          </a-table-column>
          <a-table-column title="核销 Token" :width="220" :ellipsis="true" :tooltip="true">
            <template #cell="{ record }">
              <span style="font-family: monospace; font-size: 12px">{{ record.qr_token }}</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-space>
  </a-card>
</template>
