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, 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'

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

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

    }

    SymbolList = async () => {
        try {
            const list = await getLocalSymbolList();
            this.setState({
                symbolOptions: list
            });
        } catch (e) {
            console.log(e)
        }
    }

    // 获取筛选参数
    getFilterParams = (table_id: string = '') => {
        const {exchange_users_id, symbol, position_side, exchange, status} = 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 (position_side) {
            params.position_side = position_side;
        }
        if (exchange) {
            params.exchange = exchange;
        }
        // 过滤不要的字段
        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;
    }

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

    }

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

    componentDidMount() {
        this.SymbolList();
    }

    render() {
        const {userSelect, exchange, directionSelect, exchangeSelect, symbol, symbolOptions} = 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={'user'} value={this.state.user}
                                      options={userSelect.options} onChange={this.valueChange}></CustomSelect>
                    </div>

                    <div className='custom-trade-input'>
                        <span className='label'>交易对</span>
                        <CustomSelect value={symbol} name={'symbol'}
                                      options={symbolOptions}
                                      className={"trade-dialog-select"}
                                      clearable={false} customClear={true} autoWidth={false}
                                      filterable={true}
                                      popupProps={{
                                          overlayClassName: 'trade-dialog-select__overlay'
                                      }} onChange={this.valueChange}></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>
                    <div className='custom-trade-input' style={{
                        display: isShow(this.props.currentGroupButton === '2' || this.props.currentGroupButton === '3')
                    }}>
                        <span className='label'>状态</span>
                        <CustomInput name={'status'}
                                     value={this.state.status} onChange={this.valueChange}></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;
