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, getLocalSymbolList} from '@/js/utils/local';
import CustomInput from '@/js/components/Input';
import {isShow} from '@/js/utils/dom';

class TradeSelect extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            status: '',
            userSelect: {
                label: '用户',
                options: getLocalUserList(),
            },
            // 交易对options
            SymbolOptions: []
        }


    }

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

    }

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

    getSymb = async () => {
        const list = await getLocalSymbolList();
        this.setState({
            SymbolOptions: list,
        })
    }

    componentDidMount() {
        // 获取交易对
        this.getSymb();
    }


    render() {
        const {userSelect} = 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>
                        <CustomSelect value={this.state.pairs} name={'pairs'}
                                      options={this.state.SymbolOptions}
                                      filterable={true}
                                      className={"trade-dialog-select"}
                                      clearable={true} multiple={false} autoWidth={false}
                                      popupProps={{
                                          overlayClassName: 'trade-dialog-select__overlay'
                                      }} onChange={this.valueChange}></CustomSelect>
                    </div>
                    <div className='custom-trade-input' style={{
                        display: isShow(this.props.tableType === '2')
                    }}>
                        <span className='label'>状态</span>
                        <CustomInput name={'status'} type={'text'} onChange={this.valueChange}
                                     value={this.state.status}></CustomInput>
                    </div>
                    <CustomButton onClick={this.onFilter.bind(this, {
                        exchange_users_id: this.state.user,
                        symbol: this.state.pairs,
                        status: this.state.status,
                    })}>查询</CustomButton>
                    <CustomButton onClick={this.onFilter.bind(this, {
                        exchange_users_id: this.state.user,
                        symbol: this.state.pairs,
                        status: this.state.status,
                    })}>刷新</CustomButton>
                </div>
                {this.props.children}
            </div>

        );
    }
}

export default TradeSelect;
