import React from 'react';
import { Link } from 'react-router-dom';
import { Dropdown } from 'antd';
import Assets from '@src/components/Assets';
import Button from '../Button';
import './index.less';
import { User } from '../../stores/user';
import { formatDate } from '../../../../src/services/Tools';

function Header(props) {
  const { tabs = [], active, user } = props;
  const { info = {} } = user;
  let inviteStatus = false;
  if (info.login) {
    const inviteDate = new Date(info.inviteLatestTime);
    inviteStatus = (inviteDate.getTime() - new Date().getTime) > 864000000;
  }
  return (
    <div id="header">
      <div className="body">
        <div className="left">
          <Assets name="logo" className="c-p" onClick={() => linkTo('/')} />
        </div>
        <div className="center">
          <div className="tabs">
            {tabs.map(item => {
              return (
                <Link to={item.path}>
                  <div className={`tab ${active === item.key ? 'active' : ''}`}>{item.name}</div>
                </Link>
              );
            })}
          </div>
        </div>
        <div className="right">
          {user.login ? (
            <Dropdown
              trigger="hover"
              overlayClassName="header-user-overlay"
              overlay={
                <div className="list">
                  <div className={`item ${info.previewNumber > 0 ? 'more-message' : ''}`} onClick={() => linkTo('/my/course')}>
                    <div className="t-1">
                      <Assets name={info.previewNumber > 0 ? 'course_more' : 'course'} svg />
                      课程
                    </div>
                    {info.previewNumber > 0 && <div className="t-s-12 nowrap" onClick={(e) => {
                      e.stopPropagation();
                      linkTo('exercise?tab=course');
                    }}>
                      <span className="t-4">{info.previewNumber}</span> 份作业待完成
                    </div>}
                  </div>
                  <div className={`item ${info.textbook ? 'more-message' : ''}`} onClick={() => linkTo('/textbook')}>
                    <div className="t-1">
                      <Assets name={info.textbook ? 'jijing_more' : 'jijing'} svg />
                      机经
                    </div>
                    {info.textbook && <div className="t-s-12 nowrap">最近更新:{formatDate(info.textbook, 'YYYY-MM-DD')}</div>}
                  </div>
                  <div className={`item ${inviteStatus ? 'more-message' : ''}`}>
                    <div className="t-1">
                      <Assets name={inviteStatus ? 'yaoqing_more' : 'yaoqing'} svg />
                      邀请好友
                    </div>
                    {inviteStatus && <div className="t-s-12 nowrap">第{info.inviteNumber}位好友加入</div>}
                  </div>
                  <div className={`item ${info.messageNumber > 0 ? 'more-message' : ''}`} onClick={() => linkTo('/my/message')}>
                    <div className="t-1">
                      <Assets name={info.messageNumber > 0 ? 'message_more' : 'message'} svg />
                      消息
                    </div>
                    {info.messageNumber > 0 && <div className="t-s-12 nowrap" onClick={(e) => {
                      e.stopPropagation();
                      if (info.messages[0].link) {
                        linkTo(info.messages[0].link);
                      } else {
                        linkTo('/my/message');
                      }
                    }}>{`[${info.messages[0].title}]`}{info.messages[0].content.substr(0, 6)}...</div>}
                  </div>
                  <div className="item" onClick={() => User.logout()}>
                    <div className="t-1">
                      <Assets name="exit" svg />
                      退出
                    </div>
                  </div>
                </div>
              }
            >
              <Link to="/my/main" className="info">
                <Assets className="avatar" src={user.info.avatar} />
                <span className="t-2 f-s-12">{user.info.nickname || `qx${user.info.mobile}`}</span>
              </Link>
            </Dropdown>
          ) : (<Button onClick={() => {
            User.needLogin();
          }}>登录</Button>)}
        </div>
      </div>
    </div>
  );
}
Header.propTypes = {};
export default Header;