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('APP_WALLET');
    // 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 == 'ORDER_PRE_AMOUNT') {
                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={'minAmount'}
                        >
                            <InputNumber
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="默认金额"
                            name={'defaultMinAmount'}
                        >
                            <InputNumber
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm>
            }


            if (i.configKey == 'APP_WALLET') {
                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={'orderMinAmount'}
                        >
                            <InputNumber
                                addonBefore="￥"
                            />
                        </ProForm.Item>
                        <ProForm.Item
                            rules={[{ required: true, message: '请输入!' }]}
                            label="充电最小金额"
                            name={'chargeMinAmount'}
                        >
                            <InputNumber
                                addonAfter="%"
                            />
                        </ProForm.Item>
                    </ProForm.Group>
                </ProForm>
            }
            return {
                key: i.configKey,
                label: i.configName,
                children: data,
                // closable: true
            }
        }))
    }





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