<template></template>

<script setup>
import { useMessage } from 'naive-ui'

const NMessage = useMessage()

let loadingMessage = null

class Message {
  /**
   * 规则：
   * * loading message只显示一个，新的message会替换正在显示的loading message
   * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
   */

  removeMessage(message, duration = 2000) {
    setTimeout(() => {
      if (message) {
        message.destroy()
        message = null
      }
    }, duration)
  }

  showMessage(type, content, option = {}) {
    if (loadingMessage && loadingMessage.type === 'loading') {
      // 如果存在则替换正在显示的loading message
      loadingMessage.type = type
      loadingMessage.content = content

      if (type !== 'loading') {
        // 非loading message需设置自动清除
        this.removeMessage(loadingMessage, option.duration)
      }
    } else {
      // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
      let message = NMessage[type](content, option)
      if (type === 'loading') {
        loadingMessage = message
      }
    }
  }

  loading(content) {
    this.showMessage('loading', content, { duration: 0 })
  }

  success(content, option = {}) {
    this.showMessage('success', content, option)
  }

  error(content, option = {}) {
    this.showMessage('error', content, option)
  }

  info(content, option = {}) {
    this.showMessage('info', content, option)
  }

  warning(content, option = {}) {
    this.showMessage('warning', content, option)
  }
}

window['$message'] = new Message()

Object.defineProperty(window, '$message', {
  configurable: false,
  writable: false,
})
</script>
