<script setup lang="ts">
import { onBeforeRouteUpdate } from 'vue-router'
import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
import { useUserStore } from '@/stores/modules/user'
import { useNotificationMessage } from '@/stores/modules/notificationMessage'
import dayjs from 'dayjs'

const userStore = useUserStore()
const notificationMsgStore = useNotificationMessage()

const notificationList = ref([])

const curCard = computed(() => {
  return notificationList.value[curIndex.value] || null
})
const curIndex = ref(0)
// 设置定时器进行自动轮播
let trainingIntervalId = null

// 轮询最新未读消息
let newMessageIntervalId = null
// 轮询最新未读消息
const pollingNewMessage = () => {
  // 每隔5分钟轮询一次
  newMessageIntervalId = setInterval(() => {
    getNotificationList(dayjs().format('MM/DD/YYYY HH:mm:ss'))
  }, 300000)
}
pollingNewMessage()

// 登录后自动轮播消息
const trainingCardAfterLogin = () => {
  curIndex.value = curIndex.value + 1
  // 如果消息展示完毕，清除定时器
  if (curIndex.value >= notificationList.value.length) {
    clearInterval(trainingIntervalId)
  }
}

const nextNotification = () => {
  let result = true
  // 更新当前索引和卡片
  curIndex.value = curIndex.value + 1
  // 如果消息为password或者feature类型，暂停自动轮播
  if (
    curCard.value?.notificationType === 'password' ||
    curCard.value?.notificationType === 'feature'
  ) {
    clearInterval(trainingIntervalId)
    result = false
  }
  // 如果到达最后一个消息，设置为null以清除显示
  if (curIndex.value >= notificationList.value.length) {
    clearInterval(trainingIntervalId)
    result = false
  }
  return result
}

// 轮询时的轮播定时器
const initTrainingCard = () => {
  if (curCard.value?.notificationType === 'event') {
    trainingIntervalId = setInterval(nextNotification, 2000)
  }
}

onBeforeRouteUpdate((to, from, next) => {
  if (from.name === 'Login' && userStore.isLogin) {
    getNotificationList()
  }
  if (to.name === 'Login') {
    clearInterval(trainingIntervalId)
    clearInterval(newMessageIntervalId)
    newMessageIntervalId = null
  }
  next()
})

const getNotificationList = (time?: string) => {
  $api
    .getNotificationList({
      rules_type: 'all',
      info_type: true,
      current_time: time
    })
    .then((res) => {
      if (res.code === 200) {
        const data = res.data
        curIndex.value = 0
        notificationList.value = data

        data.length > 0 && notificationMsgStore.setHasNewMsg()

        if (time && data.length > 0) {
          initTrainingCard()
        } else {
          trainingIntervalId = setInterval(trainingCardAfterLogin, 2000)
        }
      }
    })
}

// 关闭消息，如果是登录后自动轮播的消息，则需清除定时器，如果不是则继续轮播下一条消息
const closeMessage = () => {
  if (!newMessageIntervalId) {
    clearInterval(trainingIntervalId)
    curIndex.value = -1
    return
  }

  // 如果当前消息为event类型，则需先清除定时器
  if (curCard.value?.notificationType === 'event') {
    clearInterval(trainingIntervalId)
  }

  const result = nextNotification()
  if (result) {
    trainingIntervalId = setInterval(nextNotification, 2000)
  }
  // 将当前消息标记为已读
  // notificationMsgStore.setReadCardMap(curCard.value?.info?.id)
}
</script>

<template>
  <div class="training-card" v-if="curCard">
    <el-button
      @click="closeMessage"
      style="height: 18px; width: 18px"
      class="el-button--text close-icon"
    >
      <span class="font_family icon-icon_reject_b"></span>
    </el-button>
    <NotificationMessageCard
      :isObserver="false"
      v-if="curCard"
      :data="[curCard]"
    ></NotificationMessageCard>
  </div>
</template>

<style lang="scss" scoped>
.training-card {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 2300;
  width: 432px;
  padding: 16px;
  padding-bottom: 0;
  background-color: var(--color-dialog-body-bg);
  border-radius: 12px;
  box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
  .close-icon {
    position: absolute;
    top: 14px;
    right: 16px;
    padding-top: 2px;
    padding-bottom: 0px;
    font-size: 18px;
    cursor: pointer;
  }
}
</style>
