<template>
  <div>
    <a-table :columns="columns" :data="data" :row-key="rowKey" :loading="loading" :pagination="false"
      @sorter-change="handleSorterChange" @select="handleSelect" @select-all="handleSelectAll" @expand="handleExpand">
      <template v-for="item in columns" :key="item.slotName" #[item.slotName]="{ record, rowIndex, column }">
        <slot :name="item.slotName" v-bind="{ record, rowIndex, column }"></slot>
      </template>
      <template v-for="item in columns" :key="item.titleSlotName" #[item.titleSlotName]="{ record, rowIndex, column }">
        <a-popover :content="item.titleTip"
          :content-style="{ fontSize: '13px', padding: '10px 14px', fontWeight: 500 }">
          <div class="title-tip">{{ item.title }}</div>
        </a-popover>
      </template>
    </a-table>
    <a-pagination class="pagination" v-if="pagination.total" :current="pagination.current" :total="pagination.total"
      :page-size="pagination.pageSize" @change="handlePageChange" @show-size-change="handleSizeChange" />
  </div>
</template>

<script setup>
import { toRefs, defineProps, defineEmits } from 'vue';

// 定义接收的 props
const props = defineProps({
  data: Array,
  columns: Array,
  rowKey: String,
  loading: Boolean,
  pagination: Object
});

const { data, columns, rowKey, loading, pagination } = toRefs(props);

// 定义 emit 事件
const emit = defineEmits(['sorterChange', 'select', 'selectAll', 'expand', 'pageChange', 'sizeChange']);

// 分页事件处理
const handlePageChange = (page) => {
  emit('pageChange', page);
};

const handleSizeChange = (current, size) => {
  emit('sizeChange', current, size);
};

// 排序事件处理
const handleSorterChange = (sorter) => {
  emit('sorterChange', sorter);
};

// 选择事件处理
const handleSelect = (selected, record) => {
  emit('select', selected, record);
};

const handleSelectAll = (selected, records) => {
  emit('selectAll', selected, records);
};

// 展开事件处理
const handleExpand = (expanded, record) => {
  emit('expand', expanded, record);
};
</script>

<style lang="css" scoped>
:deep(.arco-pagination) {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
