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

    <transition name="slide-up">
      <div v-if="visible" class="popup-container" :class="directionClass">
        <div class="drag-handle-area"><div class="drag-handle"></div></div>

        <div class="popup-content">
          <div class="header-title">设置止盈止损</div>

          <div class="coin-info">
            <div class="coin-icon">₿</div>
            <span class="coin-name">BTC/USDT</span>
          </div>

          <div class="price-grid">
            <div class="price-item"><div class="label">最新价格</div><div class="value">1000.05 USDT</div></div>
            <div class="price-item center"><div class="label">委托价格</div><div class="value">10</div></div>
            <div class="price-item right"><div class="label">委托数量</div><div class="value">10 BTC</div></div>
          </div>

          <div class="direction-switch">
            <div class="switch-btn buy" :class="{ active: direction === 'buy' }" @click="direction = 'buy'">买入(做多)</div>
            <div class="switch-btn sell" :class="{ active: direction === 'sell' }" @click="direction = 'sell'">卖出(做空)</div>
          </div>

          <div class="section-block">
            <div class="section-header">
              <span class="section-label">止盈</span>
              <label class="checkbox-label">
                <input type="checkbox" v-model="tpLimitMode" />
                <span class="custom-check"></span>
                限价委托
              </label>
            </div>

            <div class="input-row">
              <div class="input-group">
<!--                <div class="prefix-label">触发价</div>-->
                <input
                  type="number"
                  class="flex-input"
                  placeholder="触发价"
                  v-model="tpTriggerPrice"
                />
                <span class="unit-text" @click="showModal1 = true">{{selectedLabel1}}</span>
                <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>
              </div>

              <div class="input-group">
                <div class="suffix-select" @click="showModal = true">
                  <span class="label-text">{{selectedLabel}}</span>
                  <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>
                </div>
                <div class="prefix-label">{{selectedUnit}}</div>
              </div>
            </div>

            <div class="slider-wrapper">
              <div class="slider-inner">
                <div class="slider-track-bg"></div>
                <div class="slider-start-point"></div>
                <div class="slider-track-fill" :style="{ width: (tpPercent / 25 * 100) + '%' }"></div>
                <div class="slider-thumb" :style="{ left: (tpPercent / 25 * 100) + '%' }"></div>
                <input type="range" min="0" max="25" step="1" v-model.number="tpPercent" class="native-range" />
                <div class="slider-ticks">
                  <span v-for="tick in tpTicks" :key="tick" class="tick-label" :class="{ active: tpPercent >= tick }" :style="{ left: (tick / 25 * 100) + '%' }" @click="tpPercent = tick">{{ tick }}%</span>
                </div>
              </div>
            </div>

            <transition name="expand">
              <div v-if="tpLimitMode" class="limit-input-box">
                <div class="input-inner">
                  <input type="number" placeholder="委托价" />
                  <span class="unit">USDT</span></div>
              </div>
            </transition>
          </div>

          <div class="section-block">
            <div class="section-header">
              <span class="section-label">止损</span>
              <label class="checkbox-label">
                <input type="checkbox" v-model="slLimitMode" />
                <span class="custom-check"></span>
                限价委托
              </label>
            </div>

            <div class="input-row">
              <div class="input-group">
<!--                <div class="prefix-label">触发价</div>-->
                <input
                  type="number"
                  class="flex-input"
                  placeholder="触发价"
                  v-model="slTriggerPrice"
                />
                <span class="unit-text">标记</span>
                <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>
              </div>

              <div class="input-group">

                <div class="suffix-select">
                  <span class="label-text">收益率</span>
                  <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>
                </div>
                <div class="prefix-label">%</div>
              </div>
            </div>

            <div class="slider-wrapper">
              <div class="slider-inner">
                <div class="slider-track-bg"></div>
                <div class="slider-start-point"></div>
                <div class="slider-track-fill" :style="{ width: (slPercent / 10 * 100) + '%' }"></div>
                <div class="slider-thumb" :style="{ left: (slPercent / 10 * 100) + '%' }"></div>
                <input type="range" min="0" max="10" step="1" v-model.number="slPercent" class="native-range" />
                <div class="slider-ticks">
                  <span v-for="tick in slTicks" :key="tick" class="tick-label" :class="{ active: slPercent >= tick }" :style="{ left: (tick / 10 * 100) + '%' }" @click="slPercent = tick">{{ tick }}%</span>
                </div>
              </div>
            </div>

            <transition name="expand">
              <div v-if="slLimitMode" class="limit-input-box">
                <div class="input-inner">
                  <input id="1" type="number" placeholder="委托价" />
                  <span class="unit">USDT</span>
                </div>
              </div>
            </transition>
          </div>

          <button class="confirm-btn" @click="confirm">确认</button>
        </div>
      </div>
    </transition>
  </Teleport>
  <div>
    <priceLimit
      v-model:visible="showModal"
      :selected-id="currentId"
      @confirm="handleConfirm"
    >
    </priceLimit>

    <TriggerPrice
       v-model:visible="showModal1"
      :selected-id="currentId1"
      @confirm="handleConfirm1"
    ></TriggerPrice>
  </div>
</template>

<script setup>
import {ref, computed, defineAsyncComponent} from 'vue';
const priceLimit = defineAsyncComponent(() => import("../components/priceLimit.vue"));
const TriggerPrice = defineAsyncComponent(() => import("../components/TriggerPrice.vue"));
    //最新价格
    const showModal1 = ref(false);

    // 定义状态用于存储
    const currentId1 = ref(1); // 默认选中第一个
    const selectedLabel1 = ref('最新'); // 默认值
    const selectedUnit1 = ref('%');      // 默认值

    // 回调函数：子组件选中后触发
    const handleConfirm1 = (item) => {
      console.log('子组件返回的对象:', item);

      // 保存ID用于下次打开时回显高亮
      currentId1.value = item.id;
      // const a = item.label.slice(-2)

      // 核心需求：在这里将值“拆开”为两个字符串
      selectedLabel1.value = item.label.slice(0, 2); // 字符串1: "涨跌幅"
      selectedUnit1.value = item.unit;   // 字符串2: "%"
    };
//张跌幅
const showModal = ref(false);

// 定义状态用于存储
const currentId = ref(1); // 默认选中第一个
const selectedLabel = ref('涨跌幅'); // 默认值
const selectedUnit = ref('%');      // 默认值

// 回调函数：子组件选中后触发
const handleConfirm = (item) => {
  console.log('子组件返回的对象:', item);

  // 保存ID用于下次打开时回显高亮
  currentId.value = item.id;

  // 核心需求：在这里将值“拆开”为两个字符串
  selectedLabel.value = item.label; // 字符串1: "涨跌幅"
  selectedUnit.value = item.unit;   // 字符串2: "%"
};


const props = defineProps({ visible: Boolean });
const emit = defineEmits(['update:visible', 'confirm']);

const direction = ref('buy');

// 止盈数据
const tpLimitMode = ref(false);
const tpTriggerPrice = ref(''); // 新增：止盈触发价输入
const tpPercent = ref(5);
const tpTicks = [0, 5, 10, 15, 20, 25];

// 止损数据
const slLimitMode = ref(true);
const slTriggerPrice = ref(''); // 新增：止损触发价输入
const slPercent = ref(2);
const slTicks = [0, 2, 4, 6, 8, 10];

const directionClass = computed(() => direction.value === 'buy' ? 'theme-buy' : 'theme-sell');
const close = () => emit('update:visible', false);
const confirm = () => {
  emit('confirm', {
    direction: direction.value,
    tp: { price: tpTriggerPrice.value, percent: tpPercent.value },
    sl: { price: slTriggerPrice.value, percent: slPercent.value }
  });
  close();
};
</script>

<style scoped>
    .theme-buy { --primary-color: #2EBD85; }
    .theme-sell { --primary-color: #F6465D; }

    /* 基础布局 */
    .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6); z-index: 2000; }
    .popup-container {
      position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0;
      z-index: 2001; padding-bottom: calc(20px + env(safe-area-inset-bottom));
      font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif; max-height: 90vh;
      overflow-y: auto; color: #333;
    }
    .popup-content { padding: 0 20px; }

    .drag-handle-area { padding: 10px 0; display: flex; justify-content: center; }
    .drag-handle { width: 40px; height: 4px; background: #E0E0E0; border-radius: 2px; }
    .header-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }

    .coin-info { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
    .coin-icon { width: 20px; height: 20px; background: #F7931A; color: #fff; border-radius: 50%;
      text-align: center; line-height: 20px; font-size: 12px; font-weight: bold; }
    .price-grid { display: flex; justify-content: space-between; margin-bottom: 20px; }
    .price-item .label { font-size: 12px; color: #999; }
    .price-item .value { font-size: 14px; font-weight: 500; }

    .direction-switch { display: flex; gap: 10px; margin-bottom: 20px; }
    .switch-btn { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center;
      border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; background: #F7F8FA;
      color: #999; transition: 0.2s; }
    .theme-buy .switch-btn.buy.active { background: var(--primary-color); color: white; }
    .theme-sell .switch-btn.sell.active { background: var(--primary-color); color: white; }

    .section-block { margin-bottom: 25px; }
    .section-header { display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 12px; }
    .section-label { font-size: 15px; font-weight: 600; }
    .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
    .checkbox-label input { display: none; }
    .custom-check { width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 2px;
      position: relative; }
    .checkbox-label input:checked + .custom-check { background: var(--primary-color);
      border-color: var(--primary-color); }
    .checkbox-label input:checked + .custom-check::after { content: ''; position: absolute;
      left: 5px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0;
      transform: rotate(45deg); }

    /* ============ 输入框区域 ============ */
    .input-row { display: flex; gap: 10px; margin-bottom: 15px; }
    .input-group {
      flex: 1; height: 40px; background: #F7F8FA; border-radius: 4px;
      display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
      position: relative;
      font-size: 12px;
    }
    .prefix-label { color: #999; font-size: 12px; white-space: nowrap; margin-right: 8px; }

    /* 新增：flex 输入框样式 */
    .flex-input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-size: 12px;
      font-weight: 500;
      color: #333;
      width: 100%; /* 确保填满剩余空间 */
    }
    .flex-input::placeholder { color: #B0B3B8; font-weight: 400; }
    /* 隐藏 number input 的上下箭头 */
    .flex-input::-webkit-outer-spin-button,
    .flex-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .unit-text { font-size: 12px; color: #333; margin-left: 4px; font-weight: 500; }

    .suffix-select { display: flex; align-items: center;  color: #333; }
    .label-text { font-size: 12px; font-weight: 500; }
    .icon-svg { width: 14px; height: 14px; color: #666; margin-left: 2px; }

    /* ============ 滑块样式 ============ */
    .slider-wrapper { padding: 0 15px; margin-top: 10px; box-sizing: border-box; }
    .slider-inner { position: relative; height: 55px; width: 100%; }

    .slider-track-bg { position: absolute; top: 12px; left: 0; right: 0; height: 6px;
      background: #F0F0F0; border-radius: 3px; }
    .slider-track-fill { position: absolute; top: 12px; left: 0; height: 6px;
      background: var(--primary-color); border-radius: 3px; pointer-events: none; }
    .slider-start-point, .slider-thumb { position: absolute; top: 15px; width: 24px;
      height: 24px; background: #fff; border: 2px solid var(--primary-color); border-radius: 50%;
      transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.15); box-sizing: border-box; }
    .slider-start-point { left: 0; z-index: 1; }
    .slider-thumb { z-index: 2; pointer-events: none; }
    .native-range { position: absolute; top: 0; left: 0; width: 100%; height: 40px;
      opacity: 0; cursor: pointer; margin: 0; z-index: 3; -webkit-tap-highlight-color: transparent; }

    .slider-ticks { position: absolute; top: 32px; left: 0; right: 0; height: 20px; }
    .tick-label { position: absolute; transform: translateX(-50%); font-size: 12px;
      color: #B0B3B8; cursor: pointer; white-space: nowrap; }
    .tick-label.active { color: #333; font-weight: 500; }

    .limit-input-box { overflow: hidden; margin-top: 8px; }
    .input-inner { background: #F7F8FA; height: 44px; border-radius: 4px; display: flex;
      align-items: center; padding: 0 12px; }
    .input-inner .label { color: #999; font-size: 13px; margin-right: 10px; }
    .input-inner input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; }
    .input-inner .unit { color: #333; font-size: 13px; font-weight: 500; }

    .expand-enter-active, .expand-leave-active { transition: all 0.3s ease-in-out; max-height: 60px;
      opacity: 1; }
    .expand-enter-from, .expand-leave-to { max-height: 0; opacity: 0; margin-top: 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%); }
    .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
    .fade-enter-from, .fade-leave-to { opacity: 0; }

    .confirm-btn { width: 100%; height: 48px; margin-top: 10px;
      background: var(--primary-color); color: white; border: none; border-radius: 24px;
      font-size: 16px; font-weight: 600; }
</style>