<template>
  <div>
    <a-table
      :rowKey="pk"
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :size="size"
      :bordered="bordered"
      :scroll="scroll"
      :pagination="{
        current: pageNo,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        size: 'small',
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total) => `共 ${total} 条`,
        onChange: jumpPage,
        onShowSizeChange: changePageSize,
      }"
    >
      <template
        v-for="(func, name) of $scopedSlots"
        v-slot:[name]="text, record, index"
      >
        <template v-if="name === 'no'">
          <slot
            :name="name"
            v-bind="
              Object.assign(record, { index: (pageNo - 1) * pageSize + index })
            "
          ></slot>
        </template>
        <template v-else-if="name === 'expandedRowRender'">
          <slot :name="name" v-bind="text"></slot>
        </template>
        <template v-else>
          <slot :name="name" v-bind="record"></slot>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "BaseTable",
  props: {
    pk: { type: String, default: "id" },
    columns: { type: Array, default: () => [] },
    dataSource: { type: Array, default: () => [] },
    tableLoading: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
    total: { type: Number, default: 0 },
    size: { type: String, default: "default" },
    scroll: { type: Object, default: () => {} },
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
    };
  },
  methods: {
    jumpPage(pageNo, pageSize) {
      this.pageNo = pageNo || this.pageNo;
      this.pageSize = pageSize || this.pageSize;
      this.$emit("queryData", { pageNo: pageNo, pageSize: pageSize });
    },
    changePageSize(pageNo, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.$emit("queryData", { pageNo: 1, pageSize: pageSize });
    },
    // 在父组件刷新数据时调用子组件传入当前分页参数
    refreshData() {
      this.$emit("queryData", { pageNo: this.pageNo, pageSize: this.pageSize });
    },
  },
};
</script>

<style scoped>
</style>
