import {
    PageContainer,
    ProForm,
    ProFormText,
    ProFormDigit
} from '@ant-design/pro-components';
import { Card, message, Tabs, InputNumber, TimePicker } from 'antd';
import type { FC } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import { config, configUpdate } from '@/services/config/index'
import dayjs from 'dayjs';



const BasicForm: FC<Record<string, any>> = () => {
    const [dataValue, setDateValue] = useState<any>([])
    const [activeKey, setActiveKey] = useState('DEPOSIT');
    // const [startTime, setStartTime] = useState('');
    useEffect(() => {
        config().then(({ data }) => {
            configName(data)
        })
    }, []);

    const onChange = (newActiveKey: string) => {
        setActiveKey(newActiveKey);
    };


    const onFinish = async (values: Record<string, any>) => {
        if (values.beginTime) {
            values.beginTime = dayjs(values.beginTime).format('HH:mm')
        }
        try {
            await configUpdate(values);
            message.success('配置成功');
            return true;
        } catch (error) {
            return false;
        }
    };

    const configName = (data) => {
        setDateValue(data.map((i) => {
            let data = null
            let configValue = JSON.parse(i.configValue)
            let value = {
                id: i.id,
                configName: i.configName,
                configKey: i.configKey,
                ...configValue
            }

            if (i.configKey == 'DEPOSIT') {
                data = <ProForm
                    style={{
                        marginTop: 8,
                        maxWidth: 600,
                    }}
                    layout="vertical"
                    initialValues={value}
                    onFinish={onFinish}
                >
                    <ProForm.Group>
                        <ProFormDigit
                            name="id"
                            disabled
                            hidden={true}
                        />
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="最低充值"
                            name={'minMoney'}
                        >
                            <InputNumber
                                min={1}
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm>
            }


            if (i.configKey == 'WITHDRAWAL') {
                data = <ProForm
                    style={{
                        marginTop: 8,
                        maxWidth: 600,
                    }}
                    layout="vertical"
                    initialValues={value}
                    onFinish={onFinish}
                >
                    <ProForm.Group>
                        <ProFormDigit
                            name="id"
                            disabled
                            hidden={true}
                        />
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="最低提现"
                            name={'minMoney'}
                        >
                            <InputNumber
                                min={1}
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="提现手续费"
                            name={'free'}
                        >
                            <InputNumber
                                min={0}
                                max={100}
                                addonAfter="%"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="日限额"
                            name={'dayQuota'}
                        >
                            <InputNumber
                                min={0}
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="月限额"
                            name={'monthQuota'}
                        >
                            <InputNumber
                                min={0}
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="年龄限制（男）"
                            name={'ageMan'}
                        >
                            <InputNumber
                                addonAfter="岁"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="年龄限制（女）"
                            name={'ageGirl'}
                        >
                            <InputNumber
                                max={65}
                                addonAfter="岁"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm>
            }


            if (i.configKey == 'SENSITIVITY') {
                data = <ProForm
                    style={{
                        marginTop: 8,
                        maxWidth: 600,
                    }}
                    layout="vertical"
                    initialValues={value}

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

            if (i.configKey == 'PILE') {
                data = <ProForm
                    style={{
                        marginTop: 8,
                        maxWidth: 600,
                    }}
                    layout="vertical"
                    initialValues={value}
                    onFinish={onFinish}
                >
                    <ProForm.Group>
                        <ProFormDigit
                            name="id"
                            disabled
                            hidden={true}
                        />
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="收益"
                            name={'earnings'}
                        >
                            <InputNumber
                                min={1}
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="上下浮动"
                            name={'earingsFloat'}
                        >
                            <InputNumber
                                min={0}
                                max={100}
                                addonAfter="%"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="交付时间"
                            name={'deliveryDay'}
                        >
                            <InputNumber
                                min={1}
                                addonAfter="天"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="基本收益"
                            name={'earningsBase'}
                        >
                            <InputNumber
                                min={0}
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm >
            }

            if (i.configKey == 'MAINTAIN') {
                if (value.beginTime) {
                    const time = dayjs(value.beginTime, 'HH:mm');
                    value.beginTime = time
                }


                data = <ProForm
                    style={{
                        marginTop: 8,
                        maxWidth: 600,
                    }}
                    layout="vertical"
                    initialValues={value}
                    onFinish={onFinish}
                >
                    <ProForm.Group>
                        <ProFormDigit
                            name="id"
                            disabled
                            hidden={true}
                        />
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="开始时间"
                            name={'beginTime'}
                        >
                            <TimePicker format={'HH:mm'} />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="持续时间"
                            name={'continueTime'}
                        >
                            <InputNumber
                                min={0}
                                addonAfter="分钟"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm >
            }


            if (i.configKey == 'DISTRIBUTION') {
                data = <ProForm
                    style={{
                        marginTop: 8,
                        maxWidth: 600,
                    }}
                    layout="vertical"
                    initialValues={value}
                    onFinish={onFinish}
                >
                    <ProForm.Group>
                        <ProFormDigit
                            name="id"
                            disabled
                            hidden={true}
                        />
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="直推"
                            name={'directPush'}
                        >
                            <InputNumber
                                min={0}
                                max={100}
                                addonAfter="%"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="间推"
                            name={'inDirectPush'}
                        >
                            <InputNumber
                                min={0}
                                max={100}
                                addonAfter="%"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm >
            }



            return {
                key: i.configKey,
                label: i.configName,
                children: data,
                // closable: true
            }
        }))
    }


    // const add = () => {
    //     let data = JSON.parse(JSON.stringify(dataValue))
    //     data.push(
    //         {
    //             key: 'IENVJJD',
    //             label: '测试',
    //             children: `Content of Tab Pane`,
    //             closable: true
    //         }
    //     )
    //     setDateValue(data)
    //     setActiveKey('IENVJJD');
    // };


    // const remove = (targetKey) => {
    //     console.log(targetKey,'targetKey');

    //     let data = JSON.parse(JSON.stringify(dataValue))
    //     let index = data.findIndex(val => val.key === targetKey);
    //     if (index !== -1) {
    //         data.splice(index, 1);
    //     } else {
    //         return
    //     }
    //     console.log(data);

    //     setDateValue(data)
    //     console.log(data[data.length - 1].key);
    //     setActiveKey(data[data.length - 1].key);
    // };


    // const onEdit = (
    //     targetKey: React.MouseEvent | React.KeyboardEvent | string,
    //     action: 'add' | 'remove',
    // ) => {
    //     if (action === 'add') {
    //         add();
    //     } else {
    //         remove(targetKey);
    //     }
    // };






    return (
        <PageContainer>
            <Card bordered={false}>
                <Tabs
                    type="card"
                    onChange={onChange}
                    items={dataValue}
                    // onEdit={onEdit}
                    activeKey={activeKey}
                />
            </Card>
        </PageContainer>
    );
};
export default BasicForm;
