import React from 'react';

import uuid from 'uuid';

import {Prompt} from 'react-router-dom';

export default class UserAdd extends React.Component{
    state = {
        isPrompt:false
    }
    handleSubmit = (ev) =>{
        //获取名字和电话
        let name = this.nameInput.value;
        let tel = this.telInput.value;

        //存到缓存中(localStorage)
        let userStr = localStorage.getItem('users');
        let userArr = userStr ? JSON.parse(userStr):[];

        userArr.push({
            id:uuid(),
            name,
            tel
        });

        localStorage.setItem('users',JSON.stringify(userArr));

        this.nameInput.value='';
        this.telInput.value='';

        //跳转到用户列表
        this.props.history.push('/user/list');

        ev.preventDefault();
    }
    changePrompt = (ev) =>{
        let value = ev.target.value;
        this.setState({
            isPrompt:value.length>0
        })
    }
    render(){
        return (<div>
            <Prompt
                when={this.state.isPrompt}
                message={location=>`您确定要跳转到${location.pathname}么?`}
            />
            <form className="form" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <input onChange={this.changePrompt} type="text" ref={input=>this.nameInput=input} className="form-control" placeholder="请输入姓名"/>
                </div>
                <div className="form-group">
                    <input onChange={this.changePrompt} type="number" ref={input=>this.telInput=input} className="form-control" placeholder="请输入电话"/>
                </div>
                <div className="form-group">
                    <button className="btn btn-primary">添加</button>
                </div>
            </form>
        </div>)
    }
}