<template>
    <div class="screenDtn" v-if="!isIE">
        <el-button type="text">
            <i v-if="!screen" class="iconfont icon-quanping" @click="screenUnfold"></i>
            <i v-else class="iconfont icon-quxiaoquanping" @click="screenFold"></i>
        </el-button>
    </div>
</template>

<script>

    import {isIE} from '@/utils/index'

    export default {
        name: "FullScreen",
        data(){
            return{
                isIE: isIE(),
                screen: false,
            }
        },
        mounted(){
            this.screen = Boolean(document.fullscreenElement);
            window.onresize = () => {
                setTimeout(() => {
                    this.screen = Boolean(document.fullscreenElement)
                }, 100)
            };
        },
        methods:{
            screenUnfold() {
                let docElm = document.documentElement;
                //W3C
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                //FireFox
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                //Chrome等
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
                //IE11
                else if (elem.msRequestFullscreen) {
                    elem.msRequestFullscreen();
                }
            },
            screenFold() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            },
        }
    }
</script>

<style lang="scss" scoped>

    .el-button {
        color: #999999;
        margin-right: 20px;
    }
</style>
