import './index.less';
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile, isEqual} from '@/js/utils/tool';
import CustomButton from '@/js/components/Button';
import Pagination from '@/js/components/Pagination';
import {ContractHoldingPosition} from '@/js/utils/api/contract';
import {getUserName} from '@/js/utils/local';
import {isPlus, getDirectionColor, getOpenText} from '@/js/utils/trade';
import {ClosePosition} from '@/js/utils/api/multipleUse';
import {open_loading} from '@/js/utils/tdesign';

class HoldingPosition extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
        }
        this.columns = [
            {
                colKey: 'ddd',
                title: '用户名',
                cell: ({rowIndex, row}) => {
                    return (
                        <div>{row.d9}</div>
                    );
                },
            },
            {
                colKey: 'd2',
                title: '交易所',
            },
            {
                colKey: 'd3',
                title: '交易对',
            },
            {
                colKey: 'd4',
                title: '持仓方向',
                align: 'center'
            },
            {
                colKey: 'd5',
                title: '策略',
                align: 'center'
            },
            {
                colKey: 'd6',
                title: '开仓价格',
                align: 'center'
            },
            {
                colKey: 'd7',
                title: '标记价格',
                align: 'center'
            },
            {
                colKey: 'd8',
                title: '未实现盈亏',
                align: 'center'
            },
            {
                colKey: 'd9',
                title: '操作',
                align: 'center'
            },
        ];
    }

    // 页码改变
    pageChange = (value: number) => {
        this.setState({
            pageNum: value
        })
        // 请求接口
        this.getTableList();
    }

    // pc表格
    pcTable() {
        return '';
        // return (
        //     <CustomTable columns={this.columns} data={this.state.list} pageNum={this.state.pageNum}
        //                  pageSize={this.state.pageSize} total={this.state.total} pagination={true}
        //                  className={props.className}
        //                  onPageChange={this.pageChange}></CustomTable>
        // )
    }

    // 手机表格
    mobileTable() {
        return (
            <div className='contract-real-table__mobile'>
                {
                    this.state.list.map((item, index) => (
                        <div key={index} className='table-row'>
                            <div className='table-row-line'>
                                <div className={'table-pairs'}>
                                    {item.symbol}
                                    <span> x{item.leverage}</span>
                                </div>
                                <div className={'table-time'}>
                                    {item.created_at}
                                </div>
                            </div>
                            <div className='table-row-line'>
                                <div className={'table-direction'} style={{
                                    color: getDirectionColor(item.position_side)
                                }}>
                                    {getOpenText(item.position_side)}
                                </div>
                                <CustomButton onClick={ClosePosition.bind(this, {
                                    ids: [item.id]
                                })}>平仓</CustomButton>
                            </div>
                            <div className='table-row-line'>
                                <div className={'table-col-left'}>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            用户
                                        </div>
                                        <div className={'table-col-value'}>
                                            {getUserName(item.exchange_users_id)}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            开仓价格
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.entry_price}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            策略
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.strategy}
                                        </div>
                                    </div>
                                </div>
                                <div className={'table-col-left'}>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            交易所
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.exchange}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            标记价格
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.market_price}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            盈亏
                                        </div>
                                        <div className={['table-col-value', 'green'].join(' ')}>
                                            {isPlus(item.unrealized_profit)} USDT
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))
                }
                <Pagination onChange={this.pageChange} pageNum={this.state.pageNum}
                            pageSize={this.state.pageSize} total={this.state.total}></Pagination>
            </div>
        )
    }

    // 当前表格
    currentTable() {
        return (
            <div style={this.props.style ?? null} className='c-table-height'>
                {
                    isMobile() ? this.mobileTable() : this.pcTable()
                }
            </div>
        )

    }

    shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean {
        return true;
    }

    async getTableList(filterParams?: any) {
        let loading = null;
        try {
            loading = open_loading();
            let params = {
                page: this.state.pageNum,
                limit: this.state.pageSize,
            }
            if (filterParams) {
                params = {
                    ...params,
                    ...filterParams,
                }
            }
            const res: any = await ContractHoldingPosition(params);
            if (res.code == 0) {
                this.setState({
                    list: res.data.data,
                    total: res.data.total,
                })
            }
            if (loading) {
                loading.hide();
            }
        } catch (e) {
            console.log(e);
            if (loading) {
                loading.hide();
            }
        }
    }

    componentDidMount() {
        this.getTableList();
    }

    render() {
        const props = this.props;
        if (props['v-if']) {
            return this.currentTable();
        } else {
            return <></>;
        }

    }

}

export default HoldingPosition;
