import './index.less'
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile} from '@/js/utils/tool';
import {SpotAssets} from "@/js/utils/api/spot";
import {getAdminUserList, getUserName} from '@/js/utils/local';
import {getUserList} from '@/js/utils/api/auth';

class ContractAccount extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            loading: false,
        }
        this.columns = [
            {
                colKey: 'ddd',
                title: '用户名',
                align: 'center',
                cell: ({rowIndex, row}) => {
                    if (row.id) {
                        return getUserName(row.id)
                    }
                    return 'null'
                },
            },
            {
                colKey: 'exchange',
                title: '交易所',
                align: 'center',
            },
            {
                colKey: 'spot_asset',
                title: '现货资产',
                align: 'center',
                cell: ({rowIndex, row}) => {
                    return (
                        <span>{(parseFloat(row.spot_asset + '')).toFixed(4)}</span>
                    )
                },
            },
            {
                colKey: 'contract_asset',
                title: '合约资产',
                align: 'center',
                cell: ({rowIndex, row}) => {
                    return (
                        <span>{(parseFloat(row.contract_asset + '')).toFixed(4)}</span>
                    )
                },
            },
            {
                colKey: 'total',
                title: '总资产',
                align: 'center',
                cell: ({rowIndex, row}) => {
                    return (
                        <span>{(parseFloat(row.spot_asset + '') + parseFloat(row.contract_asset + '')).toFixed(4)}</span>
                    )
                },
            },
            {
                colKey: 'principal',
                title: '本金',
                align: 'center',
                cell: ({rowIndex, row}) => {
                    return (
                        <span style={{
                            color: '#C99400'
                        }}>{parseFloat(row.principal + '')}</span>
                    )
                },
            },
        ];
    }

    changeLoding(value: boolean) {
        this.setState({
            loading: value,
        })
    }

    async changeList() {
        try {
            this.changeLoding(true);
            const res: any = await getUserList();
            if (res.code == 0) {
                this.setState({
                    list: res.data.data
                })
            }
            this.changeLoding(false);
        } catch (e) {
            console.log(e)
        }
    }

    async componentDidMount() {
        // 获取用户列表
        await getAdminUserList();

        this.changeList();
    }

    render() {
        return (
            <div className={['contract-account-table', isMobile() ? 'contract-account-table__mobile' : ""].join(' ')}>
                <div className='contract-account-label'>账号总览</div>
                <div className='contract-account-table-box'>
                    <CustomTable columns={this.columns} data={this.state.list}
                                 loading={this.state.loading}></CustomTable>
                </div>
            </div>
        )
    }
}

export default ContractAccount;
