import { Link } from 'react-router-dom'
import './style.css'
import React,{ useState } from 'react';
import ClassManage from '../pages/Home/img/classmanage.jpg'
import SubjectManage from "../pages/Home/img/testmanage.jpg"
import Send from "../pages/Home/img/test.jpg"
import Set from '../pages/Home/img/setting.jpg'
import Mark from '../pages/Home/img/correct.jpg'
import Logo from '../pages/Home/img/logo.jpg'

// 导航
function HeaderNavTeacher() {

    const outlog=()=>{
        localStorage.clear()
        // setisChecked(false)
        alert('注销成功')
        window.location.href='http://36.138.114.105:30294/signin'
    };

    const [isChecked,setisChecked]=useState(false)

     // 点击(设置)弹出窗口
     const [settingsVisible, setSettingsVisible] = useState(false);

     const handleSettingsClick = () => {
         setSettingsVisible(!settingsVisible);
     };


    return (
        // 导航
        <div className="nav">
            <div className='title-nav'>
                <img src={Logo} alt="" width='45px' height='40px'/>
                <p>达梦实训平台</p>
            </div>
            <div className="container-fluid">
                {/* <div>
                    头像
                </div> */}
                <ul className="narbar-nav mr-auto">
                    <li className='nav-item'>
                        <Link className='nav-link' to='/refresh'>刷新页面</Link>
                    </li>
                    <li className='nav-item'>
                        <Link className='nav-link' to='/'>学生</Link>
                    </li>
                    <li className='nav-item'>
                        <Link className='nav-link' to='/teacher'>教师</Link>
                    </li>
                    <li className='nav-item'>
                        <Link className='nav-link' to='/signup'>注册</Link>
                    </li>
                    <li className='nav-item'>
                        <Link className='nav-link' to='/signin'>登录</Link>
                    </li>
                </ul>
            </div>
            <div className='left-nav-li'>
                <ul>
                {[{name:'班级管理',path:'/teacher',ImgSrc:ClassManage},{name:'实训管理',path:'/teacher/trainmanage',ImgSrc:Send},{name:'批改',path:'/teacher/mark',ImgSrc:Mark},{name:'考试管理',path:'/teacher/managetest',ImgSrc:SubjectManage},{name:'设置',ImgSrc:Set,onClick:handleSettingsClick}].map((item)=> 
                        <li onClick={item.onClick}>
                            <div className='nav-li-box'>
                                <Link to={item.path} className="custom-link-home" style={{color:'black'}}>
                                <img src={ item.ImgSrc } alt="" width='30px' height='30px'/>
                                <p>{item.name}</p>
                                </Link>
                            </div>
                        </li>)}
                </ul>
            </div>
            {/* 设置 */}
            {settingsVisible && (
                    <div className='Form-nav'>
                        <div className="set-list-nav">
                            <button className='close-btn-nav' onClick={handleSettingsClick}>X</button>
                            <ul>
                                <li>账号管理</li>
                                <li>个人信息</li>
                                <li>登录设备</li>
                                <li>我的通知</li>
                                <li>个性化</li>
                            </ul>
                        </div>
                        <button className='exit-btn-nav' onClick={outlog}>退出登录</button>
                    </div>
                )}
        </div>
    )
}

export default HeaderNavTeacher;