import React from 'react';
import { useNavigate } from 'react-router-dom';
import { LogoutOutlined } from '@ant-design/icons';
import { Button, Modal } from 'antd';
import { useModel } from '@/store';
import { logout } from '@/services/user';

const { confirm } = Modal;

export default (props) => {
  const navigate = useNavigate();
  const { setUser } = useModel('user');

  const onExit = () => {

    confirm({
      title: '确认退出系统?',
      onOk: () => {
        logout();
        localStorage.removeItem('token');
        setUser();
        navigate('/login?back=true');
      }
    });
  }

  return (
    <Button className='font' type="text" icon={<LogoutOutlined />} onClick={onExit}>退出</Button>
  )
}