//设置状态
state = {
    // 检测全屏状态
    isFullScreen: false,
}

componentDidMount() {
    // 注册监听全屏显示事件
    this.watchFullScreen();
}

componentWillUnmount() {
    window.removeEventListener('resize', this.handleSize);
}

// 监听各种不同浏览器的fullscreenchange事件
watchFullScreen = () => {
    document.addEventListener(
        "fullscreenchange",
        () => {
            this.setState({
                isFullScreen: document.fullscreen
            });
        },
        false
    );

    document.addEventListener(
        "mozfullscreenchange",
        () => {
            this.setState({
                isFullScreen: document.mozFullScreen
            });
        },
        false
    );

    document.addEventListener(
        "webkitfullscreenchange",
        () => {
            this.setState({
                isFullScreen: document.webkitIsFullScreen
            });
        },
        false
    );
}

// 浏览器全屏
requestFullScreen = () => {
    const de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen()
    } else {
        notification.open({
            message: '你的浏览器不支持',
            description: '按F11，通常可实现浏览器全屏！',
            icon: <Icon type="smile" style={{color: '#108ee9'}}/>,
        });

    }
    this.setState({
        isFullScreen: document.fullscreen
    });

}

// 退出浏览器全屏
exitFullscreen = () => {
    const de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
    this.setState({
        isFullScreen: document.fullscreen
    });

}

render() {

    const { isFullScreen } = this.state;
        return (
            <Fragment>
                {!isFullScreen ?
                                <Button type="primary"
                                        className={styles.toolButton}
                                        onClick={this.requestFullScreen}
                                        size="large">全屏显示</Button>
                                : <Button type="primary"
                                          className={styles.toolButton}
                                          onClick={this.exitFullscreen}
                                          size="large">退出全屏</Button>
                            }
    
    
            </Fragment>
        );
}