<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">BTC期权-251109-101000</h1>
      </div>
      <div class="right">
        <img src="@/assets/icon/bitcoin/den.svg" alt="" @click="showFunctions = true">
      </div>
    </header>
    <div >
      <OptionChain></OptionChain>
    </div>

  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
// ✅ 使用 namespace 引入，防止报错
import * as klinecharts from 'klinecharts'
import OptionChain from './components/OptionChain.vue'


// --- 状态管理 ---
const currentTab = ref('24h')
const tabs = ['1h', '6h', '24h', '1w', '1m']
let chartInstance = null

// --- 数据生成逻辑 ---
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
  if (chartInstance) {
    // 模拟数据刷新
    const randomStart = 3800 + Math.random() * 100
    chartInstance.applyNewData(generateData(randomStart))
  }
}

// --- 初始化与配置 ---
onMounted(() => {
  const chartDOM = document.getElementById('k-line-chart')
  if (!chartDOM) return

  // 1. 初始化图表
  chartInstance = klinecharts.init(chartDOM)
  if (!chartInstance) return

  // 2. 样式常量
  const targetBlue = '#4A6EF5' // 截图中的蓝色虚线颜色
  const gridColor = '#F2F4F6'  // 极淡的网格线
  const textColor = '#929AA5'  // 灰色文字

  // 3. 核心配置 (setStyleOptions)
  chartInstance.setStyleOptions({
    grid: {
      show: true,
      horizontal: {
        show: true,
        size: 1,
        color: gridColor,
        style: 'dash',
        dashValue: [5, 5]
      },
      vertical: { show: false }
    },
    candle: {
      type: 'candle_solid',
      bar: {
        upColor: '#2EBD85',
        downColor: '#F6465D',
        noChangeColor: '#2EBD85'
      },
      // ✅ 重点：蓝色价格指示线配置
      priceMark: {
        show: true,
        high: { show: false },
        low: { show: false },
        last: {
          show: true,
          // 强制无论涨跌都显示蓝色
          upColor: targetBlue,
          downColor: targetBlue,
          line: { show: true, style: 'dash', dashValue: [4, 3] },
          text: {
            show: true,
            color: '#FFFFFF',
            size: 11,
            paddingLeft: 4,
            paddingRight: 4,
            borderRadius: 2
          }
        }
      },
      tooltip: {
        // 只有按压时才显示十字光标
        showRule: 'follow_cross',
        showType: 'rect',
        dataSource: 'none', // 隐藏浮层数据，保持清爽
        crosshair: {
          show: true,
          horizontal: { line: { style: 'dash', color: textColor } },
          vertical: { line: { style: 'dash', color: textColor } }
        }
      }
    },
    // ✅ 重点：技术指标(VOL)颜色
    technicalIndicator: {
      bar: {
        upColor: '#2EBD85',
        downColor: '#F6465D',
        noChangeColor: '#2EBD85'
      }
    },
    // ✅ 重点：隐藏坐标轴线，只保留文字
    xAxis: {
      axisLine: { show: false },
      tickLine: { show: false },
      tickText: { color: textColor, size: 10, paddingTop: 8 }
    },
    yAxis: {
      type: 'normal',
      position: 'right',
      inside: true,
      axisLine: { show: false },
      tickLine: { show: false },
      tickText: { color: textColor, size: 10, paddingLeft: 8 }
    },
    separator: { size: 0 } // 去掉指标和K线之间的分割线
  })

  // 4. 创建副图指标 (VOL)
  chartInstance.createTechnicalIndicator('VOL', false, { id: 'pane_1', heightRatio: 0.2 })

  // 5. 加载数据并设置缩放
  chartInstance.applyNewData(generateData())
  if (chartInstance.setDataSpace) {
  chartInstance.setDataSpace(7)
}
  // chartInstance.setBarSpace(7) // 设置蜡烛宽度
})

onUnmounted(() => {
  if (chartInstance) {
    klinecharts.dispose('k-line-chart')
  }
})
</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;
  overflow-x: hidden;
}

/* 🔥🔥 核心修改：定义一个公共的左右内边距
   给 header, market-info, time-tabs, chart-wrapper 都加上
*/
.header,
.market-info,
.time-tabs,
.chart-wrapper {
  padding-left: 15px;
  padding-right: 15px;
  /* 关键：确保 padding 不会撑大 width: 100% */
  box-sizing: border-box;
}

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

/* --- 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: grid;
  grid-template-columns: 1fr 1fr; /* 保持两列 */
  column-gap: 12px;
  row-gap: 6px;
  text-align: right;

}
.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;
  /*gap: 5px;*/
  justify-content: space-between;
  /*//padding-top: 8px;*/
  /*padding-bottom: 8px;*/
  /* 你的截图中似乎没有底边框，这里保持干净 */
}
.tab-item {
  font-size: 14px;
  color: #929AA5;
  padding: 4px 10px; /* 稍微减小内边距，适应 15px 的两侧挤压 */
  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. 图表容器 --- */
.chart-wrapper {
  width: 100%;
  height: 275px;
  /*margin-top: 5px;*/
  /* 🔥 这里加了 padding 后，K线图就会自动往里缩，左右留出白边 */
}
.kline-container {
  width: 100%;
  height: 100%;
}
</style>