import { userPage, shopLevel, changePath, modifyMoney, shopCreate } from '@/services/invest/user';
import { history } from '@umijs/max';
import { UploadOutlined } from '@ant-design/icons';
import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Button, Modal, Image, Space, Select, Col, Row, Card, Upload } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
// import BonusFormModal from './components/BonusFormModal';
import CreateFormModal from './components/CreateFormModal';
import RunFormModal from './components/RunFormModal';


import LevelFormModal from './components/LevelFormModal';
import MoneyFormModal from './components/MoneyFormModal';
import TempFormModal from './components/TempFormModal';
import TradeFormModal from './components/TradeFormModal';
import ShopModal from './components/ShopModal';

const GoodsTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const access = useAccess()
    const [row, setRow] = useState(null);
    const [createFormModal, setCreateFormModal] = useState(false);
    const [runFormModal, setRunFormModal] = useState(false);

    const [levelFormModal, setLevelFormModal] = useState(false);
    const [moneyFormModal, setMoneyFormModal] = useState(false);
    const [tempFormModal, setTempFormModal] = useState(false);
    const [tradeFormModal, setTradeFormModal] = useState(false);
    const [shopOption, setShopOption] = useState([]);
    const [searchParams, setSearchParams] = useState(null);
    const [shopModal, setBonusFormModal] = useState(false);
    const [typeMoney, setTypeMoney] = useState(1);


    const handleTemp = async (fields) => {

        const { success } = await changePath(fields);
        if (success) {
            actionRef.current?.reload();
            setTempFormModal(false);
        }
    };

    const handleTrade = async (fields) => {
        const { success } = await shopLevel(fields);
        if (success) {
            actionRef.current?.reload();
            setTradeFormModal(false);
        }
    };

    const handleCreate = async (fields) => {
        setRow(fields);
        const { success } = await shopCreate({ ...fields });

        if (success) {
            setRow(initRow);
            actionRef.current?.reload();
            setCreateFormModal(false);
        }
    };

    const runHandleCreate = async (fields) => {
        setRow(fields);
        const { success } = await shopSetorg({ ...fields });

        if (success) {
            setRow(initRow);
            actionRef.current?.reload();
            setRunFormModal(false);
        }
    };

    const handleMoney = async (fields) => {
        if (typeMoney == 1) {
            var { success } = await modifyMoney({ ...fields, moneyType: 'Money' });
        } else {
            var { success } = await modifyMoney({ ...fields, moneyType: 'Money2' });
        }
        if (success) {
            actionRef.current?.reload();
            setMoneyFormModal(false);
        }
    };


    const handleLevel = async (fields) => {
        const { success } = await shopLevel({ ...fields });

        if (success) {
            actionRef.current?.reload();
            setLevelFormModal(false);
        }
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            search: false,
            render: (_, record) => {
                return <Space>
                    <div>{record?.id}</div>
                    {/* <Button
                        type="link"
                        onClick={() => {
                            setRow(record);
                            setBonusFormModal(true);
                        }}
                    >
                        查看
                    </Button> */}
                </Space>;
            },
        },
        {
            title: '投资人',
            dataIndex: 'userName',
            fieldProps: {
                placeholder: '请输入用户名', // 生效！
            },
            render: (_, record) => {
                return <>
                    <div>{record?.username}</div>
                    <div>{record?.mobile}</div>
                    <div>{`v${record?.vip}`}</div>
                </>
            }
        },
        {
            title: '推广码',
            dataIndex: 'qrcode',
            search: false,
            render: (_, record) => {
                return <Image src={record?.qrcode} width={'60px'} />
            }
        },
        {
            title: '推荐人',
            dataIndex: 'pid',
            search: false,
            render: (_, record) => {
                return <>
                    <div>{record?.puserName}</div>
                </>
            }
        },
        {
            title: '增值收益',
            dataIndex: 'money2',
            search: false,
        },
        {
            title: '基础收益',
            dataIndex: 'money',
            search: false,
        },
        {
            title: '充电桩',
            dataIndex: 'deviceNum',
            search: false,
        },
        {
            title: '期权值',
            dataIndex: 'option',
            search: false,
        },
        {
            title: '备注',
            dataIndex: 'adminNote',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            search: false,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            // render: (_, record) => (
            //     <Space>
            //         {
            //             <Button
            //                 type="link"
            //                 onClick={() => {
            //                     setRow({
            //                         ...record,
            //                         deviceId: record.id
            //                     });
            //                     setSetinfoFormModal(true);
            //                 }}
            //             >
            //                 设置地址
            //             </Button>
            //         }

            //     </Space>
            // ),
        },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <TradeFormModal
                    modalOpenState={tradeFormModal}
                    onModalOpenState={setTradeFormModal}
                    onSubmit={handleTrade}
                />
                <TempFormModal
                    modalOpenState={tempFormModal}
                    onModalOpenState={setTempFormModal}
                    onSubmit={handleTemp}
                />
                <MoneyFormModal
                    values={row}
                    modalOpenState={moneyFormModal}
                    onModalOpenState={setMoneyFormModal}
                    typeMoney={typeMoney}
                    onSubmit={handleMoney}
                />
                <LevelFormModal
                    values={row}
                    modalOpenState={levelFormModal}
                    onModalOpenState={setLevelFormModal}
                    onSubmit={handleLevel}
                />
                <CreateFormModal
                    values={row}
                    modalOpenState={createFormModal}
                    onModalOpenState={setCreateFormModal}
                    onSubmit={handleCreate}
                />
                <RunFormModal
                    values={row}
                    modalOpenState={runFormModal}
                    onModalOpenState={setRunFormModal}
                    onSubmit={runHandleCreate}
                />
                <ShopModal
                    values={row}
                    modalOpenState={shopModal}
                    onModalOpenState={setBonusFormModal}
                />



                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="goodsList"
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <Button
                            key="/admin/invest/users/modify/money"
                            // hidden={!access.hasPerms('/api/goods/add')}
                            danger
                            onClick={() => {
                                setMoneyFormModal(true)
                                setTypeMoney(2)
                            }}
                        >
                            增值收益
                        </Button>,
                        <Button
                            key="/admin/invest/users/modify/money"
                            danger
                            onClick={() => {
                                setMoneyFormModal(true)
                                setTypeMoney(1)
                            }}
                        >
                            基础收益
                        </Button>,
                        <Button
                            key="/admin/invest/users/modify/info"
                            danger
                            onClick={() => {
                                setTradeFormModal(true)
                            }}
                        >
                            账号变更
                        </Button>,
                        <Button
                            danger
                            key="/admin/invest/users/changePath"
                            onClick={() => {
                                setTempFormModal(true)
                            }}
                        >
                            转挂
                        </Button>,
                        <Button
                            key="/admin/invest/users/modify/info"
                            danger
                            onClick={() => {
                                setLevelFormModal(true)
                            }}
                        >
                            等级变更
                        </Button>,
                        <Button
                            key="/admin/invest/users/add"
                            type="primary"
                            onClick={() => {
                                setCreateFormModal(true)
                            }}
                        >
                            添加
                        </Button>


                    ]}
                    request={async (params, sorter, filter) => {
                        let { data } = await userPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer >
    );
};

export default GoodsTableList;
