/**
 * 互联网医院数据监测中心
 */
import React from 'react';
import { Modal } from 'antd';
import { Util, } from 'tools/index';
import ShowLocStatisitcsBIPage from './statistics/ShowLocStatisitcsBIPage';
import ShowOrderListBIPage from './statistics/ShowOrderListBIPage';
import ShowUserStatisitcsBIPage from './statistics/ShowUserStatisitcsBIPage';
import './style/index.less';

class BIInternetHospitalPage extends React.Component {

  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData: userData,
      isFullScreen: false
    }
    this.fullScreen=this.fullScreen.bind(this);//全屏显示
    this.requestFullScreen=this.requestFullScreen.bind(this);//进入全屏
    this.exitFullscreen=this.exitFullscreen.bind(this);//退出全屏
    this.watchFullScreen=this.watchFullScreen.bind(this);//监听fullScreen事件
  }

  componentDidMount = () => {
    // this.watchFullScreen()
  }


  fullScreen(){
    let isFullScreen=this.state.isFullScreen;
    if (!this.state.isFullScreen) {
        this.requestFullScreen();
    } else {
        this.exitFullscreen();
    }
    this.setState({
        isFullScreen:!isFullScreen
    })
};
requestFullScreen(){
    var dom = document.querySelector('#monitorDataFlowContainer');//绑定想要全屏的组件
    // if (dom.requestFullscreen) {
    //     dom.requestFullscreen();
    // } else
    if (dom.mozRequestFullScreen) {
        dom.mozRequestFullScreen();
    } else if (dom.webkitRequestFullScreen) {
        dom.webkitRequestFullScreen();
    }
};
exitFullscreen(){
    var dom = document;
        // if (dom.exitFullscreen) {
        //     dom.exitFullscreen();
        // } else
         if (dom.mozCancelFullScreen) {
            dom.mozCancelFullScreen();
        } else if (dom.webkitCancelFullScreen) {
            dom.webkitCancelFullScreen();
        }
};
//监听作用
watchFullScreen(){
    console.log(document.webkitIsFullScreen)
    const _self = this;
    document.addEventListener(
        "webkitfullscreenchange",
        function() {
            _self.setState({
                isFullScreen: document.webkitIsFullScreen
            });
        },
        false
    );
};

  render() {
    return <div className="statusutcsBI-dom" id='monitorDataFlowContainer' style={{ width: '100%', height: '100%', background: 'rgb(4,78,181)', overflow: 'hidden' }} onDoubleClick={this.fullScreen}
    >
      <h2 style={{ color: 'white', textAlign: 'center', height: 40, lineHeight: '40px' }}>互联网医院运营分析驾驶舱</h2>
      <div style={{ height: '100%', width: '100%', display: 'flex', textAlign: 'center',marginLeft:10 }}>
        <div style={{ height: '100%', width: '30%', color: 'white' }}>
          <ShowLocStatisitcsBIPage allHeight={this.state.isFullScreen}/>
        </div>
        <div style={{ height: '100%', width: '35%', color: 'white' }}>
          <ShowOrderListBIPage  allHeight={this.state.isFullScreen}/>
        </div>
        <div style={{ height: '100%', width: '34%', color: 'white' }}>
          <ShowUserStatisitcsBIPage  allHeight={this.state.isFullScreen}/>
        </div>
      </div>
    </div>
  }
}

export default BIInternetHospitalPage;