import './index.less'
import {Component} from "react";
import CustomSelect from "@/js/components/Select";
import CustomButton from '@/js/components/Button';
import {isMobile} from '@/js/utils/tool';
import {getLocalUserList, getLocalContractHelperSelect} from '@/js/utils/local';
import CustomInput from '@/js/components/Input';

class TradeSelect extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            pairs: '',
            direction: '',
            exchange: '',
            userSelect: {
                label: '用户',
                options: getLocalUserList(),
            },
            directionSelect: {
                label: '方向',
                options: getLocalContractHelperSelect('position_side')
            },
            exchangeSelect: {
                label: '交易所',
                options: getLocalContractHelperSelect('exchange')
            },
        }

    }

    onFilter(params: any) {
        // 请求表格
        if (this.props.FilterChange) {
            this.props.FilterChange(params)
        }

    }

    valueChange = (value: string | number, name: string) => {
        this.setState({
            [name]: value,
        })
    }

    render() {
        const {userSelect, exchange, directionSelect, exchangeSelect} = this.state;
        return (
            <div className={[isMobile() ? 'custom-trade-select-box__mobile' : ''].join(' ')}>
                <div
                    className={['custom-trade-select-box'].join(' ')}>
                    <div className='custom-trade-select'>
                        <span className='label'>{userSelect.label}</span>
                        <CustomSelect className='real-trade-select' name={'user'} value={this.state.user}
                                      options={userSelect.options} onChange={this.valueChange}></CustomSelect>
                    </div>

                    <div className='custom-trade-input'>
                        <span className='label'>交易对</span>
                        <CustomInput name={'pairs'}
                                     value={this.state.pairs} onChange={this.valueChange}></CustomInput>
                        {/*<CustomSelect className='real-trade-select' options={pairsSelect.options}></CustomSelect>*/}
                    </div>
                    <div className='custom-trade-select'>
                        <span className='label'>{directionSelect.label}</span>
                        <CustomSelect name={'direction'} value={this.state.direction} className='real-trade-select'
                                      options={directionSelect.options} onChange={this.valueChange}></CustomSelect>
                    </div>
                    <div className='custom-trade-select'>
                        <span className='label'>{exchangeSelect.label}</span>
                        <CustomSelect name={'exchange'} value={exchange} className='real-trade-select'
                                      options={exchangeSelect.options} onChange={this.valueChange}></CustomSelect>
                    </div>
                    <CustomButton onClick={this.onFilter.bind(this, {
                        exchange_users_id: this.state.user,
                        symbol: this.state.pairs,
                        position_side: this.state.direction,
                        exchange: this.state.exchange,
                    })}>查询</CustomButton>
                    <CustomButton onClick={this.onFilter.bind(this, {
                        exchange_users_id: this.state.user,
                        symbol: this.state.pairs,
                        position_side: this.state.direction,
                        exchange: this.state.exchange,
                    })}>刷新</CustomButton>
                </div>
                {this.props.children}
            </div>

        );
    }
}

export default TradeSelect;
