<template>
  <div class="flex flex-col flex-1">
    <NuxtLoadingIndicator />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
  import refreshToken from '~/utils/RefreshToken'
  import useUserStore from '~/stores/user'
  const userStore = useUserStore()

  onMounted(() => {
    if (!userStore.mqttClient && userStore.userInfoRes.id) {
      // 判断建立连接没 刷新会走这儿
      userStore.connectMqtt()
    }

    // 浏览器打开新的tab页，防止数据不一致
    document.addEventListener('visibilitychange', () => {
      if (userStore.token !== refreshToken.getToken().token) {
        location.reload()
      }
    })
  })

  onUnmounted(() => {
    // 断开连接
    userStore.mqttClient?.disconnect()
  })
</script>
