import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter,
    Route,
    Link,
    NavLink,
    Switch
} from 'react-router-dom';
import uuid from 'uuid';

const stuData = {
    stuList:[
        {id:uuid(), name:'张三', sex:'男', tel:'15678904397'},
        {id:uuid(), name:'李四', sex:'男', tel:'1567454397'},
        {id:uuid(), name:'王五', sex:'女', tel:'13478904397'},
        {id:uuid(), name:'王博', sex:'男', tel:'18678904397'},
        {id:uuid(), name:'丁一宁', sex:'女', tel:'18778904397'},
        {id:uuid(), name:'武宁', sex:'女', tel:'456543343'},
        {id:uuid(), name:'汪洋', sex:'女', tel:'12313213132'}
    ]
}

const Home = () =>(
    <div>
        <h3>我是主页</h3>
    </div>
);
const About = () =>(
    <div>
        <h3>关于我们</h3>
    </div>
);

/* const StuInfo = (props) =>{ //展示学生详情
    let {id} = props.match.params;
    let stuInfo = stuData.stuList.find((item)=>{
        return item.id === id;
    });

    if(!stuInfo){
        props.history.push('/stu');
        return null;
    }
    return (<div>
        <p>学生编号: {stuInfo.id}</p>
        <p>学生名字: {stuInfo.name}</p>
        <p>学生性别: {stuInfo.sex}</p>
        <p>学生电话: {stuInfo.tel}</p>
    </div>)
} */
class StuInfo extends React.Component{
    render(){
        let {id} = this.props.match.params;
        let stuInfo = stuData.stuList.find((item)=>{
            return item.id === id;
        });

        if(!stuInfo){
            this.props.history.push('/stu');
            return null;
        }
        return (<div>
            <p>学生编号: {stuInfo.id}</p>
            <p>学生名字: {stuInfo.name}</p>
            <p>学生性别: {stuInfo.sex}</p>
            <p>学生电话: {stuInfo.tel}</p>
        </div>)
    }
}

const StuMain = () => (
    <ul>
        {
            stuData.stuList.map((item,index)=>
                <li key={item.id}>
                    <Link to={`/stu/${item.id}`}>{item.name}</Link>
                </li>
            )
        }
    </ul>
);

const Stu = () =>(
    <div>
        <Switch>
            <Route exact path="/stu" component={StuMain}></Route>
            <Route path="/stu/:id" component={StuInfo}></Route>
        </Switch>
    </div>
)


const Main = () =>(
    <div>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/stu" component={Stu} />
        </Switch>
    </div>
);

const Header = () =>(
    <ul>
        <li><NavLink exact={true} to="/" activeStyle={{color:'red'}}>主页</NavLink></li>
        <li><NavLink to="/about" activeStyle={{color:'red'}}>关于我们</NavLink></li>
        <li><NavLink to="/stu" activeStyle={{color:'red'}}>学生名单</NavLink></li>
    </ul>
)

class App extends React.Component{
    render(){
        return (<div>
            <Header></Header>
            <Main></Main>
        </div>)
    }
}

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'));