import './index.less'
import {Component} from 'react';
import HoldingPosition from '../HoldingPosition/index';
import CurrentConsignment from '../CurrentConsignment/index';
import HistoryTransaction from '../HistoryTransaction/index';
import {isShow} from "@/js/utils/dom";
import {table_HoldingPosition, table_CurrentConsignment, table_HistoryTransaction} from '@/js/constants/trade';
import store from '@/js/redux/store';
import TradeSelect from '../TradeSelect/index';
import {getDomRect} from '@/js/utils/dom';
import {isMobile} from '@/js/utils/tool';
import CustomButton from '@/js/components/Button';
import {setLocalSpotHelper} from '@/js/utils/local';
import StartTrade from "../StartTrade";
import {ClosePosition} from '@/js/utils/api/multipleUse';

// 定义常量
const dom_id = 'contract-trade';
const start_trade_id = 'start-trade';

class ContractTrade extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            minHeight: '',
            // 当前委托数量
            currentEntrustNum: 0,
            // 当前选择的按钮
            currentGroupButton: '4',
            // 三个表格的状态
            tableStatus: {
                [start_trade_id]: true,
                [table_HoldingPosition]: false,
                [table_CurrentConsignment]: false,
                [table_HistoryTransaction]: false,
            },
            // 筛选条件
            filter: {}
        }

    }


    // 计算属性
    get ComputedGroupButtons() {
        return [
            {
                label: '开始交易',
                value: '4',
            },
            {
                label: '持有仓位',
                value: '1',
            },
            {
                label: `当前委托(${this.state.currentEntrustNum})`,
                value: '2',
            },
            {
                label: '历史成交',
                value: '3',
            }
        ];
    }

    // 改变表格显示状态
    changeTableStatus = (value: string) => {
        const tableStatus = Object.keys(this.state.tableStatus);
        for (let i = 0; i < tableStatus.length; i++) {
            const item = tableStatus[i];
            if (item === value) {
                if (!this.state.tableStatus[item]) {
                    this.state.tableStatus[item] = true;
                }
                break;
            }
        }
    }

    // 切换按钮
    changeGroupButton = (value: string) => {
        this.changeTableStatus(value);
        this.setState({
            currentGroupButton: value
        })
    }
    // 获取表格最低高度
    getTableHeight = () => {
        const dom: HTMLElement = document.getElementById(dom_id);
        if (dom) {
            const rect = getDomRect(dom);
            const wid = document.documentElement.clientHeight;
            const height = wid - rect.top;
            this.setState({
                minHeight: height + 'px'
            })
        }
    }

    storeChange = () => {
        store.dispatch({type: 'count', data: 1,});
    }

    async componentDidMount() {
        this.getTableHeight();
        // store.subscribe(() => {
        //     this.setState({
        //         num: store.getState().count,
        //     })
        // })
        // 获取现货辅助列表
        await setLocalSpotHelper();
    }

    // table-class
    getTableClass() {
        return ['spread-out-table', isMobile() ? "spread-out-table__mobile" : ""].join(' ')
    }

    // 撤销委托
    onCancelEntrust = () => {
        this.currentConsignment.tableContractRevoke();
    }

    // 当前显示的按钮-根据对应的表格显示
    currentExtensionButtons() {
        switch (this.state.currentGroupButton) {
            case table_HoldingPosition:
                // return (
                //     <div className='hold-position-extension'>
                //     </div>
                // )
                return '';
            case table_CurrentConsignment:
                return (
                    <div className='hold-position-extension'>
                        <CustomButton onClick={this.onCancelEntrust}>多选撤销</CustomButton>
                    </div>
                )
            case table_HistoryTransaction:
                return '';
        }
    }

    FilterChange = (params: any) => {
        this.setState({
            filter: params,
        })
        this.getChildTableList(params);
    }
    // 请求子组件的表格
    getChildTableList = (params: any) => {
        if (this.state.currentGroupButton === '1') {
            this.holdingPositionRef.getTableList(params);
        } else if (this.state.currentGroupButton === '2') {
            this.currentConsignment.getTableList(params);
        } else if (this.state.currentGroupButton === '3') {
            this.historyTransaction.getTableList(params);
        }

    }

    // 更新total
    updateTotal = (total: number) => {
        this.setState({
            currentEntrustNum: total,
        })
    }

    render() {
        const obj = store.getState();
        return (
            <div className={'contract-trade-table'} id={this.props.id} style={this.props.style}>
                <div className='contract-trade-label'>现货交易</div>
                <div className='contract-trade-group'>
                    {
                        this.ComputedGroupButtons.map((item, index) => (
                            <div key={item.value}
                                 className={item.value === this.state.currentGroupButton ? 'group-active' : ''}
                                 onClick={this.changeGroupButton.bind(this, item.value)}
                            >
                                {item.label}
                            </div>
                        ))
                    }
                </div>
                <TradeSelect FilterChange={this.FilterChange} tableType={this.state.currentGroupButton}>
                    {
                        this.currentExtensionButtons()
                    }
                </TradeSelect>
                <div
                    className={['contract-trade-table-box', isMobile() ? 'contract-trade-table__mobile' : ''].join(' ')}
                    id={dom_id} style={{
                    minHeight: this.state.minHeight
                }}>
                    {/*开始交易*/}
                    <StartTrade
                        v-if={this.state.tableStatus[start_trade_id]}
                        className={this.getTableClass()}
                        style={
                            {
                                'display': isShow(this.state.currentGroupButton === '4'),
                            }
                        }
                    >
                    </StartTrade>
                    {/*持有仓位*/}
                    <HoldingPosition
                        v-if={this.state.tableStatus[table_HoldingPosition]}
                        className={this.getTableClass()}
                        ref={dom => this.holdingPositionRef = dom}
                        style={
                            {
                                'display': isShow(this.state.currentGroupButton === table_HoldingPosition),
                            }
                        }></HoldingPosition>
                    {/*当前委托*/}
                    <CurrentConsignment
                        v-if={this.state.tableStatus[table_CurrentConsignment]}
                        className={this.getTableClass()}
                        ref={dom => this.currentConsignment = dom}
                        style={
                            {
                                'display': isShow(this.state.currentGroupButton === table_CurrentConsignment),
                            }
                        } updateTotal={this.updateTotal}></CurrentConsignment>
                    {/*历史成交*/}
                    <HistoryTransaction
                        v-if={this.state.tableStatus[table_HistoryTransaction]}
                        className={this.getTableClass()}
                        ref={dom => this.historyTransaction = dom}
                        style={
                            {
                                'display': isShow(this.state.currentGroupButton === table_HistoryTransaction),
                            }
                        }></HistoryTransaction>
                </div>
            </div>
        )
    }
}

export default ContractTrade;
