<template>
  <Teleport to="body">
    <transition name="fade">
      <div v-if="visible" class="modal-mask" @click="closeModal"></div>
    </transition>

    <transition name="slide-up">
      <div v-if="visible" class="modal-panel">
        <div class="panel-handle-wrap">
          <div class="panel-handle"></div>
        </div>

        <div class="panel-content">
          <div class="section">
            <h3 class="section-title">逐仓模式</h3>
            <p class="section-text">
              根据用户操作一定数量保证金被分配到仓位上，如果仓位亏损到低于维持保证金的水平，仓位将被强平。在逐仓模式下，用户可以自行追加保证金
            </p>
          </div>

          <div class="section">
            <h3 class="section-title">全仓模式</h3>
            <p class="section-text">
              仓位保证金将共享全部同币种账户资产，如果仓位亏损低于一定比例，全仓系统将自动追加可用保证金。在强平事件中，交易者可能会损失全部保证金和账户资产
            </p>
          </div>
        </div>

        <div class="panel-footer">
          <button class="confirm-btn" @click="closeModal">
            我知道了
          </button>
        </div>

        <div class="safe-area-bottom"></div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

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

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

// 关闭弹窗的方法
const closeModal = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
/* 遮罩层 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* 稍微深一点的遮罩，突出文字 */
  z-index: 2000;
}

/* 弹窗主体 */
.modal-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100%;
  max-width: 600px; /* PC端限制最大宽度 */
  background: white;
  border-radius: 16px 16px 0 0;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 顶部 Handle 区域 */
.panel-handle-wrap {
  padding: 12px 0 20px 0;
  display: flex;
  justify-content: center;
}
.panel-handle {
  width: 36px;
  height: 4px;
  background: #E0E0E0;
  border-radius: 2px;
}

/* 内容区域 */
.panel-content {
  padding: 0 20px;
  /* 防止内容过多导致无法显示，增加滚动 */
  max-height: 60vh;
  overflow-y: auto;
}

.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.section-text {
  font-size: 14px;
  color: #444; /* 设计稿文字看起来比纯黑淡一点 */
  line-height: 1.6; /* 增加行高，提升阅读体验 */
  margin: 0;
  text-align: justify; /* 两端对齐，让大段文字更整齐 */
}

/* 底部按钮区域 */
.panel-footer {
  padding: 20px 20px 10px 20px;
}

.confirm-btn {
  width: 100%;
  height: 48px;
  background: #DC3E48; /* 提取的红色 hex */
  color: white;
  border: none;
  border-radius: 24px; /* 圆角按钮 */
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  /* 点击时的按压效果 */
  transition: opacity 0.2s;
}
.confirm-btn:active {
  opacity: 0.9;
}

/* 底部安全区 */
.safe-area-bottom {
  height: env(safe-area-inset-bottom, 20px);
}

/* 动画定义 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide-up-enter-from, .slide-up-leave-to {
  transform: translate(-50%, 100%);
}
</style>