import React, { useState, useEffect, useCallback } from 'react';
import _ from 'lodash';
import ApolloTable from '../apolloTable';
import {
    getColumnConfig,
    getDataSource,
    addOrUpdateDataSource,
    approvalBusinessData,
    getDepartmentList,
    dictionaryTree,
} 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 : [];
                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 === 'customerBudget') {
            return {
                detailComp: ()=><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 === 'customerBudget') {
                item.columnType = 10;
                item.renderDetailCell = renderDetailCell;
                // item.renderEditCell = renderEditCell;
            }
            if (Number(item.columnType) === 13 || Number(item.columnType) === 15) {
                item.columnAttrObj.request = (data) => {
                    data.paramsJson = JSON.stringify({ tableId });
                    return approvalBusinessData(data);
                };
            }
            if (Number(item.columnType) === 14) {
                item.columnAttrObj.request = async (data) => {
                    const res = await getDepartmentList(data);
                    if (res && res.success && res.data) {
                        return [res.data];
                    }
                };
            }
            if (Number(item.columnType) === 17) {
                item.columnAttrObj.request = async (id) => {
                    const res = await dictionaryTree(id, {});
                    if (res && res.success && res.data) {
                        return res.data;
                    }
                };
            }
            return item;
        });
        return columns;
    };

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