import React from 'react';
import { routerRedux } from 'dva/router';
import format from 'date-fns/format';
import cnLocale from 'date-fns/locale/zh_cn';
import { Badge, Icon, Menu, Popover, Tooltip } from 'antd';
import styles from './Layout.less';
import Menus from './Menu';

const SubMenu = Menu.SubMenu;

const Header = ({
                  user, msgCnt, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu, dispatch,
                }) => {

  let handleClickMenu = ({ item, key, keyPath }) => {
    switch (key) {
      case 'home': {
        dispatch(routerRedux.push('/dashboard'));
        break;
      }
      case 'changePW': {
        dispatch(routerRedux.push('/changePW'));
        break;
      }
      case 'manual': {
        dispatch(routerRedux.push('/manual'));
        break;
      }
      case 'feedback': {
        dispatch(routerRedux.push('/feedback'));
        break;
      }
      case 'logout': {
        logout();
        break;
      }
      case 'changeInfo': {
        dispatch(routerRedux.push('/changeInfo'));
        break;
      }
      default: {
        break;
      }
    }
  };

  const handleClickTodo = () => {
    dispatch(routerRedux.push('/dashboard'));
  };

  const handleClickWarn = () => {
    dispatch(routerRedux.push('/dashboard'));
  };

  const handleClickInfo = () => {
    dispatch(routerRedux.push('/messages/notification'));
  };

  const menusProps = {
    menu,
    siderFold: false,
    darkTheme: false,
    isNavbar,
    handleClickNavMenu: switchMenuPopover,
    location,
    navOpenKeys,
    changeOpenKeys,
  };
  return (
    <div className={styles.header}>
      {isNavbar
        ? <Popover
          placement="bottomLeft"
          onVisibleChange={switchMenuPopover}
          visible={menuPopoverVisible}
          overlayClassName={styles.popovermenu}
          trigger="click"
          content={<Menus {...menusProps} />}
        >
          <div className={styles.button}>
            <Icon type="bars"/>
          </div>
        </Popover>
        : <div className={styles.button} onClick={switchSider}>
          <Icon type={siderFold ? 'menu-unfold' : 'menu-fold'}/>
        </div>}

      <div className={styles.welcome}>
        <span>{user.user.name || '用户名未定义'} 您好, </span>
        <span> 今天是 {format(new Date(), 'YYYY年MM月DD日, dddd', { locale: cnLocale })}</span>
      </div>

      <div className={styles.rightWarpper}>
        <div className={styles.button} onClick={handleClickTodo}>
          <Tooltip placement="bottom" title={'待办事项'}>
            <Badge count={msgCnt.todo}>
              <Icon type="bell"/>
            </Badge>
          </Tooltip>
        </div>
        {/* <div className={styles.button} onClick={handleClickWarn}>
          <Tooltip placement="bottom" title={'逾期未关闭'}>
            <Badge count={msgCnt.warn}>
              <Icon type="warning"/>
            </Badge>
          </Tooltip>
        </div> */}
        <div className={styles.button} onClick={handleClickInfo}>
          <Tooltip placement="bottom" title={'系统消息'}>
            <Badge count={msgCnt.info}>
              <Icon type="mail"/>
            </Badge>
          </Tooltip>
        </div>
        <Menu mode="horizontal" onClick={handleClickMenu}>
          <SubMenu
            title={<span><Icon type="user"/> {user.user.name || '用户名未定义'} ({user.roleName || '角色未定义'}) </span>}
          >
            {/*<Menu.Item key="home">*/}
            {/*<Icon type="home" /> 个人主页*/}
            {/*</Menu.Item>*/}
            <Menu.Item key="changePW">
              <Icon type="edit"/> 修改密码
            </Menu.Item>
            {user.user.entType !== 'supp' && <Menu.Item key="changeInfo">
              <Icon type="edit"/> 个人信息
            </Menu.Item>}
            <Menu.Item key="manual">
              <Icon type="question-circle-o"/> 使用帮助
            </Menu.Item>
            {/*<Menu.Item key="feedback">*/}
            {/*<Icon type="customer-service" /> 问题反馈*/}
            {/*</Menu.Item>*/}
            <Menu.Item key="logout">
              <Icon type="logout"/> 安全退出
            </Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    </div>
  );
};

// Header.propTypes = {
//   menu: PropTypes.array,
//   user: PropTypes.object,
//   logout: PropTypes.func,
//   switchSider: PropTypes.func,
//   siderFold: PropTypes.bool,
//   isNavbar: PropTypes.bool,
//   menuPopoverVisible: PropTypes.bool,
//   location: PropTypes.object,
//   switchMenuPopover: PropTypes.func,
//   navOpenKeys: PropTypes.array,
//   changeOpenKeys: PropTypes.func,
// };

export default Header;
