import { PageContainer, ProCard, ProForm } from '@ant-design/pro-components';
import React, { useEffect, useRef, useState } from 'react';

import { EditOutlined } from '@ant-design/icons';
import { Button, Input, message, } from 'antd';
import type { ActionType } from '@ant-design/pro-components';
import styles from "./parameterSetting.less";
import UpdateParameterForm from './components/UpdateParameterForm';
import { FormattedMessage, useIntl } from '@umijs/max';



  
/**
 * @参数设置
 * @returns
 */
const ParameterSetting: React.FC = () => {
    const intl = useIntl();
    const actionRef = useRef<ActionType>();
    const [updateParameterModalOpen, setUpdateParameterModalOpen] = useState<boolean>(false);
    const [currentRow, setCurrentRow] = useState<API.Project>();

    const handleUpdateParameterModal = () => {
        if (updateParameterModalOpen) {
            setUpdateParameterModalOpen(false);
            setCurrentRow(undefined);
        } else {
            setUpdateParameterModalOpen(true);
        }
    };

    const [stateValue, setStateValue] = useState({});

    return (
        <PageContainer>
            <ProCard
                style={{ background: 'white' }}
                bodyStyle={{
                    padding: 20,
                    margin: 0,
                }}
                // gutter={24}
                // wrap
                // ghost
            >
                <ProForm
                    layout='vertical'
                    style={{
                        padding: '0 0px 0 20px',
                        margin: 0,
                        display: 'flex',
                        justifyContent: 'space-between'
                    }}
                    grid={true}
                    rowProps={{
                        gutter: 24
                    }}
                    submitter={false}
                >
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                    <ProForm.Item 
                        label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
                        style={{
                            width: '50%'
                        }}>
                        <Input placeholder={`${intl.formatMessage({
                          id: 'common.please_input',
                          defaultMessage: '$$$',
                        })}${intl.formatMessage({
                          id: 'system.parameter.table.list.label',
                          defaultMessage: '$$$',
                        })}`} disabled style={{
                            width: '92%'
                        }} />
                        <Button 
                            type="link" 
                            icon={<EditOutlined />} 
                            onClick={() => {
                                setUpdateParameterModalOpen(true);
                            }}
                        />
                    </ProForm.Item>
                </ProForm>
            </ProCard>
            <UpdateParameterForm
                updateModalOpen={updateParameterModalOpen}
                values={currentRow || {}}
                handleModal={handleUpdateParameterModal}
                reload={actionRef.current?.reload}
            />
        </PageContainer>
    );
};

export default ParameterSetting;
