<template>
  <div class="remind-box" @click="handleMsg">
    <msgModalPanel ref='msgModalPanel' :visible.sync="visible" />
    <p-icon class="remind-box-icon" :iconStyle="{ color: '#ffffff', fontSize: '20px' }" type="bell" />
    <span v-if="remindCount" class="badge">{{ remindCount }}</span>
  </div>
</template>

<script>
import msgModalPanel from './msgModalPanel.vue';
import notification from 'ant-design-vue/es/notification';
import { setMessageRead } from './api.js';

import { UPCLOUD_RDC_TMS_WS } from '@/config/serviceSettings.js';
const msgTypeName = {
  A: '预警',
  B: '消息',
};
export default {
  created() {
    this.getUnRead();
  },
  data() {
    return {
      visible: false,
    };
  },
  components: { msgModalPanel },
  computed: {
    remindCount() {
      const { A, B } = this.$store.state.business.count;
      return +A + +B;
    },
    remindList() {
      return this.$store.state.business.remindList;
    },
  },
  mounted() {

    let user = this.$store.getters?.userInfo ?? null;
    let ws = new WebSocket(UPCLOUD_RDC_TMS_WS + '/messageJob/websocket/pc/' + user.userId);
    ws.onopen = function (event) {
      console.log('服务已连接');
    };
    let _this = this;
    ws.onmessage = function (event) {
      var data = JSON.parse(event.data);
      console.log(data.alarmVoice === 'Y');
      _this.$store.dispatch('getCountMessage');
      _this.visible && _this.$refs.msgModalPanel.resetPage()
      notification.success({
        message(h) {
          return h('div', {
            domProps: {
              innerHTML: `您有<span style="color:red">"${data.messageName}"</span>${msgTypeName[data.messageNoticeType]}消息到达`,
            },
          });
        },
        duration:9,
        description: data.content,
        icon: <a-icon type="message" style="color: #108ee9" />,
        key: data.id,
        btn: (h) => {
          return h(
            'a-button',
            {on: {
              click: () => {

                  setMessageRead(this, [data.id],data);
                  _this.$notification.close(data.id);
                  let { shipbillId, messageType } = data;
                  shipbillId = shipbillId.split(',')[0];
                  let routeUrl = _this.$router.resolve({
                    path: '/localDetails',
                    query: { shipbillId, messageType },
                  });
                  return window.open(routeUrl.href, '_blank');
                },
              },
            },
            '阅读详情'
          );
        },
      });
      if (data.alarmVoice === 'Y') {
        window.speechSynthesis.speak(new SpeechSynthesisUtterance(data.content.replace(/\d/g, '$& ').trim()));
      }
    };
    ws.onclose = function (event) {
      console.log('服务连接关闭');
    };
    ws.onerror = function (event) {
      console.log(event, '连接出错');
    };
  },
  methods: {
    handleMsg() {
      this.visible = true;
      this.getUnRead();
    },
    handleToPage(item) {
      this.$router.push({ path: '/auth/early_warning_alert' });
    },
    // 获取未读数量
    getUnRead() {
      this.$store.dispatch('getCountMessage');
    },
  },
};
</script>
<style>
.ant-pro-global-header-index-light .remind-box-icon.plgicon > i {
  color: #fff !important;
}
</style>
<style scoped lang='less'>
.remind-box {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;

  .badge {
    position: absolute;
    top: 15px;
    right: 0;
    transform: scale(0.7) translate(50%, -50%);
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
    background: #f5222d;
    border-radius: 10px;
    // -webkit-box-shadow: 0 0 0 1px #fff;
    // box-shadow: 0 0 0 1px #fff;
  }
}

.msg-panel {
  .msg-panel-item {
    padding: 3px 8px;
    margin-bottom: 3px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 200ms;

    &:hover {
      background: #f2f2f2;
    }

    .msg-badge {
      display: inline-block;
      border-radius: 4px;
      padding: 0 6px;
      margin-left: 8px;
      background: #f5222d;
      color: #fff;
    }
  }
}
</style>