import { ElMessage } from 'element-plus'

// 状态存储
let permissionStatus = null
let screenDetails = null
let currentPopup = null
let popupObserver = null

// 初始化屏幕管理
window.addEventListener('load', async () => {
  // 检查浏览器支持
  if (!('getScreenDetails' in window) || 
      !('onchange' in screen)) {
    ElMessage.error('您的浏览器不支持多屏管理功能')
    return
  }
  
  // 注册屏幕变化监听
  screen.addEventListener('change', updateScreens)
  window.addEventListener('resize', updateScreens)
  
  // 检查并请求权限
  try {
    permissionStatus = await navigator.permissions.query({
      name: 'window-management'
    })
    
    // 监听权限变化
    permissionStatus.onchange = () => {
      updateScreens(false)
    }
  } catch (error) {
    console.error('权限请求失败:', error)
  }
  
  await updateScreens()
})

// 更新屏幕信息
const updateScreens = async (requestPermission = true) => {
  try {
    const screens = await getScreenDetails(requestPermission)
    const currentScreen = await getCurrentScreen()
    
    return { screens, currentScreen }
  } catch (error) {
    console.error('屏幕更新失败:', error)
    return { screens: [window.screen], currentScreen: window.screen }
  }
}

// 获取屏幕详情
const getScreenDetails = async (requestPermission) => {
  // 权限检查
  if (permissionStatus?.state === 'denied') {
    ElMessage.error('请允许窗口管理权限')
    return [window.screen]
  }

  try {
    // 获取屏幕详情
    screenDetails = await window.getScreenDetails()
    
    // 设置屏幕变化监听
    screenDetails.addEventListener('screenchange', () => {
      updateScreens(false)
    })
    
    return screenDetails.screens
  } catch (error) {
    // HTTPS环境检查
    if (!location.hostname.includes('localhost') && 
        location.protocol !== 'https:') {
      ElMessage.warning('该功能需在HTTPS环境或localhost下使用')
    }
    return [window.screen]
  }
}

// 获取当前屏幕
const getCurrentScreen = async () => {
  try {
    if (!screenDetails) return window.screen
    return screenDetails.currentScreen
  } catch {
    return window.screen
  }
}

// 在指定屏幕打开窗口
const openPopup = async (screenIndex) => {
  const screens = await getScreenDetails(true)
  
  if (!screens[screenIndex]) {
    ElMessage.error('指定屏幕不存在')
    return
  }
  
  const targetScreen = screens[screenIndex]
  const options = {
    url: window.location.href,
    x: targetScreen.availLeft,
    y: targetScreen.availTop,
    width: targetScreen.availWidth,
    height: targetScreen.availHeight
  }
  
  // 关闭已有弹窗
  if (currentPopup) currentPopup.close()
  
  // 打开新窗口
  currentPopup = window.open(
    options.url,
    '_blank',
    `left=${options.x},top=${options.y},
     width=${options.width},height=${options.height}`
  )
  
  // 监控窗口状态
  if (popupObserver) clearInterval(popupObserver)
  popupObserver = setInterval(() => {
    if (currentPopup.closed) {
      clearInterval(popupObserver)
      currentPopup = null
    }
  }, 500)
}

export { updateScreens, openPopup }

<template>
  <div class="screen-manager">
    <h3>检测到的屏幕 ({{ screens.length }})</h3>
    
    <div class="screen-list">
      <div 
        v-for="(scr, index) in screens" 
        :key="index"
        class="screen-item"
        @click="openScreen(index)">
        <span>屏幕 #{{ index + 1}}</span>
        <span>{{ scr.width }} × {{ scr.height }}</span>
      </div>
    </div>
    
    <button @click="refreshScreens">刷新屏幕信息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { openPopup, updateScreens } from './screenAPI.js'

const screens = ref([])

// 初始化屏幕信息
const refreshScreens = async () => {
  const result = await updateScreens()
  screens.value = result.screens
}

// 在指定屏幕打开窗口
const openScreen = (index) => {
  openPopup(index)
}

// 初始加载
refreshScreens()
</script>

// 窗口间通信示例
const broadcast = new BroadcastChannel('screen_channel')

// 发送消息
broadcast.postMessage({ type: 'data_update', payload: newData })

// 接收消息
broadcast.onmessage = (event) => {
  console.log('收到消息:', event.data)
}

• 检查浏览器设置中的权限项
• 引导用户手动开启权限
• 提供降级方案（单屏模式）

// 功能检测
const isSupported = () => {
  return 'getScreenDetails' in window && 
         'permissions' in navigator
}

• 检查显示器排列设置
• 使用availLeft/Top而非left/top
• 考虑系统任务栏占用的空间

• 获取用户多显示器配置信息
• 实现跨屏窗口精准投放
• 实时响应屏幕配置变化
• 构建专业级多屏应用