<template>
  <Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
    <div v-if="isShowRef" class="message-container">
      <div class="message-content" :style="style[type]">
        <p class="text-tips">{{ text }}</p>
      </div>
    </div>
  </Transition>
</template>

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

interface Props {
  text: string
  type: 'warn' | 'error' | 'success'
}

withDefaults(defineProps<Props>(), {
  text: '',
  type: 'success'
})

const style = {
  warn: {
    color: '#F3AD44',
    backgroundColor: 'rgb(253, 246, 236)',
    borderColor: 'rgb(250, 236, 216)'
  },
  error: {
    color: '#FF6666',
    backgroundColor: 'rgb(254, 240, 240)',
    borderColor: 'rgb(253, 226, 226)'
  },
  success: {
    color: '#fff',
    backgroundColor: 'rgba(38, 36, 36, 0.8)',
    borderColor: 'transparent'
  }
} // 控制动画
const isShowRef = ref(false)
onMounted(() => {
  isShowRef.value = true
})
</script>

<style lang="scss" scoped>
.message-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  animation-duration: 0.3s;
}
.message-content {
  position: absolute;
  top: 200px;
  left: 50%;
  z-index: 9999;
  min-width: 300px;
  height: 50px;
  padding: 0 25px;
  color: #999;
  background: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-radius: 100px;
  transform: translate3d(-50%, 0, 0);
  line-height: 50px;

  .text-tips {
    font-size: 24px;
    text-align: center;
    vertical-align: middle;
  }
}
</style>
