<template>
  <SvgIcon
    :title="isFullscreen ? '退出全屏' : '全屏显示'"
    :name="isFullscreen ? 'minify' : 'magnify'"
    :size="18"
    color="#fff"
    style="cursor:pointer"
    @click="toggleFullscreen"
  />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

const isFullscreen = ref(false)

const updateFullscreenState = () => {
  isFullscreen.value = !!document.fullscreenElement
}

const toggleFullscreen = async () => {
  try {
    if (!document.fullscreenElement) {
      await document.documentElement.requestFullscreen()
    } else {
      await document.exitFullscreen()
    }
  } catch (error) {
    console.error('切换全屏失败:', error)
  }
}

onMounted(() => {
  updateFullscreenState()
  document.addEventListener('fullscreenchange', updateFullscreenState)
})

onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', updateFullscreenState)
})
</script>
