<template>
  <div class="trade-panel">
    <h3 class="section-title">选择周期</h3>

    <div class="cycle-grid">
      <div
        v-for="(item, index) in cycles"
        :key="index"
        class="cycle-card"
        :class="{ active: selectedCycleIndex === index }"
        @click="selectedCycleIndex = index"
      >
        <div class="card-inner">
          <div class="time">{{ item.time }}</div>
          <div class="rate">{{ item.rate }}</div>
        </div>
      </div>
    </div>

    <div class="amount-input-box">
      <span class="label">数量</span>
      <div class="input-wrapper">
        <input
          type="number"
          v-model="amount"
          placeholder="请输入数量"
        />
        <span class="unit">USDT</span>
      </div>
    </div>

    <div class="quick-amount-grid">
      <div
        v-for="val in quickAmounts"
        :key="val"
        class="amount-btn"
        :class="{ active: Number(amount) === val }"
        @click="amount = val"
      >
        {{ val }}
      </div>
    </div>

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

    <button class="buy-btn" @click="handleBuy">
      购买
    </button>
  </div>
</template>

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

// --- 数据配置 ---
const selectedCycleIndex = ref(0)
const amount = ref(1000) // 默认金额

const cycles = [
  { time: '20秒', rate: '12%' },
  { time: '180秒', rate: '20%' },
  { time: '360秒', rate: '30%' },
  { time: '900秒', rate: '40%' },
  { time: '1800秒', rate: '60%' },
  { time: '3600秒', rate: '90%' },
]

const quickAmounts = [50, 100, 500, 1000, 10000, 50000, 100000]

// --- 方法 ---
const handleBuy = () => {
  const cycle = cycles[selectedCycleIndex.value]
  console.log(`下单: 周期=${cycle.time}, 金额=${amount.value}`)
}
</script>

<style scoped>
/* 基础容器配置 */
.trade-panel {
  width: 100%;
  max-width: 375px; /* 设计稿宽度 */
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  color: #333;

}

/* 1. 标题 */
.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #333;
}

/* 2. 周期选择网格 */
.cycle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
  gap: 8px;
  margin-bottom: 20px;
}

.cycle-card {
  /* 基础样式 (未选中) */
  background-color: #F7F8FA;
  border-radius: 6px;
  overflow: hidden; /* 确保圆角生效 */
  cursor: pointer;
  text-align: center;
  height: 64px;
  display: flex;
  flex-direction: column;
  /* 预留边框位置，防止选中时跳动 */
  border: 1px solid transparent;
  box-sizing: border-box;
}

.card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.cycle-card .time {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #666;
  /* 未选中时上下背景色一致 */
}

.cycle-card .rate {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
  background-color: rgba(0,0,0,0.02); /* 微微深一点的底色 */
}

/* 🔥 周期选中态 (核心还原) */
.cycle-card.active {
  /*border-color: #2979FF; !* 外部蓝色边框 *!*/
  background-color: #fff; /* 边框内的白色间隙(如果需要) */
}

.cycle-card.active .time {
  background-color: #DC3545; /* 上半部分深红 */
  color: #fff;
  font-weight: 500;
}

.cycle-card.active .rate {
  background-color: #F5848E; /* 下半部分浅红 */
  color: #fff;
}

/* 3. 数量输入框 */
.amount-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F7F8FA;
  height: 44px;
  padding: 0 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.amount-input-box .label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.input-wrapper input {
  border: none;
  background: transparent;
  outline: none;
  text-align: right;
  font-size: 14px;
  color: #999; /* 这里模仿截图的灰色数字 1000 */
  width: 100%;
  padding-right: 6px;
  font-family: inherit;
}
/* 聚焦时文字变黑 */
.input-wrapper input:focus {
  color: #333;
}

.input-wrapper .unit {
  font-size: 14px;
  color: #111;
  font-weight: 500;
}

/* 4. 快捷金额网格 */
.quick-amount-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列等宽 */
  gap: 8px;
  margin-bottom: 15px;
}

.amount-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;
}

/* 金额选中态 */
.amount-btn.active {
  background-color: #DC3545; /* 红色背景 */
  color: #fff;
}

/* 5. 余额 */
.balance-row {
  font-size: 12px;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.wallet-icon {
  margin-left: 4px;
  color: #DC3545;
  font-size: 14px;
}

/* 6. 购买按钮 */
.buy-btn {
  display: block;
  width: 310px;
  height: 40px;
  background-color: #DC3545;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
  margin: 0 auto;
}
.buy-btn:active {
  opacity: 0.9;
}
</style>