import React, { Component } from 'react'
import { Button, Form, List, Pagination, Spin } from 'antd'
import { AntIcon } from 'components'

export default class QueryList extends Component {

    state = {
        loading: false,
        dataSource: []
    }

    // 查询表单实例
    form = React.createRef()

    // 查询值
    query = {}

    // 分页器配置
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `总共${total}条数据`
    }

    // 默认选中页码
    pageIndex = 1
    // 默认页面尺寸
    pageSize = 10

    constructor(props) {
        super(props)

        this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }

        if (this.props.pageIndex) {
            this.pageIndex = this.props.pageIndex
            this.pagination.current = this.pageIndex
        }
        if (this.props.pageSize) {
            this.pageSize = this.props.pageSize
            this.pagination.pageSize = this.pageSize
        }
    }

    /**
     * 自动加载数据
     */
    componentDidMount() {
        if (this.autoLoad) {
            this.onLoadData()
        }
    }

    /**
     * 加载数据
     * 调用外部传入的loadData函数,可在loadData中自行改变参数
     */
    async onLoadData() {
        this.onLoading()

        const res = await this.props.loadData({
            pageIndex: this.pagination.current,
            pageSize: this.pagination.pageSize
        }, this.query)

        this.setState({
            dataSource: res.rows || res.data || res.items
        })

        this.pagination.total = res.totalCount

        this.onLoaded()
    }

    /**
     * 数据开始加载
     */
    onLoading() {
        this.setState({ loading: true })
    }

    /**
     * 数据加载完成
     */
    onLoaded() {
        this.setState({ loading: false })
    }

    /**
     * 进行查询
     * 返回表单字段值,加载数据,并且返回到第一页
     * @param {*} values 
     */
    onQuery(values) {
        this.query = values
        this.onReloadData(true)
    }

    /**
     * 重置查询
     * 初始化表单字段值,加载数据,并返回到第一页
     */
    onResetQuery() {
        this.form.current.resetFields()
        this.query = {}
        this.onReloadData(true)
    }

    /**
     * 重新加载表格数据
     * @param {Boolean} resetPage 是否重置页码
     */
    onReloadData(resetPage = false) {
        if (resetPage) {
            this.pagination = {
                ...this.pagination,
                current: this.pageIndex
            }
        }
        this.onLoadData()
    }

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

    /**
    * 渲染查询栏
    * @returns 
    */
    renderQueryBar() {

        const { query, moreQuery } = this.props

        return (
            <div className="yo-query-bar">
                <Form
                    layout="inline"
                    ref={this.form}
                    onFinish={(value) => this.onQuery(value)}
                >
                    {query}
                    <Form.Item>
                        <Button.Group className="mr-xs">
                            <Button htmlType="submit" type="primary">查询</Button>
                            <Button onClick={() => this.onResetQuery()}>重置</Button>
                        </Button.Group>
                        {
                            moreQuery && <Button>更多查询条件</Button>
                        }
                    </Form.Item>
                </Form>
            </div>
        )
    }

    render() {

        const props = {
            dataSource: this.state.dataSource,
            rowKey: record => record.id || Math.random().toString(16).slice(2),
            ...this.props
        }

        return (
            <section>
                {this.props.query && this.renderQueryBar()}
                <div className="yo-action-bar">
                    <div className="yo-action-bar--actions">
                        {this.props.operator}
                    </div>
                    <div className="yo-action-bar--actions">
                        <Button.Group>
                            <Button>刷新</Button>
                        </Button.Group>
                    </div>
                </div>
                <div className="yo-list">
                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                        <List {...props} />
                        {
                            !!this.state.dataSource && !!this.state.dataSource.length &&
                            <Pagination
                                size="small"
                                {...this.pagination}
                                onChange={(current, pageSize) => this.onListChange(current, pageSize)}
                            />
                        }
                    </Spin>
                </div>
            </section>
        )
    }
}