<template>
  <span>
    <el-badge :value="notice" 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('shopNotice');
export default {
  name: 'notice',
  props: {},
  components: {},
  data: function () {
    return {
      notice: 0,
    };
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.getNotRead();
  },
  mounted() {
    this.channel();
  },
  methods: {
    ...mapActions(['cnr']),
    toNotice() {
      this.$router.push({ path: `/selfShop/notice` });
    },
    async getNotRead() {
      const res = await this.cnr(this.user.shop._id);
      if (this.$checkRes(res)) {
        this.$set(this, `notice`, res.data);
      }
    },
    channel() {
      const shop_id = _.get(this.user, 'shop._id');
      if (!shop_id) return;
      this.$stomp({
        [`/exchange/${this.$ex}/${shop_id}`]: this.onMessage,
      });
    },
    onMessage(message) {
      let body = message.body;
      if (!body) return;
      body = JSON.parse(body);
      const type = body.type;
      if (type === 'shopMsg') {
        // this.$notify({
        //   title: '新消息',
        //   message: '您有新的消息,请注意及时处理!',
        //   position: 'top-right',
        //   type: 'warning',
        // });
        // this.getNotRead();
      } else if (type === 'chat') {
        this.$notify({
          title: '新消息',
          message: '有顾客进行咨询,请及时回复!',
          position: 'top-right',
          type: 'warning',
        });
      }
    },
  },
};
</script>

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