<!-- Message.vue -->
<template>
  <transition name="fade">
    <div v-if="visible" class="message" :class="`message--${type}`">
      <div class="message-content">
        <span>{{ message }}</span>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  message: string
  type: 'success' | 'error'
  duration?: number // 可选，自动关闭时长，默认 3000ms
}>()

const emit = defineEmits(['close'])

const visible = ref(true)

onMounted(() => {
  const timer = setTimeout(() => {
    visible.value = false
    clearTimeout(timer)
    setTimeout(() => emit('close'), 300) // 动画过渡后emit close
  }, props.duration || 3000)
})
</script>

<style lang="less" scoped>
.message {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  color: #232323;
  font-size: 1.4rem;
  z-index: 2000;
  transition: all 0.3s;

  &--success {
    background-color: #f0f9eb;
    border: 0.1rem solid #e1f3d8;
    color: #67c23a;
  }

  &--error {
    background-color: #fef0f0;
    border: 0.1rem solid #fde2e2;
    color: #f56c6c;
  }

  .message-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

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