<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message'

defineOptions({ name: 'Message' })

const { push } = useRouter()
const popoverRef = ref()
const activeName = ref('notice')
const unreadCount = ref(0) // 未读消息数量
const list = ref<any[]>([]) // 消息列表

// 获得消息列表
const getList = async () => {
  list.value = await NotifyMessageApi.getUnreadNotifyMessageList()

  // 强制设置 unreadCount 为 0，避免小红点因为轮询太慢，不消除
  // unreadCount.value = 0
}

// 获得未读消息数
const getUnreadCount = async () => {
  NotifyMessageApi.getUnreadNotifyMessageCount().then((data) => {
    unreadCount.value = data
  })
}

// 标记为已读
const handleRead = async (item) => {
  if (item.readStatus) return
  await NotifyMessageApi.updateNotifyMessageRead(item.id)
  await getUnreadCount()
  await getList()
}

// 跳转我的站内信
const goMyList = () => {
  unref(popoverRef).hide?.() // 关闭弹窗
  push({ name: 'MyNotifyMessage' })
}

// 触发弹窗
const handlePopover = async () => {
  getUnreadCount()
  await getList()
}

// ========== 初始化 =========
onMounted(() => {
  // 首次加载小红点
  getUnreadCount()
  // 轮询刷新小红点
  setInterval(
    () => {
      getUnreadCount()
    },
    1000 * 60 * 2 // 2 分钟
  )
})
</script>
<template>
  <div class="message">
    <ElPopover ref="popoverRef" :width="400" placement="bottom" trigger="click">
      <template #reference>
        <div @click="handlePopover">
          <ElBadge :value="unreadCount" :show-zero="false" :max="99" class="item">
            <Icon :size="18" class="cursor-pointer" icon="ep:bell" />
          </ElBadge>
        </div>
      </template>
      <ElTabs v-model="activeName">
        <ElTabPane label="通知" name="notice">
          <el-scrollbar v-if="list.length > 0" class="message-list">
            <template v-for="item in list" :key="item.id">
              <div class="message-item">
                <img alt="" class="message-icon" src="https://minio.menduner.com/dev/1e6893918ef378ca280360078dfe74ade10b27101c89865261824b46de7d34a6.png" />
                <div class="message-content">
                  <div class="message-title">
                    {{ item.templateNickname }}：{{ item.templateContent }}
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="message-date">{{ formatDate(item.createTime) }}</span>
                    <el-button link type="primary" @click="handleRead(item)"><Icon icon="ep:check" class="mr-5px" /> 标记为已读</el-button>
                  </div>
                </div>
              </div>
            </template>
          </el-scrollbar>
          <el-empty v-else description="暂无消息" />
        </ElTabPane>
      </ElTabs>
      <!-- 更多 -->
      <div class="text-right m-t-10px">
        <XButton preIcon="ep:view" title="查看全部" type="primary" @click="goMyList" />
      </div>
    </ElPopover>
  </div>
</template>

<style lang="scss" scoped>
.message-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 260px;
  line-height: 45px;
}

.message-list {
  display: flex;
  height: 400px;
  flex-direction: column;

  .message-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--el-border-color-light);

    &:last-child {
      border: none;
    }

    .message-icon {
      width: 50px;
      height: 50px;
      margin: 0 20px 0 5px;
    }

    .message-content {
      // display: flex;
      // flex-direction: column;

      .message-title {
        margin-bottom: 5px;
      }

      .message-date {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}
</style>
