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

    data() {
        return {
            loading: false,

            data: [],

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

    created() {
        this.onLoadData()
    },

    methods: {

        onLoading() {
            this.loading = true
        },

        onLoaded() {
            this.loading = false
        },

        onLoadData() {
            this.onLoading()

            this.loadData({
                pageIndex: this.pagination.current,
                pageSize: this.pagination.pageSize,
                ...this.sorter
            }).then((res) => {
                this.data = res.rows || res.data || res.items
                this.pagination.total = res.totalCount
                this.onLoaded()
            })
        },

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

        onListChange(current, pageSize) {
            this.pagination.current = current
            this.pagination.pageSize = pageSize
            this.onLoadData()
        }

    },

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

        const on = {}
        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>
                <div class="yo-list">
                    <a-spin spinning={this.loading}>
                        <a-icon slot="indicator" type="loading" spin />
                        <a-list {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
                            {Object.keys(this.$slots).map((name) => (
                                <template slot={name}>{this.$slots[name]}</template>
                            ))}
                        </a-list>
                        {
                            !!this.data && !!this.data.length && <a-pagination
                                size="small"
                                {... { props: this.pagination }}
                                onChange={this.onListChange}
                                onShowSizeChange={this.onListChange}
                            />
                        }
                    </a-spin>
                </div>
            </section>
        )
    },
}
