/** @format */

import * as React from 'react';
import moment from 'moment';
import Search, {SearchItemProps} from '../../../../../components/search/search';
import MerchantSelect from '../../../../../components/select/merchant';
import BaseApiSelect from '../../../../../components/select/baseApiSelect';
import RangePicker from '../../../../../components/datePicker/rangePicker';

interface Iprops {
    seacrhColums?: SearchItemProps[];
    onSearch?: (values: any) => void;
}
const startTime = moment('00:00:00', 'HH:mm:ss');
const endTime = moment('23:59:59', 'HH:mm:ss');
const BaseSearch: React.FC<Iprops> = props => {
    const {seacrhColums = [], onSearch} = props;

    const handleSubmit = (values: any) => {
        const {time, ...rest} = values;
        onSearch &&
            onSearch({
                ...rest,
                start_timestamp: time[0].unix(),
                end_timestamp: time[1].unix(),
            });
    };
    const [dependState, setDependState] = React.useState<{merchant_id: number | ''; api_id: number | ''}>({
        api_id: '',
        merchant_id: '',
    });
    const handleReset = () => {
        setDependState(preState => ({...preState, api_id: '', merchant_id: ''}));
    };
    const SearchColumns = React.useMemo(() => {
        const columns: SearchItemProps[] = [
            {
                key: 'merchant_id',
                col:{
                  xxl:5,
                  lg:6,
                },
                component: (
                    <MerchantSelect
                        api_ids={dependState.api_id}
                        onChange={id => {
                            setDependState(preState => ({...preState, merchant_id: id as number | ''}));
                        }}
                    />
                ),
            },
            {
                key: 'api_id',
                col:{
                  xxl:5,
                  lg:6,
                },

                component: (
                    <BaseApiSelect
                        merchant_id={dependState.merchant_id}
                        placeholder='请选择接口(必选)'
                        onChange={id => setDependState(preState => ({...preState, api_id: id as number | ''}))}
                    />
                ),
            },
            {
                key: 'time',
                col:{
                  xxl:8,
                  lg:8,
                },                options: {
                    initialValue: [startTime, endTime],
                },
                component: <RangePicker showTime />,
            },
        ];
        return columns.concat(seacrhColums);
    }, [seacrhColums, dependState]);
    return (
        <Search
            handleReset={handleReset}
            disabled={!dependState.api_id}
            algin='start'
            dataSource={SearchColumns}
            handleSubmit={handleSubmit}
        />
    );
};
export default BaseSearch;
