<template>
  <a-dropdown :trigger="['click']" @open-change="handleMenuToggle">
    <a-badge class="message-badge" :count="messageCount" :offset="[0, 10]" show-zero color="#1abb9c">
      <a-button type="text" class="message-trigger">
        <message-outlined :style="{ fontSize: '16px' }" />
      </a-button>
    </a-badge>

    <template #overlay>
      <a-menu class="message-menu">
        <a-menu-item v-if="messages.length === 0" disabled>
          <span>没有新消息</span>
        </a-menu-item>

        <template v-for="item in messages" :key="item.id">
          <a-menu-item @click="showSingleMessage(item)">
            <div class="message-item">
              <div class="message-title">{{ item.title }}</div>
              <div class="message-content">{{ item.message }}</div>
              <div class="message-time">{{ item.timeInterval }}</div>
            </div>
          </a-menu-item>

          <a-menu-divider v-if="messages.length > 0" />
        </template>

        <a-menu-item @click="viewMore">
          <strong>查看全部消息</strong>
        </a-menu-item>
        <a-menu-item @click="receiveAllMessage">
          <strong>设置所有消息已读</strong>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script>
import { MessageOutlined } from '@ant-design/icons-vue';
import Common from '../common/Common.js';
import { Notify } from 'pc-component-v3';

export default {
  components: {
    MessageOutlined,
  },
  props: {
    loginInfo: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      messages: [],
      messageCount: 0,
      webSocket: null,
    };
  },
  watch: {
    loginInfo: {
      handler(newVal) {
        if (newVal) {
          this.getMessage();
          this.getMessageCount();
          // this.openWebSocket();
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getMessageCount() {
      try {
        const response = await $.ajax({
          url: Common.getApiURL('messageQueueResource/countByUserId'),
          type: 'get',
          beforeSend: request => Common.addTokenToRequest(request),
        });
        
        if (response.errorCode !== 0) {
          Notify.error(this.$t('lang.Notify.prompt'), response.errorMessage, false);
          return;
        }
        
        this.messageCount = response.data;
      } catch (error) {
        Common.processException(error);
      }
    },

    async getMessage() {
      try {
        const response = await $.ajax({
          url: Common.getApiURL('messageQueueResource/listByUserId'),
          type: 'get',
          data: { count: 10 },
          beforeSend: request => Common.addTokenToRequest(request),
        });

        if (response.errorCode !== 0) {
          Notify.error(this.$t('lang.Notify.prompt'), response.errorMessage, false);
          return;
        }

        this.messages = response.datas;
      } catch (error) {
        Common.processException(error);
      }
    },

    showSingleMessage(item) {
      this.messageCount = Math.max(0, this.messageCount - 1);
      this.$router.push(`/desktop/single-notification/${item.id}`);
    },

    viewMore() {
      this.$router.push('/desktop/notification');
    },

    async receiveAllMessage() {
      try {
        const response = await $.ajax({
          url: Common.getApiURL('messageQueueResource/reveiveAll'),
          type: 'get',
          beforeSend: request => Common.addTokenToRequest(request),
        });

        if (response.errorCode !== 0) {
          Notify.error(this.$t('lang.Notify.prompt'), response.errorMessage, false);
          return;
        }

        this.getMessageCount();
        this.getMessage();
      } catch (error) {
        Common.processException(error);
      }
    },

    handleMenuToggle(visible) {
      if (visible) this.getMessage();
    },
  },
};
</script>

<style scoped>
.message-trigger {
  padding: 0 12px;
  width: 40px;
  height: 40px;
}

.message-menu {
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
}
.message-badge {
  margin-right: 12px;
}
.message-item {
  width: 100%;
}

.message-title {
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-content {
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  margin-bottom: 4px;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-time {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  text-align: right;
}
</style>