<template>
  <Teleport to="body">
    <transition name="fade">
      <div v-if="visible" class="mask" @click="handleClose"></div>
    </transition>
    <transition name="slide-up">
      <div v-if="visible" class="popup-container">
        <div class="drag-handle-area"><div class="drag-handle"></div></div>

        <div class="popup-content">
          <h3 class="main-title">下单确认</h3>

          <div class="token-header">
            <div class="token-icon">
              <span class="btc-symbol">₿</span>
            </div>
            <div class="token-info">
              <div class="token-name">
                BTC/USDT 永续
              </div>
              <div class="tags">
                <span class="tag buy">买入</span>
                <span class="tag leverage">逐仓 20X</span>
              </div>
            </div>
          </div>

          <div class="info-list">
            <div class="info-row">
              <span class="label">委托价格</span>
              <span class="value">1000.05 USDT</span>
            </div>
            <div class="info-row">
              <span class="label">数量</span>
              <span class="value">10</span>
            </div>
            <div class="info-row">
              <span class="label">金额</span>
              <span class="value">0.30 USDT</span>
            </div>
            <div class="info-row">
              <span class="label">类型</span>
              <span class="value">限价</span>
            </div>
            <div class="info-row">
              <span class="label">只减仓</span>
              <span class="value">否</span>
            </div>
          </div>

          <div class="tpsl-header" @click="toggleTpSl">
            <span class="tpsl-title">止盈止损</span>
            <span class="arrow" :class="{ expanded: isTpSlExpanded }">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </div>

          <div
            class="tpsl-content-wrapper"
            :class="{ show: isTpSlExpanded }"
            ref="contentRef"
            :style="contentStyle"
          >
            <div class="tpsl-inner">
              <div class="strategy-block">
                <div class="block-header">
                  <span class="sub-title">止盈</span>
                  <div class="right-action">
                    <div>标记</div>
                    <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </div>
                </div>
                <div class="input-grid">
                  <div class="input-box">
                    <input type="number" placeholder="触发价(USDT)" />
                  </div>
                  <div class="input-box has-suffix">
                    <input type="number" placeholder="盈亏" />
                    <div class="suffix-select">USDT
                       <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                  </div>
                  <div class="input-box">
                    <input type="number" placeholder="限价单(USDT)" />
                  </div>
                  <div class="toggle-btn">
                    市价单
                  </div>
                </div>
              </div>

              <div class="strategy-block mt-15">
                <div class="block-header">
                  <span class="sub-title">止损</span>
                  <div class="right-action">最新
                     <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </div>
                </div>

                <div class="input-grid">
                  <div class="input-box">
                    <input type="number" placeholder="触发价(USDT)" />
                  </div>
                  <div class="input-box has-suffix">
                    <input type="number" placeholder="盈亏" />
                    <div class="suffix-select">USDT
                       <svg width="14" height="14" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="3">
                    <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                  </div>
                  <div class="toggle-btn outline">
                    市价
                  </div>
                  <div class="toggle-btn active-red">
                    市价单
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button class="confirm-btn" @click="handleConfirm">
            确认
          </button>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

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

const props = defineProps({
  visible: Boolean
});

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

// 折叠状态控制
const isTpSlExpanded = ref(false);

const toggleTpSl = () => {
  isTpSlExpanded.value = !isTpSlExpanded.value;
};

// 计算高度用于 CSS transition (为了丝滑动画)
// 实际项目中简单使用 v-if 也可以，但 height transition 体验更好
const contentStyle = computed(() => {
  return isTpSlExpanded.value
    ? { maxHeight: '500px', opacity: 1, marginTop: '10px' }
    : { maxHeight: '0px', opacity: 0, marginTop: '0px' };
});

const handleClose = () => {
  emit('update:visible', false);
};

const handleConfirm = () => {
  // 收集数据逻辑...
  emit('confirm');
  handleClose();
};
</script>

<style lang="less" scoped>
    /* 基础动画 */
    .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 cubic-bezier(0.25, 0.8, 0.5, 1); }
    .slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }

    /* 布局样式 */
    .mask {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6); z-index: 1999;
    }
    .popup-container {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: #fff; border-radius: 16px 16px 0 0;
      z-index: 2000; padding-bottom: calc(20px + env(safe-area-inset-bottom));
      font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
      max-height: 90vh; overflow-y: auto; /* 允许小屏滚动 */
    }

    /* 拖拽条 */
    .drag-handle-area { padding: 10px 0; display: flex; justify-content: center; }
    .drag-handle { width: 40px; height: 4px; background: #E0E0E0; border-radius: 2px; }

    .popup-content { padding: 0 20px; }
    .main-title { font-size: 18px; font-weight: 600; margin: 0 0 10px 0; color: #333; }

    /* 币种信息 */
    .token-header { display: flex; align-items: center; margin-bottom: 10px; }
    .token-icon {
      width: 32px; height: 32px; background: #F7931A; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; margin-right: 10px;
    }
    .btc-symbol { color: white; font-weight: bold; font-size: 20px; }
    .token-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 4px; }
    .tags { display: flex; gap: 5px; }
    .tag { font-size: 10px; padding: 1px 4px; border-radius: 2px; }
    .tag.buy { background: #2EBD85; color: white; }
    .tag.leverage { background: #EFF0F2; color: #999; }

    /* 信息列表 */
    .info-row { display: flex; justify-content: space-between; margin-bottom: 12px;
      font-size: 14px; }
    .info-row .label { color: #999; }
    .info-row .value { color: #333; font-weight: 500; }

    /* 止盈止损标题栏 */
    .tpsl-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0; border-top: 1px solid #F5F5F5; cursor: pointer;
    }
    .tpsl-title { font-weight: 600; font-size: 15px; color: #333; text-underline-offset: 4px;
      text-decoration-color: #333; }
    .arrow { transition: transform 0.3s; color: #333; display: flex; }
    .arrow.expanded { transform: rotate(180deg); }

    /* 止盈止损 内容折叠区 */
    .tpsl-content-wrapper {
      overflow: hidden;
      transition: max-height 0.3s ease-in-out, opacity 0.3s, margin-top 0.3s;
    }
    .strategy-block { margin-bottom: 10px; }
    .mt-15 { margin-top: 15px; }
    .block-header { display: flex; justify-content: space-between; margin-bottom: 8px;
      font-size: 13px; }
    .sub-title { font-weight: 600; color: #333; }
    .right-action { color: #333; display: flex; align-items: center; gap: 2px;
      svg{
        //display: block;
        margin-top: 3px;
        //text-align: center;
      }
    }
    .tiny-arrow { font-size: 8px; color: #999; }

    /* 输入框网格 (2列) */
    .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    .input-box {
      background: #F7F8FA; border-radius: 4px; height: 38px;
      display: flex; align-items: center; padding: 0 10px;
      position: relative;
    }
    .input-box input {
      width: 100%; background: transparent; border: none; outline: none;
      font-size: 13px; color: #333;
    }
    .input-box input::placeholder { color: #B0B3B8; }

    .input-box.has-suffix input { padding-right: 50px; }
    .suffix-select {
      position: absolute; right: 10px; top: 0; bottom: 0;
      display: flex; align-items: center; font-size: 12px; color: #333; font-weight: 500;
      svg{
        margin-top: 3px;
      }
    }

    /* 按钮样式 */
    .toggle-btn {
      height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
      font-size: 13px; cursor: pointer; border: 1px solid #E0E0E0; background: #fff; color: #666;
    }
    .toggle-btn.outline { border-color: #666; color: #333; }
    .toggle-btn.active-red { background: #E54755; border-color: #E54755; color: white; }

    /* 确认按钮 */
    .confirm-btn {
      width: 100%; height: 48px; background: #E54755;
      color: white; font-size: 16px; border: none; border-radius: 24px;
      margin-top: 10px; font-weight: bold;
    }
    .confirm-btn:active { background: #D13E4A; }
</style>