/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 10:53:25
 */
import React, { useState, useEffect } from 'react';
import {
    Modal,
    Table
} from 'antd';


import { pageUpAndDownLevel } from '@/services/user/user';

export default ({ values, modalOpenState, onModalOpenState }) => {

    const [items2, setitems2] = useState(null);
    const [items, setItems] = useState(null);


    useEffect(() => {
        if (!values?.id) {
            return
        }
        pageUpAndDownLevel(values?.id).then(({ data, success }) => {
            if (success) {
                setItems(data?.upLevel || []);
                setitems2(data?.downLevel)
            }
        }).catch(() => {

        });
    }, [values]);

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            search: false,
        },
        {
            title: '用户',
            dataIndex: 'shop',
            search: false,
            render: (_, record) => {
                return <>
                    <div>用户名：{record?.userName}</div>
                    <div>手机号：{record?.phone}</div>
                    <div>等级：{record?.level}</div>
                </>
            },
        },
        {
            title: '余额',
            dataIndex: 'points2',
            search: false,
        },
        {
            title: '收益',
            dataIndex: 'points1',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            search: false,
        },
    ];

    return (
        <>
            <Modal width="800px" title="" open={modalOpenState} onOk={() => {
                onModalOpenState(false);
            }} onCancel={() => {
                onModalOpenState(false)
            }}>
                <>
                    <div style={{ margin: '15px 0' }}>上级</div>
                    <Table
                        rowKey="id"
                        columns={columns}
                        dataSource={items}
                        pagination={false}
                    />
                    <div style={{ margin: '15px 0' }}>
                        下级
                    </div>
                    <Table
                        rowKey="id"
                        columns={columns}
                        dataSource={items2}
                        pagination={false}
                    />
                </>
            </Modal >
        </>
    );
};