<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'

import { computed } from 'vue'

import type { DataTableProps } from '@/components/data-table/types'
import type { PaymentChannel } from '@/pages/admin/payment-channels/data/schema'

import BulkActions from '@/components/data-table/bulk-actions.vue'
import DataTable from '@/components/data-table/data-table.vue'
import { SelectColumn } from '@/components/data-table/table-columns'
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
import DataTableViewOptions from '@/components/data-table/view-options.vue'
import { getColumns } from '@/pages/admin/payment-channels/components/columns'

const props = defineProps<Omit<DataTableProps<PaymentChannel>, 'columns'> & {
  onToggleStatus: (row: PaymentChannel) => void
  onEdit: (row: PaymentChannel) => void
  onDelete: (row: PaymentChannel) => void
}>()

const emit = defineEmits<{
  'refresh': []
  'batchEnable': []
  'batchDisable': []
  'batchDelete': []
}>()

const t = (key: string) => key

const columns = computed<ColumnDef<PaymentChannel>[]>(() => [
  SelectColumn as ColumnDef<PaymentChannel>,
  ...getColumns({
    onToggleStatus: props.onToggleStatus,
    onEdit: props.onEdit,
    onDelete: props.onDelete,
  }, t),
])

const table = generateVueTable<PaymentChannel>({
  get data() { return props.data },
  get loading() { return props.loading },
  columns: columns.value,
}, columns.value)

const columnLabels: Record<string, string> = {
  select: '选择',
  name: '渠道名称',
  type: '渠道类型',
  sort: '排序',
  status: '状态',
  remark: '备注',
  created_at: '创建时间',
}

defineExpose({
  table,
})
</script>

<template>
  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
    <template #toolbar>
      <div class="space-y-3">
        <BulkActions :table="table" entity-name="payment-channels">
          <UiButton variant="outline" size="sm" @click="emit('batchEnable')">
            批量启用
          </UiButton>
          <UiButton variant="outline" size="sm" @click="emit('batchDisable')">
            批量禁用
          </UiButton>
          <UiButton variant="destructive" size="sm" @click="emit('batchDelete')">
            批量删除
          </UiButton>
        </BulkActions>
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="text-sm text-muted-foreground">
            共 {{ data.length }} 个支付渠道
          </div>
          <DataTableViewOptions :table="table" :column-labels="columnLabels" />
        </div>
      </div>
    </template>
  </DataTable>
</template>
