<template>
  <Teleport to="body">
    <!-- 1. 遮罩层 (点击关闭) -->
    <transition name="fade">
      <div
        class="modal-mask"
        v-if="visible"
        @click="close"
      ></div>
    </transition>

    <!-- 2. 弹窗面板 (底部滑出) -->
    <transition name="slide-up">
      <div class="modal-panel" v-if="visible">
        <!-- 顶部小灰条 (Handle) -->
        <div class="panel-handle-bar"></div>

        <!-- 内容区域 (可滚动) -->
        <div class="panel-content">
          <div class="info-item" v-for="(item, index) in infoList" :key="index">
            <h3 class="item-title">{{ item.title }}</h3>
            <p class="item-desc">{{ item.desc }}</p>
            <p v-if="item.subDesc" class="item-desc">{{ item.subDesc }}</p>
          </div>
        </div>

        <!-- 底部安全区 (适配 iPhone X 等) -->
        <div class="safe-area-bottom"></div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';

// 接收父组件传来的 visible 状态
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible']);

// 关闭弹窗
const close = () => {
  emit('update:visible', false);
};

// 静态文案数据 (完全还原截图)
const infoList = [
  {
    title: '账户总权益',
    desc: '期权账户名目资产总额。',
    subDesc: '账户总权益=保证金余额+期权市值'
  },
  {
    title: '每日盈亏',
    desc: '每日盈亏=日终账户总权益-初始账户总权益-每日' // 截图文字似乎截断了，这里照抄
  },
  {
    title: '累计盈亏',
    desc: '累计盈亏=期间每日盈亏加总'
  },
  {
    title: '累计盈亏率%',
    desc: '累计盈亏率=累计盈亏/期间保证金余额',
    subDesc: '期间保证金余额=初始保证金余额+期间累计转入金'
  },
  {
    title: '净划入',
    desc: '每日净划转=总划入-总划出'
  }
];
</script>

<style scoped>
/* --- 遮罩层样式 --- */
.modal-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* 半透明黑底 */
  z-index: 998;
}

/* --- 面板样式 --- */
.modal-panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 999;
  border-radius: 16px 16px 0 0; /* 顶部圆角 */
  max-height: 80vh; /* 最大高度占屏幕80% */
  display: flex; flex-direction: column;
}

/* 顶部灰色小把手 */
.panel-handle-bar {
  width: 36px; height: 4px;
  background: #E0E0E0;
  border-radius: 2px;
  margin: 10px auto; /* 居中 */
  flex-shrink: 0;
}

/* 内容区 */
.panel-content {
  padding: 10px 20px 30px;
  overflow-y: auto; /* 内容过长可滚动 */
}

.info-item {
  margin-bottom: 24px;
}
.item-title {
  font-size: 16px; font-weight: 600; color: #333;
  margin-bottom: 8px;
}
.item-desc {
  font-size: 14px; color: #666; line-height: 1.5;
  margin-bottom: 4px; text-align: justify;
}

/* 底部安全区 */
.safe-area-bottom {
  height: env(safe-area-inset-bottom);
  flex-shrink: 0;
}

/* --- 动画效果 --- */
/* 遮罩渐隐渐现 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* 面板从底部滑出 */
.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s ease-out; }
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
</style>