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 CustomButton from '@/js/components/Button';
import {getBuySellColor, getBuySellText} from '@/js/utils/trade';
import {getLocalSpotHelper, getUserName} from '@/js/utils/local';
import {open_loading} from '@/js/utils/tdesign';
import {onSpotRevoke} from '@/js/utils/api/multipleUse';
import {show_message} from "@/js/utils/tdesign";
import CustomCheckBox from '@/js/components/CheckBox';
import {SpotCurrentEntrustment} from '@/js/utils/api/spot';

// 当前委托
class CurrentConsignment 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'
            },
        ];
    }

    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={new Date().valueOf() + index} className='table-row'>
                            <div className='table-row-line'>
                                <div className={'table-pairs'}>
                                    {item.symbol}
                                </div>
                                <div className={'table-time'}>
                                    {item.working_time}
                                </div>
                            </div>
                            <div className='table-row-line'>
                                <div className={['table-direction'].join(' ')} style={{
                                    color: getBuySellColor(item.side)
                                }}>
                                    {getLocalSpotHelper('order_type', item.type)}/{getBuySellText(item.side)}
                                </div>
                                <CustomButton onClick={this.tableContractRevoke.bind(this, item)}>撤销</CustomButton>
                            </div>
                            <div className='table-row-line'>
                                <CustomCheckBox checked={item.is_checked} onChange={
                                    (value: boolean) => {
                                        item.is_checked = value;
                                    }
                                }></CustomCheckBox>
                                <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.price}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            订单id
                                        </div>
                                        <div className={'table-col-value'}>
                                            {item.order_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.qty}
                                        </div>
                                    </div>
                                    <div className={'table-col__line'}>
                                        <div className={'table-col-label'}>
                                            状态
                                        </div>
                                        <div className={['table-col-value', 'green'].join(' ')}>
                                            {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>
        )
    }

    // 撤销委托
    async tableContractRevoke(row?: any) {
        let params: any = {};
        if (row) {
            params = {
                ids: [row.id],
            }
        } else {
            // 获取选中的行--is_checked
            const list = this.state.list;
            const ids: any[] = [];
            list.forEach((item: any) => {
                if (item.is_checked) {
                    ids.push(item.id);
                }
            })
            if (!ids.length) {
                show_message('未选择行');
                return;
            }
            params = {
                ids: ids,
            }
        }
        const status = await onSpotRevoke(params);
        if (status) {
            // 更新表格数据
            this.getTableList();
        }
    }

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


    async getTableList(filterParams?: any) {
        let loading = null;
        try {
            let params = {
                page: this.state.pageNum,
                limit: this.state.pageSize,
            }
            if (filterParams) {
                params = {
                    ...params,
                    ...filterParams,
                }
            }
            loading = open_loading();
            const res: any = await SpotCurrentEntrustment(params);
            if (res.code == 0) {
                res.data.data.forEach((item: any) => {
                    item.is_checked = false;
                })
                this.setState({
                    list: JSON.parse(JSON.stringify(res.data.data)),
                    total: res.data.total,
                })
                // 通知父组件更新total
                if (this.props.updateTotal) {
                    this.props.updateTotal(res.data.total);
                }
            }
            if (loading) {
                loading.hide();
            }
        } catch (e) {
            console.log(e)
            if (loading) {
                loading.hide();
            }
        }
    }

    shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any) {
        if (nextProps['v-if'] && nextState.isFirst) {
            this.setState({
                isFirst: false,
            })
            // 请求接口
            this.getTableList();
        }
        return true;
    }

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

export default CurrentConsignment;
