<template>
  <!-- Teleport 保证弹窗挂载到 body，层级最高 -->
  <Teleport to="body">

    <!-- 1. 遮罩层 (增加淡入淡出动画) -->
    <Transition name="fade">
      <div
        v-if="visible"
        class="mask-level-2"
        @click="handleClose"
      ></div>
    </Transition>

    <!-- 2. 弹窗主体 (增加底部滑入动画) -->
    <Transition name="slide-up">
      <div v-if="visible" class="popup-level-2">

        <!-- 把手装饰 -->
        <div class="handle-bar-wrap" @click="handleClose">
          <div class="handle-bar"></div>
        </div>

        <div class="popup-title">交易规则</div>

        <!-- 内容区域 -->
        <div class="rules-content">
          <div class="rule-row border-bottom">
            <span class="label">最小价格波动</span>
            <span class="value">0.01 USDT</span>
          </div>
          <div class="rule-row spacer-bottom">
            <span class="label">价格倍数</span>
            <span class="value">0.2 - 5</span>
          </div>

          <div class="rule-row">
            <span class="label">订单规模</span>
            <span class="value">5 - 9000000 USDT</span>
          </div>
          <div class="rule-row">
            <span class="label">交易数量</span>
            <span class="value">00001 - 9000 BTC</span>
          </div>
          <div class="rule-row">
            <span class="label">最小数量波动</span>
            <span class="value">0.00001 BTC</span>
          </div>
          <div class="rule-row">
            <span class="label">市价单单笔最大数量</span>
            <span class="value">75.45007539 BTC</span>
          </div>
          <div class="rule-row">
            <span class="label">限价单单笔挂单数量</span>
            <span class="value">200</span>
          </div>
          <div class="rule-row">
            <span class="label">最大条件单挂单数量</span>
            <span class="value">5</span>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { watch, onUnmounted } from 'vue';

// 1. 接收 visible 属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

// 2. 定义事件
const emit = defineEmits(['update:visible', 'close']);

// --- 滚动锁定逻辑 (防止背景跟随滚动) ---
const lockScroll = () => {
  document.body.style.overflow = 'hidden';
};
const unlockScroll = () => {
  document.body.style.overflow = '';
};

// 监听 visible 变化
watch(() => props.visible, (val) => {
  if (val) {
    lockScroll();
  } else {
    unlockScroll();
  }
});

// 组件卸载时确保解锁，防止异常情况卡住
onUnmounted(() => {
  unlockScroll();
});

// --- 关闭处理 ---
const handleClose = () => {
  // 通知父组件把 visible 设为 false
  emit('update:visible', false);
  emit('close');
};
</script>

<style scoped>
/* --- 遮罩层样式 --- */
.mask-level-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 你之前的 0.2 透明度 */
  background: rgba(0, 0, 0, 0.2);
  z-index: 2001;
}

/* --- 弹窗主体样式 --- */
.popup-level-2 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  border-radius: 16px 16px 0 0;
  z-index: 2002;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  /* 限制最大高度，防止内容溢出 */
  max-height: 85vh;
  overflow-y: auto;
}

/* --- 内容样式保持不变 --- */
.handle-bar-wrap {
  display: flex; justify-content: center; padding: 10px 0;
}
.handle-bar {
  width: 36px; height: 4px; background: #E0E0E0; border-radius: 2px;
}
.popup-title {
  font-size: 18px; font-weight: bold; color: #333;
  padding: 0 20px 20px 20px;
}
.rules-content { padding: 0 20px; }
.rule-row {
  display: flex; justify-content: space-between;
  margin-bottom: 16px; font-size: 14px;
}
.label { color: #888; }
.value { color: #333; font-weight: 500; text-align: right;}
.border-bottom {
  padding-bottom: 16px; border-bottom: 1px solid #f5f5f5; margin-bottom: 16px;
}
.spacer-bottom { margin-bottom: 30px; }

/* --- Vue Transition 动画 --- */
/* 1. 遮罩层淡入淡出 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 2. 弹窗底部滑入滑出 */
.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-up-enter-from, .slide-up-leave-to {
  transform: translateY(100%);
}
</style>