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

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.exchange_users_id) {
                        return getUserName(row.exchange_users_id)
                    }
                    return 'null'
                },
            },
            {
                colKey: 'exchange',
                title: '交易所',
                align: 'center',
            },
            {
                colKey: 'margin_balance',
                title: '保证金余额',
                align: 'center'
            },
            {
                colKey: 'available_balance',
                title: '可用余额',
                align: 'center',
                cell: ({rowIndex, row}) => {
                    return (
                        <span style={{
                            color: '#12B981'
                        }}>{row.available_balance}</span>
                    )
                },
            },
        ];
    }

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

    async changeList() {
        try {
            this.changeLoding(true);
            const res: any = await ContractUserList();
            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;
