import logo from '@/assets/img/logo.png'
import { userState } from '@/store/mobx'
import { iMenuItem } from '@/types/router'
import { Button, Dropdown, Menu } from "antd"
import { observer } from 'mobx-react'
import React, { Component } from 'react'
import { Link } from "react-router-dom"
import styles from './index.module.scss'
import './index.scss'
import MenuItem from './MenuItem'
interface iMenuProps {
  list: iMenuItem[]
}
@observer
class NavSider extends Component<iMenuProps, any> {
  render() {
    const { list: MeunList } = this.props
    return (
      <div className="main-nav">
        <div className="logo"><img src={logo}></img></div>
        <div className="nav-content">
          <div className="nav-top">
            {
              MeunList?.map((item: iMenuItem, idx: number) =>
                item.isTop && <MenuItem key={idx} item={item}></MenuItem>
              )
            }
          </div>
          <div className="nav-footer">
            {
              MeunList?.map((item: iMenuItem, idx: number) => {
                if (item.path === '/console/management') {
                  return userState.role === 'ADMIN' ? !item.isTop && <MenuItem key={idx} item={item}></MenuItem> : ''
                } else {
                  return !item.isTop && <MenuItem key={idx} item={item}></MenuItem>
                }
              })
            }
            <div className="pi-text-center">
              <Dropdown overlay={() => {
                return (
                  <Menu>
                    <Menu.Item key="0">
                      <Link to="/acount/safe">账号资料</Link>
                    </Menu.Item>
                    <Menu.Item key="1">
                      <Link to="/acount/safe">账号安全</Link>
                    </Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="2">
                      <Link to="/acount/safe">帮助中心</Link>
                    </Menu.Item>
                    <Menu.Item key="3">
                      {/* <Link to="/login">退出登录</Link> */}
                      <span onClick={() => userState.logout()}>退出登录</span>
                    </Menu.Item>
                  </Menu>
                )
              }} trigger={[ 'click' ]} placement="topRight">
                <Button size="small" className={styles.bottomBtn}>{userState.userInfo.name}</Button>
              </Dropdown>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default NavSider