import React, { useState, useEffect, useCallback } from 'react';
import _ from 'lodash';
import ApolloTable from '../apollo-table';
import { getColumnConfig, getDataSource, addOrUpdateDataSource } from './serives';
import { Input, message, DatePicker } from 'antd';
import moment from 'moment';
import s from './demo1.less';

const rowStyle = ({ rowIndex }) => {
    const style: any = {};
    if (rowIndex % 3 === 0) {
        style.fontSize = '20px';
        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) {
                let arr = Array.isArray(res.data) ? res.data : [];
                arr[0].columnType=2;
                setColumns(formatColumns(arr));
            }
        };
        getColumnsList();
    }, []);
    const [dataSource, setDataSource] = useState<RowData[]>([]);
    const [pageConfig, setPageConfig] = useState<PageConfig>({
        pageNum: 1,
        pageSize: 50,
        hasNextPage: false,
        nextPage: 1,
    });
    const [flush, setFlush] = useState(false);
    useEffect(() => {
        const getDataList = async () => {
            const data = {
                pageNum: pageConfig.pageNum,
                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.pageNum,
            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);
    const emitChangeCell = async ({ rowId, value }) => {
        const res = await addOrUpdateDataSource({ data: { id: rowId, value } });
        if (res && res.success) {
            fetchData(true);
        }
    };
    const renderDetailCell = (data) => {
        const { columnConfig, cellData } = data;
        const record = data.rowData;
        const { id, rowData } = record;
        const { columnName } = columnConfig;
        if (columnName === 'customerNameInput') {
            return <div className={s.xxx}>{cellData[0] && cellData[0].text}</div>;
        }
    };
    const renderEditCell = (data) => {
        const { columnConfig, cellData } = data;
        const record = data.rowData;
        const { id, rowData } = record;
        const { columnName } = columnConfig;
        if (columnName === 'followUpDate') {
            const value = moment(cellData[0] && cellData[0].value);
            return (
                <div className={s.xxx}>
                    <Input/>
                </div>
            );
        }
    };
    const formatColumns = (columns) => {
        columns.map((item) => {
            if (item.columnName === 'followUpDate') {
                item.renderDetailCell = renderDetailCell;
                // item.renderEditCell = renderEditCell;
            }
            return item;
        });
        return columns;
    };

    return (
        <ApolloTable
            rowStyle={rowStyle}
            columns={columns}
            dataSource={dataSource}
            onScroll={debounceScroll}
            emitChangeCell={emitChangeCell}
            bordered={false}
            rowClassName={s.row}
        />
    );
};
export default Demo1;
