import './index.less';
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile} from '@/js/utils/tool';
import Pagination from '@/js/components/Pagination';
import {getBuySellColor, getStatusColor} from '@/js/utils/trade';
import {getUserName, getLocalSpotHelper} from '@/js/utils/local';
import {open_loading} from '@/js/utils/tdesign';
import {SpotHistoryTransaction} from '@/js/utils/api/spot';
import {TradeDirection} from '@/js/constants/trade';


class HistoryTransaction extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            isFirst: true,
        }
        this.columns = [
            {
                colKey: 'ddd',
                title: '用户名',
            },
            {
                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: '成交数量USDT',
                align: 'center'
            },
            {
                colKey: 'd9',
                title: '状态',
                align: 'center'
            },
            {
                colKey: 'd10',
                title: '交易时间',
                align: 'center'
            },
            {
                colKey: 'd11',
                title: '更新时间',
                align: 'center'
            },
            {
                colKey: 'd12',
                title: '返回值',
                align: 'center'
            },
        ];
    }

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

    // pc表格
    pcTable() {
        // 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>
        // )
        return ''
    }

    // 手机表格
    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-time'}>
                                    {item.created_at}
                                </div>
                            </div>
                            <div className='table-row-line'>
                                <div className={['table-direction'].join(' ')} style={{
                                    color: getBuySellColor(item.direction)
                                }}>
                                    {getLocalSpotHelper('order_type', item.order_type)}/{TradeDirection[item.direction]}
                                </div>
                                <div className={'table-time'}>
                                    <span>更新时间 </span>
                                    {item.updated_at}
                                </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'}>
                                            开始价格
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.target_price}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            成交金额
                                        </div>
                                        <div className={'table-col-value'}>
                                            {parseFloat(item.quantity + '')}
                                        </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={{
                                            color: getStatusColor(item.status)
                                        }}>
                                            {
                                                getLocalSpotHelper('status', item.status)
                                            }
                                        </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) {
        if (nextProps['v-if'] && nextState.isFirst) {
            this.setState({
                isFirst: false,
            })
            // 请求接口
            this.getTableList();
        }
        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 SpotHistoryTransaction(params);
            if (res.code == 0) {
                console.log(res.data.data[0])
                this.setState({
                    list: res.data.data,
                    total: res.data.total,
                })
            }
            if (loading) {
                loading.hide();
            }
        } catch (e) {
            console.log(e)
            if (loading) {
                loading.hide();
            }
        }
    }

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

    }

}

export default HistoryTransaction;
