<template>
  <a-table
    :pagination="pagination"
    :dataSource="tableList"
    :columns="columns"
    :rowKey="rowKey"
    v-bind="$attrs"
    @change="onTableChange"
  >
    <template v-for="custom in columnsCustoms" v-slot:[custom.customRender]="text, record, index">
      <slot :name="custom.customRender" :text="text" :record="record" :index="index"></slot>
    </template>
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      tableList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: (total, range) => `共${total}條記錄`,
        showSizeChanger: true,
        showQuickJumper: true
      }
    }
  },
  props: {
    fetchData: {
      type: Function,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    rowKey: {
      type: String,
      default: 'id'
    }
  },
  computed: {
    columnsCustoms() {
      return this.columns.filter(record => record.scopedSlots).map(item => item.scopedSlots)
    }
  },
  mounted() {
    this.getTableList(this.pagination)
  },
  methods: {
    getTableList(pagination) {
      const { data } = this.fetchData(pagination)
      if (data.code === 200) {
        const { records, total, current, pageSize } = data.data
        this.tableList = records
        this.pagination.total = total
        this.pagination.current = current
        this.pagination.pageSize = pageSize
      }
    },
    onTableChange(pagination) {
      this.getTableList(pagination)
    }
  }
}
</script>