<script setup lang="ts">
interface OrderBookItem {
  price: string;
  amount: string;
  total: string;
}

interface OrderBookData {
  bids: OrderBookItem[]; // 买单
  asks: OrderBookItem[]; // 卖单
}

// TODO: 后续从API获取实时数据
// const { data } = await client.api.trading.orderbook.get({ query: { symbol: 'BTC_USDT', depth: 20 } })
const orderBook = ref<OrderBookData>({
  asks: [
    { price: "43260.50", amount: "0.125", total: "5.407" },
    { price: "43258.00", amount: "0.342", total: "14.792" },
    { price: "43255.80", amount: "0.856", total: "37.027" },
    { price: "43253.20", amount: "1.234", total: "53.350" },
    { price: "43251.00", amount: "0.678", total: "29.324" },
    { price: "43249.50", amount: "2.145", total: "92.740" },
    { price: "43247.00", amount: "0.456", total: "19.720" },
    { price: "43245.80", amount: "1.567", total: "67.768" },
  ],
  bids: [
    { price: "43250.50", amount: "0.234", total: "10.120" },
    { price: "43248.00", amount: "0.567", total: "24.522" },
    { price: "43245.50", amount: "1.234", total: "53.365" },
    { price: "43243.20", amount: "0.789", total: "34.118" },
    { price: "43240.00", amount: "2.456", total: "106.197" },
    { price: "43238.50", amount: "0.345", total: "14.917" },
    { price: "43235.00", amount: "1.678", total: "72.548" },
    { price: "43232.80", amount: "0.923", total: "39.903" },
  ],
});

// 计算买卖盘深度百分比（用于显示背景条）
function getDepthPercent(items: OrderBookItem[], index: number) {
  const maxTotal = Math.max(...items.map(item => Number.parseFloat(item.total)));
  const currentTotal = Number.parseFloat(items[index].total);
  return (currentTotal / maxTotal) * 100;
}
</script>

<template>
  <div class="order-book">
    <!-- 卖单 (asks) - 从下往上排列 -->
    <div class="asks-section">
      <div
        v-for="(ask, index) in orderBook.asks.slice().reverse()"
        :key="`ask-${index}`"
        class="order-item ask-item"
      >
        <div
          class="depth-bg ask-depth"
          :style="{ width: `${getDepthPercent(orderBook.asks, orderBook.asks.length - 1 - index)}%` }"
        />
        <div class="order-content">
          <span class="price text-danger-500">{{ ask.price }}</span>
          <span class="amount">{{ ask.amount }}</span>
          <span class="total">{{ ask.total }}</span>
        </div>
      </div>
    </div>

    <!-- 中间分隔 - 显示最新成交价 -->
    <div class="spread-section">
      <div class="flex items-center justify-between px-3 py-2">
        <div class="text-lg font-semibold text-success-500">
          43250.50
        </div>
        <div class="text-xs text-text-500">
          ≈ $43,250.50
        </div>
      </div>
    </div>

    <!-- 买单 (bids) -->
    <div class="bids-section">
      <div
        v-for="(bid, index) in orderBook.bids"
        :key="`bid-${index}`"
        class="order-item bid-item"
      >
        <div
          class="depth-bg bid-depth"
          :style="{ width: `${getDepthPercent(orderBook.bids, index)}%` }"
        />
        <div class="order-content">
          <span class="price text-success-500">{{ bid.price }}</span>
          <span class="amount">{{ bid.amount }}</span>
          <span class="total">{{ bid.total }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-book {
  font-size: 12px;
  user-select: none;
}

.asks-section,
.bids-section {
  position: relative;
}

.order-item {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

.depth-bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transition: width 0.3s ease;
}

.ask-depth {
  background: rgba(239, 68, 68, 0.1);
}

.bid-depth {
  background: rgba(34, 197, 94, 0.1);
}

.order-content {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 12px;
  z-index: 1;
}

.price {
  font-weight: 500;
}

.amount,
.total {
  color: var(--ion-text-color);
  text-align: right;
}

.spread-section {
  border-top: 1px solid var(--ion-border-color);
  border-bottom: 1px solid var(--ion-border-color);
  background: var(--ion-background-color);
}
</style>
