export default {
    props: {
        pageNo: {
            default: 1,
            type: Number,
        },
        pageSize: {
            default: 10,
            type: Number,
        },
        loadData: {
            type: Function,
            require: true,
        },
    },

    data() {
        return {
            loading: false,

            data: [],

            pagination: {
                current: this.pageNo,
                pageSize: this.pageSize,
                total: 0,
                size: 'small',
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `总共${total}条数据`
            },
        };
    },

    created() {
        this.onLoadData()
    },

    methods: {

        onLoading() {
            this.loading = {
                indicator: <a-icon type="loading" spin />
            }
        },

        onLoaded() {
            this.loading = false
        },

        onLoadData() {
            this.onLoading()

            this.loadData({
                pageNo: this.pagination.current,
                pageSize: this.pagination.pageSize,
                ...this.sorter
            }).then((res) => {
                this.data = res.rows
                this.pagination.total = res.totalRows
                this.onLoaded()
            })
        },

        onReloadData(refresh = false) {
            if (refresh && refresh.constructor === Boolean && this.pagination.constructor === Object) {
                this.pagination.current = this.pageNo
                this.pagination.pageSize = this.pageSize
            }
            this.onLoadData()
        },

    },

    render() {
        const props = {
            loading: this.loading,
            pagination: this.pagination,
            dataSource: this.data,
            rowKey: record => record.id,
            ...this.$attrs
        }

        const on = {
            //change: this.onTableChange
        }
        return (
            <section>
                <div class="yo-action-bar">
                    <div class="yo-action-bar--actions">
                        {this.$scopedSlots.operator && this.$scopedSlots.operator()}
                    </div>
                    <div class="yo-action-bar--actions">
                        <a-button-group>
                            <a-button onClick={this.onReloadData}>刷新</a-button>
                        </a-button-group>
                    </div>
                </div>
                <a-list {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
                    {Object.keys(this.$slots).map((name) => (
                        <template slot={name}>{this.$slots[name]}</template>
                    ))}
                </a-list>
            </section>
        )
    },
}
