import {Form, Input, InputNumber, message, Modal,} from 'antd';
import axios from '@/utils/axios.js'
import {useEffect} from 'react'
import './modal.scss'


export default function ModalHooks({isModalOpen, closeModal, row}) {
    const [messageApi, contextHolder] = message.useMessage();
    // 表单
    const [form] = Form.useForm();
    // 下拉框数值
    let passengerOption = [
        {value: '保养', label: '保养'},
        {value: '维修', label: '维修'}
    ]
    //状态下拉框
    const status = [
        {value: 1, label: '运营'},
        {value: 2, label: '非运营'},
    ]

    /**
     *确定时候的回调
     */
    function handleOk() {
        // 验证表单
        form.validateFields().then(async () => {
            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))

            if (row?.id) {
                // 修改数据
                formData.id = row.id
            }
            let {code, message} = await axios.post('/maintenanceEdit/editMaintenanceImplementation', [formData])
            if (code === 200) {
                messageApi.success(message)
                handleCancel()
            } else {
                messageApi.error(message)
            }
        })
    }

    // 关闭页面
    const handleCancel = () => {
        closeModal(false);
        form.resetFields()
    };
    // 表单
    useEffect(() => {
        if (row.id) {
            let formData = JSON.parse(JSON.stringify(row))

            form.setFieldsValue(formData)

        }
    }, [row])


    return (
        <div className="form">

            {contextHolder}
            <Modal title={row?.id ? '修改数据' : '新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
                   width={900}
                   cancelText="取消" okText="确定">
                <Form
                    name="statics"
                    form={form}
                    wrapperCol={
                        {span: 30, offset: 0}
                    }
                    layout='inline'
                    initialValues={{
                        remember: true,
                    }}

                    autoComplete="off"
                >
                    <Form.Item
                        label="执行类型"
                        name="executeType"
                        rules={[
                            {
                                required: true,
                                message: '请输入',

                            },
                        ]}

                    >
                        <Input></Input>
                    </Form.Item>
                    <Form.Item
                        label="数量"
                        name="number"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>


                </Form>

            </Modal>
        </div>
    )


}