<template>
  <span>
    <el-badge :value="total" class="notice__badge">
      <i class="el-icon-message-solid notice__icon" @click="toNotice()"></i>
    </el-badge>
  </span>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('notice');
export default {
  name: 'notice',
  props: {},
  components: {},
  data: function() {
    return {
      list: [],
      total: 0,
    };
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.getNotRead();
  },
  mounted() {
    this.channel();
  },
  methods: {
    ...mapActions(['notRead']),
    toNotice() {
      this.$router.push('/system/notice/view');
    },
    async getNotRead() {
      const res = await this.notRead({ lab_id: this.user.lab_id });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.data.length);
      }
    },
    channel() {
      if (!this.user.lab_id) return;
      this.$stomp({
        [`/exchange/lab-notice/${this.user.lab_id}`]: this.onMessage,
      });
      this.$stomp({
        [`/exchange/lab-notice-fresh/${this.user.lab_id}`]: this.getNotRead,
      });
    },
    onMessage(message) {
      this.$notify.info({
        title: '新消息',
        message: '您有新的消息,请注意查收!',
        position: 'bottom-right',
      });
      this.getNotRead();
    },
  },
};
</script>

<style lang="less" scoped>
.notice__icon {
  font-size: 26px;
  cursor: pointer;
}
/deep/.el-badge__content.is-fixed {
  top: 10px;
  cursor: pointer;
}
</style>
