<script setup>
import MessageContent from './message/index.vue'
import { ref } from 'vue'

const visible = ref(false)
const messageText = ref('')
const messageType = ref('')

const emit = defineEmits(['after-leave'])

const showMessage = ({ type = 'warning', message, duration = 2000 }) => {
  messageText.value = message
  messageType.value = type
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, duration)
}
defineExpose({ showMessage })
</script>

<template>
  <transition 
    name="fade" 
    @after-leave="$emit('after-leave')"
  >
    <MessageContent 
      v-if="visible" 
      :text="messageText" 
      :type="messageType" 
      class="fixed top-20px left-1/2 -translate-x-1/2 z-9999"
    />
  </transition>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>