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

import services from '@/services/admin';

const { shopTeam } = services.ShopController;

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

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


    useEffect(() => {
        if (!values?.id) {
            return
        }
        shopTeam({
            shop_id: values?.id
        }).then(({ data, success }) => {
            if (success) {
                setItems(data?.shop1 || []);
                setitems2(data?.shop2)
            }
        }).catch(() => {

        });
    }, [values]);

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            search: false,
        },
        {
            title: '投资人',
            dataIndex: 'shop',
            search: false,
            render: (_, record) => {
                return <>
                    <div>用户名：{record?.username}</div>
                    <div>手机号：{record?.mobile}</div>
                    <div>等级：{record?.vip}</div>
                </>
            },
        },
        {
            title: '余额',
            dataIndex: 'money',
            search: false,
        },
        {
            title: '充电桩',
            dataIndex: 'device_num',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            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 >
        </>
    );
};