<template>
  <div class="trade-container">
    <div class="trade-tabs">
      <span
        class="tab"
        :class="{ active: tradeType === 'market' }"
        @click="tradeType = 'market'"
      >
        市价
      </span>
      <span
        class="tab"
        :class="{ active: tradeType === 'plan' }"
        @click="tradeType = 'plan'"
      >
        计划
      </span>
    </div>

    <div v-if="tradeType === 'plan'" class="plan-price-input">
      <input type="number" placeholder="请输入价格" />
    </div>

    <div class="section-container" :class="{ 'mt-20': tradeType === 'plan' }">
      <div class="section-label" v-if="tradeType === 'market'">杠杆倍数</div>
      <div class="grid-row">
        <div
          v-for="lev in leverages"
          :key="lev"
          class="tag-btn"
          :class="{ active: currentLeverage === lev }"
          @click="selectLeverage(lev)"
        >
          {{ lev }}X
        </div>

        <div class="tag-btn" @click="openLeverageModal">更多</div>
      </div>
    </div>

    <div class="input-group" :class="{ focused: isInputFocused }">
      <span class="prefix">本金</span>
      <input
        type="number"
        placeholder="1000"
        v-model="amount"
        @focus="isInputFocused = true"
        @blur="isInputFocused = false"
      />
      <span class="suffix">USDT</span>
    </div>

    <div class="grid-row mt-10">
      <div
        v-for="amt in quickAmounts"
        :key="amt"
        class="tag-btn light"
        :class="{ active: Number(amount) === amt }"
        @click="amount = amt"
      >
        {{ amt }}
      </div>
      <div class="tag-btn light" @click="showModal=true">更多</div>
    </div>

    <div class="balance-row">
      可用 215.0508 USDT <span class="wallet-icon"><img src="@/assets/icon/bitcoin/qianbao1.svg" alt=""></span>
    </div>

    <div class="action-buttons">
      <button class="btn-long">
        <div class="main-text">买入(做多)</div>
        <div class="sub-text">预计开仓 0.008 BTC</div>
      </button>
      <button class="btn-short">
        <div class="main-text">卖出(做空)</div>
        <div class="sub-text">预计开仓 0.008 BTC</div>
      </button>
    </div>

    <div >
      <assetlessState v-if="isassetlessState"></assetlessState>
    </div>

<!--    <div v-if="showModal" class="modal-mask" @click="showModal = false">-->
<!--      <div class="modal-content" @click.stop>-->
<!--        <div class="drag-handle"></div>-->
<!--        <h3 class="modal-title">调整保证金</h3>-->

<!--        <div class="stepper-box">-->
<!--          <button class="step-btn" @click="adjustIndex(-1)">—</button>-->
<!--          <div class="step-value">{{ leverageMarks[sliderIndex] }}x</div>-->
<!--          <button class="step-btn" @click="adjustIndex(1)">+</button>-->
<!--        </div>-->

<!--        <div class="slider-container">-->
<!--          <div class="start-marker"></div>-->

<!--          <input-->
<!--            type="range"-->
<!--            min="0"-->
<!--            :max="leverageMarks.length - 1"-->
<!--            step="1"-->
<!--            v-model="sliderIndex"-->
<!--            class="custom-range"-->
<!--            :style="sliderStyle"-->
<!--          />-->

<!--          <div class="slider-marks">-->
<!--            <span-->
<!--              v-for="(mark, index) in leverageMarks"-->
<!--              :key="mark"-->
<!--              :class="{ active: index === Number(sliderIndex) }"-->
<!--            >-->
<!--              {{ mark }}-->
<!--            </span>-->
<!--          </div>-->
<!--        </div>-->

<!--        <button class="confirm-btn" @click="confirmLeverage">确认</button>-->
<!--      </div>-->
<!--    </div>-->
    <tangb v-model:visible="showModal"></tangb>
  </div>
</template>

<script setup>
import {ref, computed, defineAsyncComponent} from 'vue'
const tangb = defineAsyncComponent(() => import("@/views/bitcoin/lever/components/tangb.vue"));

const assetlessState = defineAsyncComponent(() => import("@/views/bitcoin/components/assetlessState.vue"));


// --- 状态管理 ---
const tradeType = ref('market')
const currentLeverage = ref(50) // 当前实际生效的杠杆
const amount = ref('')
const isInputFocused = ref(false)
const showModal = ref(false)

// 首页显示的固定选项
const leverages = [20, 50, 100, 1000]
// 快捷金额
const quickAmounts = [50, 100, 500, 1000]

// 🔥🔥 修改点3：弹窗内的固定阶梯数组 (1, 50, 100, 500, 1000)
const leverageMarks = [1, 50, 100, 500, 1000]

// 弹窗内的滑块索引 (0 ~ 4)
const sliderIndex = ref(0)

// --- 方法 ---

// 1. 直接选择杠杆 (不弹窗)
const selectLeverage = (val) => {
  currentLeverage.value = val
}

// 2. 打开更多弹窗
const openLeverageModal = () => {
  // 尝试在阶梯数组中找到当前杠杆的位置
  const idx = leverageMarks.indexOf(currentLeverage.value)

  // 如果当前杠杆(比如20x)不在弹窗数组里，默认让滑块停在第1个(索引0，即1x)或者第2个
  // 这里逻辑设定为：如果找不到，就默认归零
  sliderIndex.value = idx !== -1 ? idx : 0

  showModal.value = true
}

// 步进器调整
const adjustIndex = (delta) => {
  let newIndex = Number(sliderIndex.value) + delta
  if (newIndex < 0) newIndex = 0
  if (newIndex > leverageMarks.length - 1) newIndex = leverageMarks.length - 1
  sliderIndex.value = newIndex
}

// 确认选择
const confirmLeverage = () => {
  currentLeverage.value = leverageMarks[sliderIndex.value]
  showModal.value = false
}

// 进度条背景颜色计算
const sliderStyle = computed(() => {
  const maxIndex = leverageMarks.length - 1
  const val = Number(sliderIndex.value)
  const percentage = (val / maxIndex) * 100
  return {
    background: `linear-gradient(to right, #F6465D 0%, #F6465D ${percentage}%, #F2F4F6 ${percentage}%, #F2F4F6 100%)`
  }
})
</script>

<style scoped>
/* 样式部分保持不变，直接复用之前的 CSS 即可 */
/* 全局容器配置 */
.trade-container {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif;
  color: #333;
  background-color: #fff;
  position: relative;
}

/* Tabs */
.trade-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.tab {
  font-size: 16px;
  color: #999;
  font-weight: 500;
  cursor: pointer;
  padding-bottom: 4px;
  transition: all 0.2s;
}
.tab.active {
  color: #111;
  font-weight: 600;
}

/* 计划委托输入框 */
.plan-price-input {
  width: 100%;
  height: 44px;
  background-color: #F7F8FA;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.plan-price-input input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #333;
}

/* 间距与布局 */
.mt-20 { margin-top: 12px; }
.mt-10 { margin-top: 10px; }
.section-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.grid-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

/* 按钮样式 */
.tag-btn {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F7F8FA;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.tag-btn.active {
  background-color: #F6465D !important;
  color: #fff !important;
  font-weight: 500;
}
.tag-btn.light {
  background-color: #F7F8FA;
  color: #333;
}

/* 输入框组 */
.input-group {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #F7F8FA;
  border-radius: 4px;
  padding: 0 12px;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.input-group.focused {
  background-color: #fff;
  border-color: #2979FF;
  box-shadow: 0 0 0 1px rgba(41, 121, 255, 0.1);
}
.prefix, .suffix { font-size: 14px; color: #111; font-weight: 500; }
.suffix { font-size: 12px; }
.input-group input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  text-align: right;
  padding: 0 10px;
  font-size: 14px;
  color: #333;
}

/* 余额与操作按钮 */
.balance-row {
  margin-top: 15px;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
}
.wallet-icon { margin-left: 4px; color: #F6465D; }

.action-buttons { display: flex; gap: 12px; margin-top: 15px; }
.btn-long, .btn-short {
  flex: 1;
  border: none;
  height: 60px;
  border-radius: 6px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-long { background-color: #2EBD85; }
.btn-short { background-color: #F6465D; }
.main-text { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.sub-text { font-size: 10px; opacity: 0.9; font-weight: 400; }

/* Modal 弹窗 */
/*.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1009;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.modal-content {
  background-color: #fff;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  padding: 10px 20px 30px;
  box-sizing: border-box;
  animation: slideUp 0.3s ease-out;
}*/
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/*.drag-handle {
  width: 40px;
  height: 4px;
  background-color: #E0E0E0;
  border-radius: 2px;
  margin: 0 auto 15px;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

!* 步进器 *!
.stepper-box {
  display: flex;
  align-items: center;
  background-color: #F7F8FA;
  border-radius: 8px;
  height: 48px;
  margin-bottom: 30px;
}
.step-btn {
  width: 60px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}
.step-value {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

!* Slider 容器与样式 *!
.slider-container {
  position: relative;
  !* 这里的 margin-bottom 要足够大，给绝对定位的文字留出空间 *!
  margin-bottom: 50px;
  padding: 0 12px;
  height: 24px; !* 固定高度，等于滑块高度 *!
  display: flex;
  align-items: center; !* 保持滑块和圆圈垂直居中 *!
}*/

/* 起始点的固定圆圈 */
/*
.start-marker {
 position: absolute;
  left: 12px; !* 这个值要和 slider-container 的 padding-left 一致，或者根据 input 的 margin 调整 *!

  !* 🔥🔥 修改点：垂直居中 🔥🔥 *!
  top: 50%;
  transform: translateY(-50%);

  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid #F6465D;
  border-radius: 50%;
  z-index: 10;
  box-sizing: border-box;
  pointer-events: none; !* 防止它挡住 input 的点击 *!
}
*/

/*.custom-range {
   -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  position: relative;
  z-index: 2;
  background: transparent;
  margin: 0; !* 去掉默认 margin *!
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #F6465D;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin-top: -1px;
  box-sizing: border-box;
}*/

/* 刻度文字 */
/*.slider-marks {
  position: absolute;
  !* 让文字跑到容器底部下方 *!
  top: 30px;
  left: 0;
  width: 100%;
  !* 这里的 padding 必须和 container 一致，保证文字和滑块两端对齐 *!
  padding: 0 12px;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}*/
.slider-marks span.active {
  color: #333;
  font-weight: 600;
}

/*.confirm-btn {
  width: 100%;
  height: 48px;
  background-color: #F6465D;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}*/
</style>