<template>
  <Teleport to="body">
    <Transition name="fade">
      <div
        v-if="visible"
        class="!pointer-events-auto fixed inset-0 z-[100] flex items-center justify-center p-4"
      >
        <div
          class="backdrop-blur-[2px z-[110]] absolute inset-0 bg-black/40"
          @click.stop="hide"
        ></div>

        <div
          class="relative z-10 w-full max-w-[280px] rounded-[40px] border border-white/0 bg-[#DDDDDD] px-8 pt-8 pb-4 shadow-2xl"
          @click.stop
        >
          <div class="space-y-2 text-black">
            <h3 class="flex items-start text-lg font-black"><span class="mr-1">*</span>重要提示</h3>
            <p class="text-[15px] leading-relaxed font-bold tracking-tight">
              验证邮件已发送至邮箱，如无法找到，请检查垃圾邮件箱或营销邮件箱。
            </p>
          </div>

          <div class="flex justify-center pt-3">
            <Button
              class="h-[40px] w-[85px] cursor-pointer rounded-full bg-[#A8FF53] font-medium text-black hover:bg-[#96E64A]"
              @click.stop="hide"
            >
              好的
            </Button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'
import { Button } from '@/components/ui/button'

const visible = ref(false)
const timer: ReturnType<typeof setTimeout> | null = null

const show = () => {
  visible.value = true
}

const hide = () => {
  console.log('hide')
  visible.value = false
}

// 组件卸载前清除计时器防止内存泄漏
onBeforeUnmount(() => {
  if (timer) clearTimeout(timer)
})

defineExpose({ show, hide })
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>
