<template>
  <!-- 全屏加载遮罩组件 — 白色卡片居中展示加载状态 -->
  <Teleport to="body">
    <Transition name="fullscreen-loading-fade">
      <div v-if="visible" class="fullscreen-loading">
        <!-- 半透明遮罩层 -->
        <div class="fullscreen-loading__overlay"></div>
        <!-- 白色内容卡片 -->
        <div class="fullscreen-loading__card">
          <!-- 顶部标题栏（含 logo），仅在传入 title 时显示 -->
          <div v-if="title" class="fullscreen-loading__header">
            <img class="fullscreen-loading__logo dib" src="@/assets/images/logo-offerpai.png" alt="logo" />
            <span class="fullscreen-loading__title dib ml8 verali-t pt2">{{ title }}</span>
          </div>
          <!-- 中间文案 -->
          <p class="fullscreen-loading__text">{{ text }}</p>
          <!-- 加载圆环动画 -->
          <div class="fullscreen-loading__spinner"></div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
/** 全屏加载遮罩组件 */
defineProps<{
  /** 是否显示 */
  visible: boolean
  /** 中间提示文案 */
  text: string
  /** 顶部标题文字（不传则不显示标题行和 logo） */
  title?: string
}>()
</script>

<style lang="scss" scoped>
@use '../assets/styles/variables' as *;

.fullscreen-loading {
  font-size: 0.14rem;
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 半透明遮罩 */
  &__overlay {
    position: absolute;
    inset: 0;
    background: $overlay-bg;
  }

  /* 白色居中卡片 */
  &__card {
    position: relative;
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.7rem 0 0.5rem 0;
    width: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.6rem;
  }

  /* 顶部标题行 */
  &__header {
    position: absolute;
    top: 0.12rem;
    left: 0.2rem;
    //display: flex;
    //align-items: center;
    //gap: 0.08rem;
    margin-bottom: 0.3rem;
  }

  /* logo 图标 */
  &__logo {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
  }

  /* 标题文字 */
  &__title {
    font-size: 0.14rem;
    color: $text-dark;
  }

  /* 中间文案 */
  &__text {
    font-size: 0.2rem;
    font-weight: 600;
    color: $text-dark;
    margin-bottom: 0.28rem;
  }

  /* 旋转圆环 */
  &__spinner {
    width: 0.44rem;
    height: 0.44rem;
    border: 3px solid transparent;
    border-top-color: $accent;
    border-right-color: $accent;
    border-bottom-color: $accent;
    border-radius: 50%;
    animation: fullscreen-loading-spin 1s linear infinite;
  }
}

/* 旋转动画 */
@keyframes fullscreen-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 淡入淡出过渡 */
.fullscreen-loading-fade-enter-active,
.fullscreen-loading-fade-leave-active {
  transition: opacity 0.25s ease;
}
.fullscreen-loading-fade-enter-from,
.fullscreen-loading-fade-leave-to {
  opacity: 0;
}
</style>
