import React, { useCallback, useEffect, useRef, useState } from 'react';
import { history, Link } from 'umi';
import classNames from 'classnames';
// import { getPersonList, exportPersonList } from '@/services/person';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { FullscreenOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useFullScreen } from './hook';
import DateCommponets from './DateCommponets';
import Styles from './style.less';
import SquareBox from '@/components/ScreenBox/SquareBox';
import ScreenHeader from '@/components/ScreenBox/ScreenHeader';

export default (props) => {
  const { style, isFullScreen, onFullScreen } = useFullScreen();

  return (
    <PageHeaderWrapper
      extra={
        <Button icon={<FullscreenOutlined />} onClick={onFullScreen}>
          全屏
        </Button>
      }
    >
      <div
        className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
        style={style}
      >
        <div className={Styles['grail-layout']}>
          <div className={Styles['grail-header']}>
            <ScreenHeader weather="多云 21-28 °C" />
          </div>
          <div className={Styles['grail-container']}>
            <div className={Styles['grail-left']}>
              <SquareBox>asdfasdf</SquareBox>
            </div>
            <div className={Styles['grail-content']}>
              <DateCommponets />
            </div>
            <div className={Styles['grail-right']}>
              <SquareBox>asdfasdf</SquareBox>
            </div>
          </div>
          <div className={Styles['grail-footer']}></div>
        </div>
      </div>
    </PageHeaderWrapper>
  );
};