<template>
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    :rowKey="rowKey"
    size="small"
    :scroll="{ x: scrollX, y: scrollY }"
    :locale="emptyLocale"
    class="data-table"
    @change="handleTableChange"
  >
    <template v-for="slot in Object.keys($slots)" #[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </a-table>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  dataSource: { type: Array, default: () => [] },
  columns: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  pagination: { type: [Object, Boolean], default: true },
  rowKey: { type: [String, Function], default: 'id' },
  scrollX: { type: [Number, String], default: undefined },
  scrollY: { type: [Number, String], default: undefined },
  emptyText: { type: String, default: '暂无数据' }
})

const emit = defineEmits(['change'])

const emptyLocale = computed(() => ({
  emptyText: props.emptyText
}))

const handleTableChange = (pagination, filters, sorter) => {
  emit('change', { pagination, filters, sorter })
}
</script>

<style scoped>
.data-table {
  width: 100%;
}
.data-table :deep(.ant-table-thead > tr > th) {
  background: var(--bg-container);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--font-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border-default);
}
.data-table :deep(.ant-table-tbody > tr > td) {
  font-size: var(--font-md);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}
.data-table :deep(.ant-table-tbody > tr:hover > td) {
  background: var(--bg-hover);
}
.data-table :deep(.ant-pagination) {
  margin-top: var(--space-sm);
}
</style>
