<script setup lang="ts">
import ZMQWorker from '@/composables/useZMQJsonWorker'
import type { ZmqStatus } from './utils/zmq'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElNotification, type NotificationHandle } from 'element-plus'
const worker = ZMQWorker.getInstance()
const zmqStatus = ref<ZmqStatus>('connected')

worker.setStatusCallback((status: string) => {
  zmqStatus.value = status as ZmqStatus
})

provide('zmqStatus', zmqStatus)
onMounted(() => {
  worker.start()
})

onBeforeUnmount(() => {
  worker.stop()
})
const notification = ref<NotificationHandle>()

watch(zmqStatus, status => {
  if (status === 'disconnected') {
    notification.value?.close()
    notification.value = ElNotification({
      title: '通讯异常',
      message: '请检查通讯连接',
      type: 'error',
      duration: 0,
    })
  } else {
    notification.value?.close()
    notification.value = ElNotification({
      title: '通讯正常',
      message: '通讯正常',
      type: 'success',
      duration: 3000,
    })
  }
})
</script>

<template>
  <el-config-provider :locale="zhCn">
    <RouterView />
  </el-config-provider>
</template>

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