publictransportation/src/pages/homePageChild/carCompletionRate/components/modal.jsx

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

export default function ModalHooks({isModalOpen, closeModal, row, lineList, option}) {
    const [messageApi, contextHolder] = message.useMessage();
    // 表单
    const [form] = Form.useForm();
    // 下拉选项
    const modelOption = [
        {value: 0, label: '上行'},
        {value: 1, label: '下行'}
    ]

    /**
     *确定时候的回调
     */
    function handleOk() {
        // 验证表单
        form.validateFields().then(async () => {
            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
            if (row?.id) {
                // 修改数据
                newData.id = row.id
            }
            let {code, message} = await axios.post('/homePageEdit/editDepartPunctualityRate', [newData])
            if (code === 200) {
                messageApi.success(message)
                handleCancel()
            } else {
                messageApi.error(message)
            }
        })
    }

    // 关闭页面
    const handleCancel = () => {
        closeModal(false);
        form.resetFields()
    };

    /**
     * 线路名称下拉列表
     * @param id 数据
     */
    function setSelectedItems(id) {
        //  找到当条值
        let i = lineList.find(item => item.lineId === id)
        // 站点数据
        let stationList = i.lineModeList[0].modeStationsList
        form.setFieldValue('startStation', stationList[0].stationName)
        stationList.reverse()
        form.setFieldValue('endStation', stationList.find((item => item.direction === 1)).stationName)
    }


    // 表单
    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="lineId"
                        rules={[
                            {
                                required: true,
                                message: '请选择线路名称',

                            },
                        ]}

                    >
                        <Select options={option} onChange={setSelectedItems}></Select>
                    </Form.Item>

                    <Form.Item
                        label="跑法"
                        name="modelId"
                        rules={[
                            {
                                required: true,
                                message: '请选择跑法',

                            },
                        ]}
                    >
                        <Select options={modelOption}></Select>
                    </Form.Item>

                    <Form.Item
                        label="发车总数"
                        name="total"
                        rules={[
                            {
                                required: true,
                                message: '请输入发车总数',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}/>
                    </Form.Item>

                    <Form.Item
                        label="准点数"
                        name="onTime"
                        rules={[
                            {
                                required: true,
                                message: '请输入准点数',


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


                    <Form.Item
                        label="开始站点"
                        name="startStation"
                        rules={[
                            {
                                required: true,
                                message: '请选择站点',

                            },
                        ]}
                    >
                        <Input style={{width: '100%'}} disabled/>
                    </Form.Item>

                    <Form.Item
                        label="结束站点"
                        name="endStation"
                        rules={[
                            {

                                message: '请输入满意度',

                            },
                        ]}
                    >
                        <Input style={{width: '100%'}} disabled/>
                    </Form.Item>
                    <Form.Item
                        label="车牌"
                        name="licensePlate"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <Input></Input>
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    )


}