<template>
  <div class="video" id="video-container"></div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import EZUIKit from 'ezuikit-js'
  let myVideo: any = ref(null)

  onMounted(async () => {
    init()
    const video = JSON.parse(localStorage.getItem('video') as any)
    document.addEventListener('visibilitychange', (e) => {
      if (!myVideo.value && !video.url) return
      if (document.visibilityState === 'hidden') {
        // 离开
        myVideo.value.pause()
      } else {
        // 回来
        myVideo.value.resume()
      }
    })
  })
  const init = () => {
    const video = JSON.parse(localStorage.getItem('video') as any)
    myVideo.value = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      accessToken: video.token,
      url: video.url,
      template: 'security',
      audio: 0,
      footer: ['hd', 'fullScreen'],
      handleSuccess: () => {
        ElMessage.success('连接成功!')
      },
      handleError: () => {
        ElMessage.error('连接失败')
      }
    })
  }
</script>

<style lang="scss" scoped></style>
