<template>
  <div class="page-container">
    <header class="header">
      <div class="left" style="display: flex; align-items: center;">
        <img class="fc333333" src="@/assets/icon/bitcoin/menu.svg" alt="">
        <h1 class="title">{{symbolTitle}}</h1>
      </div>
      <div class="right">
        <img src="@/assets/icon/bitcoin/den.svg" alt="" @click="showFunctions = true">
      </div>
    </header>

    <section class="market-info">
      <div class="price-block">
        <div class="fs16" style="margin-bottom: 2px;">实时价格</div>
        <div class="current-price">1,125,158.00</div>
        <div class="sub-info ">
          <span class="fiat fs14 ">≈35,458.00</span>
          <span class="percent up fs14">+1.42%</span>
        </div>
      </div>

      <div class="stat-grid">
        <div>
          <div class="stat-item">
            <span class="label">24h 最高价</span>
            <span class="value">78,776.76</span>
          </div>
          <div class="stat-item">
            <span class="label">24h 成交量 (BTC)</span>
            <span class="value">78,776.76</span>
          </div>
        </div>
        <div>
          <div class="stat-item">
            <span class="label">24h 最低价</span>
            <span class="value">78,776.76</span>
          </div>
          <div class="stat-item">
            <span class="label">24h 成交额 (BTC)</span>
            <span class="value">78,776.76</span>
          </div>
        </div>
      </div>
    </section>

    <nav class="time-tabs">
      <div
        v-for="tab in tabs"
        :key="tab"
        class="tab-item"
        :class="{ active: currentTab === tab }"
        @click="switchPeriod(tab)"
      >
        {{ tab }}
      </div>
      <div class="tab-item icon">更多 <span class="triangle">◢</span></div>
      <div class="tab-item icon">
        <img src="@/assets/icon/bitcoin/lishidingdan.svg" alt="">
      </div>
    </nav>

    <!-- 这里的 chart-wrapper 负责控制 padding 和高度 -->
    <div class="chart-wrapper">
      <!-- 引入封装好的组件，只需传数据和高度 -->
      <KlineChart
        :data="kLineData"
        height="70vh"
      />
    </div>

    <ChooseThisCycle></ChooseThisCycle>
    <sellOrder></sellOrder>
    <!-- <MarketPriceAndPlan></MarketPriceAndPlan> -->
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import MarketPriceAndPlan from './components/MarketPriceAndPlan.vue'
import ChooseThisCycle from './components/ChooseThisCycle.vue'
import sellOrder from '@/views/bitcoin/components/sellOrder.vue'

// 1. 引入新封装的组件 (请确保路径正确)
import KlineChart from '@/views/bitcoin/lever/components/KLineChart.vue'

const route = useRoute()
const symbolTitle = ref(route.params.id || 'BTCUSDT')
const showFunctions = ref(false) // 补全原始模板中用到的变量

// --- 状态管理 ---
const currentTab = ref('24h')
const tabs = ['1h', '6h', '24h', '1w', '1m']
const kLineData = ref([]) // 响应式数据，传递给子组件

// --- 数据生成逻辑 (保持不变) ---
const generateData = (baseVal = 3812.74) => {
  const data = []
  let baseTime = new Date().getTime()
  let basePrice = baseVal
  for (let i = 0; i < 80; i++) {
    const change = (Math.random() - 0.5) * 30
    const close = basePrice + change
    const open = basePrice + (Math.random() - 0.5) * 10
    const high = Math.max(open, close) + Math.random() * 10
    const low = Math.min(open, close) - Math.random() * 10
    const volume = Math.random() * 100 + 50

    data.push({ timestamp: baseTime, open, high, low, close, volume })
    baseTime += 60 * 60 * 1000 // 1h 间隔
    basePrice = close + (Math.random() * 2) // 稍微向上的趋势
  }
  return data
}

// --- 切换周期逻辑 ---
const switchPeriod = (period) => {
  currentTab.value = period
  // 模拟数据刷新，更新 kLineData，子组件会自动监听并重绘
  const randomStart = 3800 + Math.random() * 100
  kLineData.value = generateData(randomStart)
}

// --- 初始化 ---
onMounted(() => {
  // 页面加载时生成初始数据
  kLineData.value = generateData()
})
</script>

<style scoped>
/* --- 布局容器 --- */
.page-container {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  color: #333;
  padding-top: 50px;
  padding-bottom: 60px;
  overflow-x: hidden;
}

/* 公共内边距 */
.header,
.market-info,
.time-tabs,
.chart-wrapper {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* --- 1. 头部 --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}
.title {
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
  margin-left: 10px;
}

/* --- 2. 行情信息 --- */
.market-info {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}

.price-block .current-price {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #111;
  letter-spacing: -0.5px;
}
.sub-info {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}
.sub-info .fiat {
  color: #999;
  margin-right: 8px;
}
.sub-info .percent.up {
  color: #2EBD85;
}

/* 统计网格 */
.stat-grid {
  display: flex;
  flex-direction: row;
  text-align: right;
  gap: 5px;
}
.stat-item {
  display: flex;
  flex-direction: column;
}
.stat-item .label {
  font-size: 11px;
  color: #999;
  transform: scale(0.9);
  transform-origin: right bottom;
  white-space: nowrap;
}
.stat-item .value {
  font-size: 11px;
  color: #333;
  font-family: "DIN", -apple-system, sans-serif;
}

/* --- 3. Tabs --- */
.time-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-item {
  font-size: 14px;
  color: #929AA5;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}
.tab-item.active {
  background-color: #F6465D;
  color: #fff;
}
.tab-item.icon {
  color: #929AA5;
  font-size: 12px;
}
.triangle {
  font-size: 8px;
}

/* --- 4. 图表容器 --- */
/* 父组件控制高度和边距，子组件填充 100% */
.chart-wrapper {
  width: 100%;
  height: 275px;
}
</style>