/** @format */

import * as React from 'react';
import moment from 'moment';

import Analysis from '../components/analysisChart';
import {useProvideResultAnalysis} from '../../../../service/report';
import StatusSelect from '../../../../components/select/resultSelect';
import ProvideSelect from '../../../../components/select/providerApi';
import Search from '../../../../components/search/search';
import Modal from '../../../../components/modalForm';
import RangePicker from '../../../../components/datePicker/rangePicker';
const startTime = moment('00:00:00', 'HH:mm:ss');
const endTime = moment('23:59:59', 'HH:mm:ss');
const Result: React.FC = props => {
    const {children} = props;
    const [state, setState] = React.useState({
        visible: false,
        disableSearch: true,
    });
    const [resultState, requestResult, clear] = useProvideResultAnalysis();
    const handleSearch = (values: any) => {
        const {time, ...rest} = values;
        requestResult({
            ...rest,
            start_timestamp: time[0].unix(),
            end_timestamp: time[1].unix(),
        });
    };
    const handleUpdateModalVisible = () => {
        setState(preState => {
            if (!!preState.visible) {
                clear();
            }
            return {...preState, visible: !preState.visible};
        });
    };
    return (
        <React.Fragment>
            {React.isValidElement(children) &&
                React.cloneElement(children, {
                    onClick: handleUpdateModalVisible,
                })}
            <Modal
                footer={null}
                visible={state.visible}
                onCancel={handleUpdateModalVisible}
                width={1200}
                title='结果分析'
            >
                <Search
                    handleSubmit={handleSearch}
                    disabled={state.disableSearch}
                    algin='start'
                    dataSource={[
                        {
                            key: 'provide_api_id',
                            col: {
                                xxl: 6,
                                lg: 6,
                            },
                            component: (
                                <ProvideSelect
                                    provider_id=''
                                    onChange={value => {
                                        setState(preState => ({...preState, disableSearch: !value}));
                                    }}
                                />
                            ),
                        },
                        {
                            key: 'time',
                            col: {
                                xxl: 8,
                                lg: 8,
                            },
                            options: {
                                initialValue: [startTime, endTime],
                            },
                            component: <RangePicker showTime />,
                        },
                        {
                            key: 'status',
                            col: {
                                xxl: 4,
                                lg: 4,
                            },
                            options: {
                                initialValue: 0,
                            },
                            component: <StatusSelect />,
                        },
                    ]}
                />
                <Analysis loading={resultState.loading} dataSource={resultState.dataSource} />
            </Modal>
        </React.Fragment>
    );
};
export default Result;
