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';
import {table_HoldingPosition, table_CurrentConsignment, table_HistoryTransaction} from '@/js/constants/trade';
import {SpotTradeField} from '@/js/constants/trade';

// 各表格要过滤的字段
const table_holding_position_field = ['status'];  // 持有资产
const table_current_consignment_field = ['quantity'];  // 当前委托
const table_historical_delegation_field = ['status', 'quantity'];  // 历史委托


class TradeSelect extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            [SpotTradeField.user_id]: '',
            status: 'NEW',
            quantity: "",
            symbol: '',
            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,
        })
    }

    // 获取筛选参数
    getFilterParams = (table_id: string = '') => {
        const {exchange_users_id, symbol, status, quantity} = this.state;
        let params: any = {};
        if (exchange_users_id) {
            params.exchange_users_id = exchange_users_id;
        }
        if (symbol) {
            params.symbol = symbol;
        }
        if (status) {
            params.status = status;
        }
        if (quantity) {
            params.quantity = quantity;
        }
        if (this.state[SpotTradeField.user_id]) {
            params[SpotTradeField.user_id] = this.state[SpotTradeField.user_id];
        }
        // 过滤不要的字段
        let list = [];
        if (table_id) {
            if (table_id === table_HoldingPosition) {
                list = table_holding_position_field;
            } else if (table_id === table_CurrentConsignment) {
                list = table_current_consignment_field;
            } else if (table_id === table_HistoryTransaction) {
                list = table_historical_delegation_field;
            }
            // params的字段列表
            const params_field = Object.keys(params);
            list.forEach((item) => {
                const index = params_field.findIndex((it: any) => it === item);
                if (index !== -1) {
                    // 删除这个字段
                    delete params[item];
                }
            })
        }
        return params;
    }

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


    render() {
        const {userSelect} = this.state;
        return (
            <div className={[isMobile() ? 'custom-trade-select-box__mobile' : ''].join(' ')}>
                <div
                    style={{
                        display: isShow(this.props.currentGroupButton !== '4')
                    }}
                    className={['custom-trade-select-box'].join(' ')}>
                    <div className='custom-trade-select'>
                        <span className='label'>{userSelect.label}</span>
                        <CustomSelect className='real-trade-select' name={[SpotTradeField.user_id]}
                                      value={this.state[SpotTradeField.user_id]}
                                      options={userSelect.options} onChange={this.valueChange}></CustomSelect>
                    </div>

                    <div className='custom-trade-input'>
                        <span className='label'>交易对</span>
                        <CustomSelect width={'150px'} value={this.state.symbol} name={'symbol'}
                                      options={this.state.SymbolOptions}
                                      filterable={true}
                                      className={"trade-dialog-select"}
                                      customClear={true} clearable={false} multiple={false} autoWidth={true}
                                      popupProps={{
                                          overlayClassName: 'trade-dialog-select__overlay'
                                      }} onChange={this.valueChange}></CustomSelect>
                    </div>
                    <div className='custom-trade-input' style={{
                        display: isShow(this.props.currentGroupButton === table_CurrentConsignment)
                    }}>
                        <span className='label'>状态</span>
                        <CustomInput name={'status'} type={'text'} onChange={this.valueChange}
                                     value={this.state.status}></CustomInput>
                    </div>
                    <div className='custom-trade-input' style={{
                        display: isShow(this.props.currentGroupButton === table_HoldingPosition)
                    }}>
                        <span className='label'>价值</span>
                        <CustomInput name={'quantity'} type={'number'} onChange={this.valueChange}
                                     value={this.state.quantity}></CustomInput>
                    </div>
                    <CustomButton
                        onClick={this.onFilter.bind(this, this.getFilterParams(this.props.currentGroupButton))}>查询</CustomButton>
                    <CustomButton
                        onClick={this.onFilter.bind(this, this.getFilterParams(this.props.currentGroupButton))}>刷新</CustomButton>
                </div>
                {this.props.children}
            </div>

        );
    }
}

export default TradeSelect;
