import { PageContainer, ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { Tabs, Divider, InputNumber, Radio } from 'antd';

import { configList, configStore } from '@/services/invest/config';

// const { configStore, configItems } = services.ConfigController;


import { useRef, useState, useEffect } from 'react';

export default () => {

    const initRow = {
        key: '',
        value: '',
        comment: '',
    };

    const [configData, setConfigData] = useState([]);
    const [configForm, setConfigForm] = useState(initRow);
    const [configKey, setConfigKey] = useState('');

    const restFormRef = useRef();

    const confirmStore = async (value) => {
        console.log(value);
        try {
            const { data, errorMessage } = await configStore({
                ...configData.find((val) => val.key == configKey),
                value: JSON.stringify(value[configKey])
            });
        } catch (e) {
        }
    };

    useEffect(() => {
        configList().then(({ data, success }) => {
            setConfigData(data);
            let aaa = {}
            data.map((item, index) => {
                aaa[item.key] = JSON.parse(item.value)
            })
            restFormRef.current?.setFieldsValue(aaa);
        });
    }, []);

    const tabsData = [];




    tabsData['shop_device_fee_bonus'] = <>
        <ProForm.Group>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="补贴天数"
                name={['shop_device_fee_bonus', 'help_day']}
            >
                <InputNumber
                    min={0}
                    max={100}
                    addonAfter="天"
                />
            </ProForm.Item>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="补贴金额"
                name={['shop_device_fee_bonus', 'help_money']}
            >
                <InputNumber
                    min={0}
                    max={10}
                    addonBefore="￥"
                />
            </ProForm.Item>
        </ProForm.Group>
        <Divider></Divider>
        <ProForm.Group>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="服务费金额"
                name={['shop_device_fee_bonus', 'money']}
            >
                <InputNumber
                    min={0}
                    max={1000}
                    addonBefore="￥"
                />
            </ProForm.Item>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="波动系数(上下波动)"
                name={['shop_device_fee_bonus', 'ratio']}
            >
                <InputNumber
                    min={0}
                    max={50}
                    addonAfter="%"
                />
            </ProForm.Item>
        </ProForm.Group>
    </>;

    tabsData['shop_recharge'] = <>
        <ProForm.Group>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="最低充值"
                name={['shop_recharge', 'min_money']}
            >
                <InputNumber
                    min={1}
                    max={100}
                    addonBefore="￥"
                />
            </ProForm.Item>
        </ProForm.Group>
    </>;

    tabsData['shop_withdraw'] = <>
        <ProForm.Group>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="最低提现"
                name={['shop_withdraw', 'min_money']}
            >
                <InputNumber
                    min={1}
                    max={1000}
                    addonBefore="￥"
                />
            </ProForm.Item>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="提现手续费"
                name={['shop_withdraw', 'fee']}
            >
                <InputNumber
                    min={1}
                    max={10}
                    addonAfter="%"
                />
            </ProForm.Item>
        </ProForm.Group>
        <ProForm.Group>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="可提现时间-开始"
                name={['shop_withdraw', 'start_day']}
            >
                <InputNumber
                    min={1}
                    max={10}
                    addonBefore="每月"
                    addonAfter="号"
                />
            </ProForm.Item>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="可提现时间-结束"
                name={['shop_withdraw', 'end_day']}
            >
                <InputNumber
                    min={1}
                    max={10}
                    addonBefore="每月"
                    addonAfter="号"
                />
            </ProForm.Item>
        </ProForm.Group>
    </>;

    tabsData['sensitive'] = <>
        <ProForm.Group>
            <ProForm.Item
                rules={[{ required: true, message: '请输入!' }]}
                label="手机号（接收验证码）"
                name={['sensitive', 'mobile']}
            >
                <ProFormText />
            </ProForm.Item>
        </ProForm.Group>
    </>;

    return (
        <PageContainer>
            <>
                <ProForm
                    style={{ width: 800 }}
                    initialValues={configForm}
                    onFinish={async (values) => {
                        confirmStore(values);
                    }}
                    formRef={restFormRef}
                    submitter={{
                        // 配置按钮文本
                        searchConfig: {
                            submitText: '保存',
                        },
                        // 配置按钮的属性
                        resetButtonProps: {
                            style: {
                                // 隐藏重置按钮
                                display: 'none',
                            },
                        },
                        submitButtonProps: {},
                    }}
                >
                    <Tabs type="card"
                        onChange={(key) => {
                            setConfigKey(key)
                        }}
                        items={
                            configData.map((item, index) => {
                                return {
                                    label: item.name,
                                    key: item.key,
                                    children: tabsData[item.key],
                                };
                            })
                        }>
                    </Tabs>
                </ProForm>
            </>
        </PageContainer>
    );
};

