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

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

        <div class="header-section">
          <div class="coin-icon">
            <img src="../../../assets/icon/bitcoin/bt.svg" alt="">
<!--            <svg viewBox="0 0 64 64" width="100%" height="100%">-->
<!--              <circle cx="32" cy="32" r="32" fill="#F7931A"/>-->
<!--              <path d="M44.08 25.6c-0.4-2.69-1.65-4.12-4.46-5.09l0.91-3.66-2.23-0.56-0.89 3.56c-0.59-0.15-1.21-0.29-1.83-0.43l0.9-3.62-2.23-0.56-0.91 3.65c-0.48-0.11-0.98-0.22-1.46-0.33L28.7 18l-4.3 1.08s1.2 0.28 1.17 0.29c0.65 0.16 0.77 0.6 0.75 0.94l-0.75 3.02c0.05 0.01 0.1 0.03 0.17 0.05-0.05-0.01-0.11-0.03-0.17-0.04l-1.06 4.24c-0.08 0.2-0.28 0.8-0.73 0.69 0.01 0.02-1.17-0.29-1.17-0.29l-2.3 5.3 4.06 1.01c0.55 0.14 1.09 0.28 1.64 0.41l-0.92 3.69 2.23 0.56 0.91-3.66c0.61 0.16 1.2 0.31 1.8 0.45l-0.91 3.63 2.23 0.56 0.92-3.67c3.8 0.72 6.65 0.43 7.85-3 0.96-2.76-0.05-4.35-2.04-5.39 1.45-0.33 2.54-1.29 2.83-3.26zM38.2 36.2c-0.63 2.53-4.88 1.16-6.26 0.82l1.12-4.48c1.38 0.34 5.82 1.02 5.14 3.66zm0.67-8.93c-0.57 2.3-4.2 1.13-5.37 0.84l1.01-4.06c1.17 0.29 4.94 0.83 4.36 3.22z" fill="white"/>-->
<!--            </svg>-->
          </div>
          <div class="title-col">
            <div class="main-title">BTC/USDT 永续</div>
            <div class="tags-row">
              <span class="tag tag-buy">买入</span>
              <span class="tag tag-mode">逐仓 20X</span>
            </div>
          </div>
        </div>

        <div class="price-row">
          <span class="label">开仓价格</span><span class="value">1000.05 USDT</span>
        </div>
        <div class="price-row">
          <span class="label">标记价格</span><span class="value">1000.05 USDT</span>
        </div>

        <div class="form-area">
          <div class="input-box">
            <span class="input-label">委托类型</span>
            <div class="input-value-wrap">
              <span>市价</span>
              <svg viewBox="0 0 1024 1024" width="10" height="10"><path d="M512 714.667l-298.667-298.667h597.334l-298.667 298.667z" fill="#666"/></svg>
            </div>
          </div>
          <div class="input-box"><span class="input-text-val">市价</span></div>
          <div class="input-box">
            <span class="input-label">数量</span><span class="input-suffix">BTC</span>
          </div>
        </div>

        <div class="slider-section">
          <div class="slider-header">可平 0.2562 BTC</div>

          <div class="dumbbell-slider-wrap">
            <input
              type="range"
              min="0"
              max="100"
              step="25"
              v-model="percent"
              class="dumbbell-slider"
              :style="sliderTrackStyle"
            />
          </div>

          <div class="percent-labels">
            <span @click="percent=0">0%</span>
            <span @click="percent=25">25%</span>
            <span @click="percent=50">50%</span>
            <span @click="percent=75">75%</span>
            <span @click="percent=100">100%</span>
          </div>
        </div>

        <div class="footer-section">
          <div class="pnl-row">
            <span>预计盈亏</span><span class="pnl-val">+0.30 USDT</span>
          </div>
          <button class="action-btn" @click="showModal4=true">平空</button>
        </div>
        <div class="safe-area"></div>
      </div>
    </transition>
  </Teleport>

  <div>
    <ConfirmPing
        v-model:visible="showModal4"
    ></ConfirmPing>
  </div>
</template>

<script setup>
import {ref, computed, defineProps, defineEmits, defineAsyncComponent} from 'vue';
const ConfirmPing = defineAsyncComponent(() => import("../StatusComponent/ConfirmPing.vue"));


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

const percent = ref(0); // 默认从0开始

// 计算滑块轨道背景样式，实现红/灰填充
const sliderTrackStyle = computed(() => {
  return {
    // 红色填充部分 + 灰色未填充部分
    background: `linear-gradient(to right,
                 #E04747 ${percent.value}%,
                 #F2F3F5 ${percent.value}%)`
  };
});

const close = () => emit('update:visible', false);
//确认平仓
const showModal4 = ref(false);
</script>

<style scoped lang="less">
/* 全局变量 */
:root { --red: #E04747; --green: #2EBD85; }

/* 弹窗基础结构 (不变) */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
.modal-panel { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff;
  border-radius: 16px 16px 0 0; z-index: 999; font-family: sans-serif; }
.handle-wrap { padding: 8px 0; display: flex; justify-content: center; }
.handle { width: 36px; height: 4px; background: #E5E6EB; border-radius: 2px; }

/* 头部样式 (不变) */
.header-section { padding: 4px 20px 16px 20px; display: flex; align-items: center; gap: 12px; }
.coin-icon { width: 40px; height: 40px; flex-shrink: 0; }
.title-col { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.main-title { font-size: 17px; font-weight: 600; color: #1F2124; line-height: 1.2; }
.tags-row { display: flex; gap: 6px; }
.tag { font-size: 11px; padding: 1px 5px; border-radius: 3px; transform: scale(0.95);
  transform-origin: left center; }
.tag-buy { background: #2EBD85; color: white; }
.tag-mode { background: #B0B5BC; color: white; }

/* 价格行 & 表单 (不变) */
.price-row { display: flex; justify-content: space-between; padding: 2px 20px;
  font-size: 13px; color: #86909C; }
.price-row .value { color: #1F2124; font-weight: 500; }
.form-area { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.input-box { background: #F7F8FA; height: 40px; border-radius: 4px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #1F2124; }
.input-label { color: #86909C; }
.input-value-wrap { display: flex; align-items: center; gap: 4px; }
.input-suffix { color: #1F2124; }

/* --- 滑块样式修正 (重点) --- */
.slider-section { padding: 0 20px 0 20px; }
.slider-header { font-size: 12px; color: #5E6673; margin-bottom: 16px; }

.dumbbell-slider-wrap {
  position: relative;
  height: 24px; /* 高度与滑块Thumb一致 */
  display: flex;
  align-items: center;
}

/* 核心：input[type="range"] 样式调整 */
.dumbbell-slider {
  -webkit-appearance: none;
  appearance: none; /* 兼容性 */
  width: 100%;
  height: 8px; /* 轨道粗细 */
  border-radius: 4px;
  outline: none;
  margin: 0;
  cursor: pointer;
  z-index: 2; /* 确保在其他伪元素之上 */
  position: relative;
  /* 轨道背景由 js 动态计算 */
}

/* 轨道左侧填充（红色）和右侧未填充（灰色） */
/* 通过背景渐变控制，由 `sliderTrackStyle` 绑定 */
.dumbbell-slider::-webkit-slider-runnable-track {
  background: transparent; /* 真正的轨道背景由input本身的背景负责 */
  border-radius: 4px;
  height: 8px;
}
.dumbbell-slider::-moz-range-track {
  background: transparent;
  border-radius: 4px;
  height: 8px;
}

/* 滑块拖动钮 (Thumb) */
.dumbbell-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 24px; /* 直径 */
  width: 24px; /* 直径 */
  border-radius: 50%;
  background: #ffffff; /* 白底 */
  //border: 2px solid var(--red); /* 红色边框 */
  border: 2px solid #E04747;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  margin-top: -8px; /* 垂直居中轨道 */
  position: relative;
  z-index: 3; /* 确保在最高层 */
}
.dumbbell-slider::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--red);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 3;
}

/* 固定在 0% 位置的圆圈 (通过伪元素实现) */
.dumbbell-slider::before {
  content: '';
  position: absolute;
  left: 0; /* 微调使其完全贴合 */
  top: 50%;
  transform: translateY(-50%);
  height: 18px; /* 直径 */
  width: 18px; /* 直径 */
  border-radius: 50%;
  background: #ffffff; /* 白底 */
  //border: 2px solid var(--red); /* 红色边框 */
  border: 2px solid red;

  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 1; /* 在轨道之下，但又在滑块thumb之下 */
  pointer-events: none; /* 不会影响滑块拖动 */
}


.percent-labels { display: flex; justify-content: space-between; margin-top: 12px;
  font-size: 12px; color: #86909C; }

/* 底部 (不变) */
.footer-section { padding: 20px; }
.pnl-row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 14px; }
.pnl-val { color: #2EBD85; font-weight: 500; }
.action-btn { width: 100%; height: 44px; background: #2EBD85;
  border-radius: 22px; border: none; color: white; font-size: 16px; font-weight: 600; }
.safe-area { height: env(safe-area-inset-bottom); }

/* 动画 (不变) */
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
</style>