<script setup lang="ts">
import { chevronDownOutline } from "ionicons/icons";

interface TradingPairData {
  symbol: string;
  baseAsset: string;
  quoteAsset: string;
  lastPrice: string;
  priceChange24h: string;
  priceChangePercent24h: string;
  high24h: string;
  low24h: string;
  volume24h: string;
}

// TODO: 后续从API获取数据
// const { data } = await client.api.trading.pair.get({ query: { symbol: 'BTC_USDT' } })
const tradingPair = ref<TradingPairData>({
  symbol: "BTC_USDT",
  baseAsset: "BTC",
  quoteAsset: "USDT",
  lastPrice: "43250.50",
  priceChange24h: "+1250.30",
  priceChangePercent24h: "+2.98",
  high24h: "43800.00",
  low24h: "41500.00",
  volume24h: "1,234.56",
});

const isPositive = computed(() => !tradingPair.value.priceChangePercent24h.startsWith("-"));

function openPairSelector() {
  // TODO: 打开交易对选择器
  console.log("打开交易对选择器");
}
</script>

<template>
  <div class="trading-pair-header">
    <div class="flex items-center justify-between px-4 py-3">
      <!-- 交易对信息 -->
      <div class="flex items-center gap-2" @click="openPairSelector">
        <div class="flex flex-col">
          <div class="flex items-center gap-1">
            <span class="text-base font-semibold">{{ tradingPair.baseAsset }}/{{ tradingPair.quoteAsset }}</span>
            <ion-icon :icon="chevronDownOutline" class="text-sm text-text-400" />
          </div>
          <div class="text-xs text-text-500">
            现货
          </div>
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="flex-1 flex justify-end items-center gap-4">
        <div class="flex flex-col items-end">
          <div class="text-lg font-semibold" :class="isPositive ? 'text-success-500' : 'text-danger-500'">
            {{ tradingPair.lastPrice }}
          </div>
          <div class="text-xs" :class="isPositive ? 'text-success-500' : 'text-danger-500'">
            {{ tradingPair.priceChangePercent24h }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 24h数据 -->
    <div class="grid grid-cols-3 gap-4 px-4 pb-3 text-xs">
      <div class="flex flex-col">
        <span class="text-text-500">24h高</span>
        <span class="font-medium mt-1">{{ tradingPair.high24h }}</span>
      </div>
      <div class="flex flex-col">
        <span class="text-text-500">24h低</span>
        <span class="font-medium mt-1">{{ tradingPair.low24h }}</span>
      </div>
      <div class="flex flex-col">
        <span class="text-text-500">24h量({{ tradingPair.baseAsset }})</span>
        <span class="font-medium mt-1">{{ tradingPair.volume24h }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.trading-pair-header {
  background: var(--ion-background-color);
  border-bottom: 1px solid var(--ion-border-color);
}
</style>
