client_iot-daoshi-template-v/src/composables/useHandleScreen.js

import { reactive, onMounted, toRefs, computed } from 'vue'
import { getBackTime } from '@/http/api'
import { useStore } from '@/store/root'
import { useRouter } from 'vue-router'
import { useStatistics } from '@/composables/useStatistics'

export const useHandleScreen = callback => {
  const router = useRouter()
  const store = useStore()
  const backSocket = computed(() => store.config?.backSocket)
  const version = computed(() => store.config?.version)

  const state = reactive({
    isWall: false, //当前是回到首页还是回到屏保
    messageWS: null,
    autoTimer: null,
    times: [], //总时间
    timer: null, //首页定时器
    wallTimer: null, //屏保定时器
    countDownNum: 0, //回到首页倒计时时间
    countDownToWall: 0, //回到屏保倒计时时间
    countDownGif: false, //是否显示倒计时gif动图
    title: computed(() => (!state.isWall ? '即将进入首页' : '即将进入屏幕保护'))
  })

  //socket发送消息
  function send(msg) {
    try {
      state?.messageWS?.send(msg)
    } catch (error) {
      console.log(error)
    }
  }

  //获取返回时长
  async function _getBackTime() {
    try {
      const { data } = await getBackTime()
      state.times = data
      state.countDownNum = data[0]
      state.countDownToWall = data[1]
    } catch (error) {
      console.log('error: ', error)
    }
  }

  //当前操作页是否首页专用
  function rootPromise() {
    clearTimeout(state.isRootTimer)
    return new Promise(resolve => {
      state.isRootTimer = setTimeout(() => {
        resolve()
      }, state.times[0] * 1000)
    })
  }

  //回到首页专用
  function indexPromise() {
    return new Promise(resolve => {
      state.timer = setInterval(() => {
        state.countDownNum--
        if (state.countDownNum > 0 && state.countDownNum <= 5) {
          if (!state.countDownGif) {
            state.countDownGif = true
          }
        }
        if (state.countDownNum <= 0) {
          clearInterval(state.timer)
          state.countDownGif = false
          state.countDownNum = state.times[0]
          callback && callback()
          resolve()
        }
      }, 1000)
    })
  }

  //屏保专用
  function wallpaperPromise() {
    clearInterval(state.wallTimer)
    state.countDownToWall = state.times[1]
    return new Promise(resolve => {
      state.wallTimer = setInterval(() => {
        state.countDownToWall--
        if (state.countDownToWall > 0 && state.countDownToWall <= 5) {
          if (!state.countDownGif) {
            state.isWall = true
            state.countDownGif = true
          }
        }
        if (state.countDownToWall <= 0) {
          clearInterval(state.wallTimer)
          state.countDownGif = false
          state.isWall = false
          state.countDownToWall = state.times[1]
          callback && callback()
          send('pcscreensavers')
          resolve()
        }
      }, 1000)
    })
  }

  //初始化与容器通信的websocket
  function initWebSocket() {
    try {
      state.messageWS = new WebSocket(backSocket.value)

      //连接成功
      state.messageWS.onopen = setOnopenMessage

      //收到消息的回调
      state.messageWS.onmessage = setOnmessageMessage
    } catch (error) {
      console.log(error)
    }
  }

  //websocket连接成功
  function setOnopenMessage() {
    console.log('message to container success')
    send(`version:${version.value}`)
  }

  //接收数据
  async function setOnmessageMessage() {
    if (state.times[1] !== 0) {
      await wallpaperPromise()
    }
  }

  //超过一分钟未操作回到首页
  const checkHandleScreen = () => {
    useStatistics('device')
    clearInterval(state.timer)
    clearInterval(state.wallTimer)
    clearTimeout(state.autoTimer)
    clearTimeout(state.isRootTimer)
    state.countDownNum = state.times[0]
    state.countDownToWall = state.times[1]
    state.countDownGif = false
    state.isWall = false
    state.autoTimer = setTimeout(async () => {
      if (state.times[0] !== 0) {
        if (router.currentRoute.value.fullPath !== '/index') {
          await indexPromise()
        }

        if ((state.times[1] === 0 && router.currentRoute.value.fullPath === '/index') || (state.times[0] === 0 && state.times[1] === 0)) {
          await rootPromise()
          callback && callback()
        }
      }

      if (state.times[1] !== 0) {
        await wallpaperPromise()
      }
    }, 400)
  }

  //初始化相关数据
  function initMessage() {
    _getBackTime()
    initWebSocket()
  }

  onMounted(initMessage)

  return { ...toRefs(state), checkHandleScreen, send }
}