import React, { useState, useEffect, useCallback } from 'react';
import _ from 'lodash';
import ApolloTable from '../apollo-table';
import { getColumnConfig, getDataSource } from './serives';
import { message } from 'antd';

const rowStyle = ({ index, record }) => {
    const style: any = {};
    if (index % 3 === 0) {
        style.background = 'red';
    }
    return style;
};
const tableId = 1;
interface RowData {
    id: number;
    rowData: any[];
}
interface PageConfig {
    pageNum: number;
    pageSize: number;
    hasNextPage: boolean;
    nextPage: number;
}
const Demo1 = (props) => {
    const [columns, setColumns] = useState([]);
    useEffect(() => {
        const getColumnsList = async () => {
            const res = await getColumnConfig({ tableId });
            if (res && res.success && res.data) {
                const arr = Array.isArray(res.data) ? res.data : [];
                setColumns(arr);
            }
        };
        getColumnsList();
    }, []);
    const [dataSource, setDataSource] = useState<RowData[]>([]);
    const [pageConfig, setPageConfig] = useState<PageConfig>({
        pageNum: 1,
        pageSize: 50,
        hasNextPage: false,
        nextPage: 1,
    });
    useEffect(() => {
        const getDataList = async () => {
            const data = {
                pageNum: pageConfig.nextPage,
                pageSize: pageConfig.pageSize,
            };
            const res = await getDataSource({ tableId, data });
            if (res && res.success && res.data) {
                const { list, hasNextPage, nextPage } = res.data;
                let arr = Array.isArray(list) ? list : [];
                setDataSource([...dataSource, ...arr]);
                setPageConfig({ ...data, hasNextPage, nextPage });
            }
        };
        getDataList();
    }, [pageConfig.pageNum]);
    const fetchData = useCallback(async (isClean: boolean) => {
        const data = {
            pageNum: isClean ? 1 : pageConfig.nextPage,
            pageSize: pageConfig.pageSize,
        };
        const res = await getDataSource({ tableId, data });
        if (res && res.success && res.data) {
            const arr = Array.isArray(res.data.list) ? res.data.list : [];
            setDataSource(arr);
        }
    }, []);
    const onScroll = () => {
        if (pageConfig.hasNextPage) {
            setPageConfig({ ...pageConfig, pageNum: pageConfig.nextPage });
        } else {
            message.warning('没有更多了');
        }
    };
    const debounceScroll = _.debounce(onScroll, 400);
    return (
        <ApolloTable
            rowStyle={rowStyle}
            columns={columns}
            dataSource={dataSource}
            tableId={tableId}
            onScroll={debounceScroll}
        />
    );
};
export default Demo1;