<template>
  <el-dropdown class="system-letter" popper-class="custom-dropdown-popper custom-dropdown-message">
    <span class="m-r-md">
      <el-badge :value="totalMessage" class="item cur-point">
        <el-icon class="message-icon"><icon-ep-bell /></el-icon>
      </el-badge>
    </span>
    <template #dropdown>
      <el-card class="list-group">
        <template #header>
          <div class="card-header">
            <span class="text-16px">我的消息</span>
            <el-button type="primary" link @click="goProfileMessage('')">查看更多</el-button>
          </div>
        </template>
        <div v-for="item in messageList" :key="item.id" class="list-group-item" @click="goProfileMessage(item.id)">
          <span class="text-ellipsis">
            <i class="dot dot-warning m-r-xs"></i>
            {{ item.name }}
          </span>
          <el-tooltip :content="item.content" :show-after="500" placement="top">
            <small class="text-content">{{ item.content }}</small>
          </el-tooltip>
        </div>
        <empty v-if="messageList.length === 0"></empty>
      </el-card>
    </template>
  </el-dropdown>
</template>
<script>
import { ref } from 'vue'
import { setToken } from 'utils/auth'
import useWebsocket from '@/hooks/useWebsocket'
import { getMessage } from '@/services/message'
import { handleSearchParam } from 'utils'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    // 获取站内信信息
    const messageList = ref([])
    const totalMessage = ref(0)
    async function loadMessage() {
      const data = await getMessage({
        page: 1,
        rows: 5,
        params: handleSearchParam({
          status: 'UNREAD'
        })
      })
      if (data.success) {
        messageList.value = data.data.rows
        totalMessage.value = data.data.total
      }
    }
    loadMessage()
    function handleServiceMessage(data) {
      if (data.operate === 'refresh.token') {
        setToken(data.data)
      }
    }
    function messageCommonFun(data) {
      if (data.operate !== 'HeartBeat') console.log(data)
      switch (data.category) {
        case 'MachineDiscovered': // 机器发现消息
        case 'ResourceEvent': // 云管消息
          ElNotification[data.success ? 'success' : 'error']({
            message: data.message
          })
          break
        case 'ServiceEvent': // 服务消息
          handleServiceMessage(data)
          break
        case 'SiteMessage': // 站内信消息
          loadMessage()
          if (data.operate !== 'message.change') {
            ElNotification.info({
              title: '您有一条新的消息！',
              message: data.message
            })
          }
          break
      }
    }
    const router = useRouter()
    const route = useRoute()
    function goProfileMessage(id) {
      if (route.path !== '/sms-web/message') router.push({ path: '/sms-web/message', query: { id } })
    }
    const { webSocket } = useWebsocket('', messageCommonFun)
    const store = useStore()
    store.commit('SET_WEBSOCKET', webSocket)
    return {
      messageList,
      totalMessage,
      goProfileMessage
    }
  }
}
</script>
<style lang="scss" scoped>
.system-letter {
  display: flex;
  align-items: center;
  .message-icon {
    font-size: 20px;
    color: #98a6ad;
  }
  :deep(.#{$namespace}-badge__content) {
    border: none;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-group {
  padding: 0 !important;
  width: 300px;
  margin: 0;

  .list-group-item {
    position: relative;
    display: block;
    padding: 10px 0;
    background-color: #fff;
    border-bottom: 1px solid #e7ecee;
    cursor: pointer;
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border-width: 3px;
      display: inline-block;
    }
    .dot-warning {
      background-color: #fad733;
    }
    .text-content {
      margin-top: 5px;
      margin-left: 15px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #98a6ad;
    }
  }
}
</style>
<style>
.custom-dropdown-popper.custom-dropdown-message {
  margin-top: 10px !important;
  border: none;
}
</style>
