<template>
  <v-badge
    color="error"
    :content="unreadCount"
    :model-value="unreadCount > 0"
  >
    <v-btn class="ml-1" size="small" icon="mdi-bell-outline" @click="router.push({ path: '/recruit/personal/message' })"></v-btn>
  </v-badge>
</template>

<script setup>
defineOptions({ name: 'personal-message' })
import { watch } from 'vue'
import { useIM, useDataSource } from '@/hooks/web/useIM'
import { useIMStore } from '@/store/im'
import { useRouter } from 'vue-router'
const router = useRouter()

const _im = useIMStore()
useDataSource()

const {
  unreadCount,
  connected
} = await useIM()

watch(
  () => connected.value,
  (val) => {
    console.log('connected变化', val)
    _im.setConnected(val)

  }
)
</script>

<style lang="scss" scoped>

</style>