<template>
  <div :class="{headerBox:isGlint}">
    <svg-icon icon-class="message" @click="selectMsg"/>
  </div>
</template>

<script setup>

import {getCurrentInstance, ref, toRefs} from "vue";

const {proxy} = getCurrentInstance();

const isGlint = ref(false)
const emit = defineEmits(['openDrawer'])


const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
})
const {modelValue} = toRefs(props);
//监听消息提醒 并设置图标闪烁
proxy.mqttOnMessage(`yu_mqtt_client:message_online/${modelValue.value}`, 2, (topic, message) => {
  isGlint.value = true
  // console.log(`接收到消息: ${message} --监听: ${topic}`);
});
//查看消息
const selectMsg = () => {
  isGlint.value = false
  emit('openDrawer')
}


</script>
<style scoped>
@keyframes fade {
  from {
    opacity: 1.0;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1.0;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1.0;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1.0;
  }
}

  /* 闪烁特效 */
.headerBox {
  color: #fff;
  padding: 10px;
  font-size: 15px;
  height: 60px;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}

</style>
