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 {getUserName} from '@/js/utils/local';
import {open_loading} from '@/js/utils/tdesign';
import {SpotAssets} from "@/js/utils/api/spot";

class HoldingPosition extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            // 交易弹窗
            trade_dialog: false,
            // 策略弹窗
            strategy_dialog: false,
        }
        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>
        // )
    }

    // 打开交易弹窗
    openTradeModal = (item) => {
        this.setState({
            trade_dialog: true
        })
    }

    // 手机表格
    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}
                                </div>
                                <div className='table-btns'>
                                    {/*<CustomButton onClick={this.openTradeModal}>交易</CustomButton>*/}
                                    {/*<CustomButton>策略</CustomButton>*/}
                                </div>
                            </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'}>
                                            BTC估值
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.btc_valuation}
                                        </div>
                                    </div>
                                    {/*<div className={'table-col__line'}>*/}
                                    {/*    <div className={'table-col-label'}>*/}
                                    {/*        策略*/}
                                    {/*    </div>*/}
                                    {/*    <div className={'table-col-value'}>*/}
                                    {/*        {item.spot_strategy_id}*/}
                                    {/*    </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.quantity}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            更新
                                        </div>
                                        <div className={['table-col-value'].join(' ')} style={{
                                            fontSize: '12px'
                                        }}>
                                            {item.updated_at}
                                        </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()
                }
                {/*  dialog  */}
                {/*<TradeDialog visible={this.state.trade_dialog} onClose={() => {*/}
                {/*    this.setState({*/}
                {/*        trade_dialog: false,*/}
                {/*    })*/}
                {/*}}></TradeDialog>*/}

            </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 SpotAssets(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;
