import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import { Modal, Input, Row, Col } from 'antd';
const { Search } = Input;
const RoadModal = props => {
    const { isVisible, onSubmit, onCancel, roads } = props;
    const [roadName, setRoadName] = useState('');
    const [isRepeated, setIsRepeated] = useState(true);

    let timer = null;
    useEffect(() => {
        if (timer)
            clearTimeout(timer)
        else {
            timer = setTimeout(() => {
                if (roads.some(item => item.roadName == roadName)) {
                    setIsRepeated(true)
                } else {
                    setIsRepeated(false);
                }
            }, 500);
        }

    }, [roadName]);


    useEffect(() => {
        if (!isVisible) {
            setRoadName('')
            setIsRepeated(false)
        }
        return () => {
            setRoadName('')
        }
    }, [isVisible])


    const onInputText = (e) => {
        const value = e.target.value;
        setRoadName(value);
    }

    const onConfirm = () => {
        if (!isRepeated)
            if (roadName && roadName.trim() != '') {
                onSubmit(roadName)
            }
    }


    return (
        <Modal title="添加道路" visible={isVisible} onOk={onConfirm} onCancel={onCancel} >
            <Row type="flex" style={{ alignContent: 'center' }}>
                <Col span={6}>
                    <span style={{ color: 'gray', lineHeight: "32px" }}>请输入道路名称:</span>
                </Col>
                <Col span={18}>
                    <Search placeholder='请输入道路名称' onChange={onInputText} value={roadName} />
                </Col>
                <Row>
                    {
                        isRepeated ? <span style={{ color: 'red' }}>道路名称重复</span>
                            : ''
                    }
                </Row>
            </Row>
        </Modal>
    )
}

RoadModal.propTypes = {}

export default RoadModal