<template>
    <div class="layout-operation">
        <el-button type="text" @click="handleFullscreen">
            <el-icon :name="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
        </el-button>
    </div>
</template>

<script setup>
    const isFullscreen = ref(!!document.fullscreenElement);
    const handleFullscreen = () => {
        if (isFullscreen.value) {
            document.exitFullscreen();
            isFullscreen.value = false;
        } else {
            isFullscreen.value = true;
            let fn =
                document.body.requestFullscreen ||
                document.body.webkitRequestFullscreen ||
                document.body.mozRequestFullscreen ||
                document.body.msRequestFullscreen;
            document.fullscreenEnabled && fn?.call(document.body);
        }
    };
</script>

<style lang="less" scoped>
    .layout-operation {
        height: @layout-header-height;
        padding: 0 @layout-space-large;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-avatar {
            margin-right: @layout-space;
        }
    }
</style>
