text: import React, { PureComponent } from 'react';
  import { formatMessage } from 'umi/locale';
  import { Layout, message } from 'antd';
  import Animate from 'rc-animate';
  import { connect } from 'dva';
  import router from 'umi/router';
  import GlobalHeader from '@/components/GlobalHeader';
  import TopNavHeader from '@/components/TopNavHeader';
  import styles from './Header.less';
  
  const { Header } = Layout;
  
  class HeaderView extends PureComponent {
    state = {
      visible: true,
    };
  
    static getDerivedStateFromProps(props, state) {
      if (!props.autoHideHeader && !state.visible) {
        return {
          visible: true,
        };
      }
      return null;
    }
  
    componentDidMount() {
      document.addEventListener('scroll', this.handScroll, { passive: true });
    }
  
    componentWillUnmount() {
      document.removeEventListener('scroll', this.handScroll);
    }
  
    getHeadWidth = () => {
      const { isMobile, collapsed, setting } = this.props;
      const { fixedHeader, layout } = setting;
      if (isMobile || !fixedHeader || layout === 'topmenu') {
        return '100%';
      }
      return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 256px)';
    };
  
    handleNoticeClear = type => {
      message.success(
        `${formatMessage({ id: 'component.noticeIcon.cleared' })} ${formatMessage({
          id: `component.globalHeader.${type}`,
        })}`
      );
      const { dispatch } = this.props;
      dispatch({
        type: 'global/clearNotices',
        payload: type,
      });
    };
  
    // 我的工作台点击事件
    handleMenuClick = ({key}) => {
      const keyAndUrl=key.split("&&");
      const keyCopy=keyAndUrl[0];
      const url=keyAndUrl[1];
     
      const { dispatch } = this.props;
      if (keyCopy === 'userCenter') {
        const hideNotes = true
        dispatch({
          type:'notesData/getHideNotes',
          payload:{hideNotes}
        })
      }
      else if (keyCopy === 'myReply') {
        router.push('/myReply');
      }
      else if (keyCopy === 'downloadAllList') {
        dispatch({
          type: 'downloadAllModels/setRedDot',
          payload: 0
        });
        router.push('/downloadAllList');
      }
      else if(keyCopy === 'mySpecialSubject' || keyCopy==="myCollection"){
        router.push(`/${url}`);
      }
      
      // if (keyCopy === 'logout') {
      //   dispatch({
      //     type: 'login/logout',
      //   });
      // }
    };
  
    handleNoticeVisibleChange = visible => {
      if (visible) {
        const { dispatch } = this.props;
        dispatch({
          type: 'global/fetchNotices',
        });
      }
    };
  
    handScroll = () => {
      const { autoHideHeader } = this.props;
      const { visible } = this.state;
      if (!autoHideHeader) {
        return;
      }
      const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
      if (!this.ticking) {
        this.ticking = true;
        requestAnimationFrame(() => {
          if (this.oldScrollTop > scrollTop) {
            this.setState({
              visible: true,
            });
          } else if (scrollTop > 300 && visible) {
            this.setState({
              visible: false,
            });
          } else if (scrollTop < 300 && !visible) {
            this.setState({
              visible: true,
            });
          }
          this.oldScrollTop = scrollTop;
          this.ticking = false;
        });
      }
    };
  
    render() {
      const { isMobile, handleMenuCollapse, setting } = this.props;
      const { navTheme, layout, fixedHeader } = setting;
      const { visible } = this.state;
      const isTop = layout === 'topmenu';
      const HeaderDom = visible ? (
        <Header style={{ padding: 0, width:'100%' }} className={fixedHeader ? styles.fixedHeader : ''}>
          {isTop && !isMobile ? (
            <TopNavHeader
              theme={navTheme}
              mode="horizontal"
              onCollapse={handleMenuCollapse}
              onNoticeClear={this.handleNoticeClear}
              onMenuClick={this.handleMenuClick}
              onNoticeVisibleChange={this.handleNoticeVisibleChange}
              {...this.props}
            />
          ) : (
            <GlobalHeader
              onCollapse={handleMenuCollapse}
              onNoticeClear={this.handleNoticeClear}
              onMenuClick={this.handleMenuClick}
              onNoticeVisibleChange={this.handleNoticeVisibleChange}
              {...this.props}
            />
          )}
        </Header>
      ) : null;
      return (
        <Animate component="" transitionName="fade">
          {HeaderDom}
        </Animate>
      );
    }
  }
  
  export default connect(({ user, global, setting, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices,
    setting,
  }))(HeaderView);
  