<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import type { DataTableProps } from '@/components/data-table/types'
import type { AgentApp } from '../data/schema'

import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import DataTable from '@/components/data-table/data-table.vue'
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
import { getColumns } from './columns'

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

const emit = defineEmits<{
  refresh: []
}>()

const { t } = useI18n()

const columns = computed(() => getColumns({
  onEdit: props.onEdit,
  onDelete: props.onDelete,
  onToggleStatus: props.onToggleStatus,
}, t))

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

const columnLabels: Record<string, string> = {
  agent_name: '代理',
  app_name: '应用',
  card_types: '卡密类型',
  balance: '余额',
  status: '状态',
  actions: '操作',
}

defineExpose({
  table,
})
</script>

<template>
  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
    <template #toolbar>
      <div class="flex items-center justify-between">
        <div class="text-sm text-muted-foreground">
          共 {{ data.length }} 条授权记录
        </div>
      </div>
    </template>
  </DataTable>
</template>
