/** @format */

import * as React from 'react';
import {Table} from 'antd';
import moment from 'moment';
import {ColumnProps} from 'antd/es/table';
import ProviderApi from '../../../../components/select/providerApi';
import {useDataOview} from '../../../../service/dashbordProvide';
import {formatNumer} from '../../../../utils/operation';
const nowTime = moment();
const nowDay = nowTime.format('MM-DD');
const yesterday = nowTime.subtract(1, 'd').format('MM-DD');
const weekStart = nowTime
    .startOf('week')
    .add(1, 'd')
    .format('MM-DD');
const weekEnd = nowTime
    .endOf('week')
    .add(1, 'd')
    .format('MM-DD');
const monthStart = nowTime.startOf('month').format('MM-DD');
const monthEnd = nowTime.endOf('month').format('MM-DD');

interface dataOverviewColumsProps {
    title: string;
    dataIndex: string;
    key: string;
}
const columns: ColumnProps<dataOverviewColumsProps>[] = [
    {
        title: '',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: `今日(${nowDay})`,
        dataIndex: 'today',
        key: 'today',
        align: 'right',
        render: formatNumer,
    },
    {
        title: `昨日(${yesterday})`,
        dataIndex: 'yesterday',
        key: 'yesterday',
        align: 'right',
        render: formatNumer,
    },
    {
        title: `本周(${weekStart}--${weekEnd})`,
        dataIndex: 'week',
        key: 'week',
        align: 'right',
        render: formatNumer,
    },
    {
        title: `本月(${monthStart}--${monthEnd})`,
        dataIndex: 'month',
        key: 'month',
        align: 'right',
        render: formatNumer,
    },
];
interface Iprops {
    today_end_timestamp: number;
}
interface Istate {
    provider_api_id: number | '';
}
/**
 * 数据概况
 */
const DataOverview: React.FC<Iprops> = props => {
    const {today_end_timestamp} = props;
    const [state, setState] = React.useState<Istate>({
        provider_api_id: '',
    });
    const [dataOverviewState, requetDataOverview] = useDataOview();
    React.useEffect(() => {
        requetDataOverview({
            today_end_timestamp: today_end_timestamp,
            provider_api_id: state.provider_api_id,
        });
    }, [today_end_timestamp, state.provider_api_id]);

    const handleChangeMerchange = (provider_api_id: any) => {
        setState(preState => ({...preState, provider_api_id}));
    };
    return (
        <>
            <ProviderApi onChange={handleChangeMerchange} style={{width: 250}} />
            <Table
                rowKey='key'
                size='small'
                pagination={false}
                loading={dataOverviewState.loading}
                dataSource={dataOverviewState.dataSource}
                columns={columns}
            />
        </>
    );
};
export default DataOverview;
