<script setup lang="ts">
interface Order {
  id: string;
  symbol: string;
  side: "buy" | "sell";
  type: "limit" | "market";
  price: string;
  amount: string;
  filled: string;
  total: string;
  status: "pending" | "partial" | "filled" | "cancelled";
  time: string;
}

type TabType = "current" | "history";

const activeTab = ref<TabType>("current");

// TODO: 后续从API获取当前委托订单
// const { data: currentOrders } = await client.api.trading.orders.get({ query: { status: 'open' } })
const currentOrders = ref<Order[]>([
  {
    id: "1001",
    symbol: "BTC_USDT",
    side: "buy",
    type: "limit",
    price: "43200.00",
    amount: "0.5000",
    filled: "0.2500",
    total: "21600.00",
    status: "partial",
    time: "2024-12-27 10:30:25",
  },
  {
    id: "1002",
    symbol: "BTC_USDT",
    side: "sell",
    type: "limit",
    price: "43500.00",
    amount: "0.3000",
    filled: "0.0000",
    total: "13050.00",
    status: "pending",
    time: "2024-12-27 09:15:10",
  },
]);

// TODO: 后续从API获取历史订单
// const { data: historyOrders } = await client.api.trading.orders.get({ query: { status: 'closed' } })
const historyOrders = ref<Order[]>([
  {
    id: "1003",
    symbol: "BTC_USDT",
    side: "buy",
    type: "limit",
    price: "42800.00",
    amount: "0.2000",
    filled: "0.2000",
    total: "8560.00",
    status: "filled",
    time: "2024-12-26 18:45:30",
  },
  {
    id: "1004",
    symbol: "BTC_USDT",
    side: "sell",
    type: "market",
    price: "43100.00",
    amount: "0.1500",
    filled: "0.1500",
    total: "6465.00",
    status: "filled",
    time: "2024-12-26 16:20:15",
  },
  {
    id: "1005",
    symbol: "BTC_USDT",
    side: "buy",
    type: "limit",
    price: "42500.00",
    amount: "0.4000",
    filled: "0.0000",
    total: "17000.00",
    status: "cancelled",
    time: "2024-12-26 14:10:05",
  },
]);

const displayOrders = computed(() => {
  return activeTab.value === "current" ? currentOrders.value : historyOrders.value;
});

function getStatusText(status: Order["status"]) {
  const statusMap = {
    pending: "未成交",
    partial: "部分成交",
    filled: "已成交",
    cancelled: "已取消",
  };
  return statusMap[status];
}

function getStatusColor(status: Order["status"]) {
  const colorMap = {
    pending: "warning",
    partial: "primary",
    filled: "success",
    cancelled: "medium",
  };
  return colorMap[status];
}

async function cancelOrder(orderId: string) {
  // TODO: 后续调用取消订单API
  // await client.api.trading.order[orderId].delete()
  console.log("取消订单", orderId);
}
</script>

<template>
  <div class="flex flex-col h-full bg-(--ion-background-color)">
    <!-- Tab切换 -->
    <ui-tabs v-model="activeTab" size="small">
      <ui-tab-pane
        title="当前委托"
        name="current"
      />
      <ui-tab-pane
        title="历史记录"
        name="history"
      />
    </ui-tabs>

    <!-- 订单列表 -->
    <div class="flex-1 overflow-y-auto">
      <div v-if="displayOrders.length === 0" class="flex items-center justify-center py-10 px-5">
        <div class="text-(--ion-text-color-step-500) text-sm">
          {{ activeTab === 'current' ? '暂无当前委托' : '暂无历史记录' }}
        </div>
      </div>

      <div v-else class="space-y-3">
        <div
          v-for="order in displayOrders"
          :key="order.id"
          class="bg-faint rounded-xl p-3"
        >
          <div class="flex justify-between items-center mb-3">
            <div class="flex items-center gap-2">
              <span
                class="px-2 py-0.5 rounded text-[11px] font-semibold"
                :class="order.side === 'buy'
                  ? 'bg-success/10 text-(--ion-color-success)'
                  : 'bg-danger/10 text-(--ion-color-danger)'"
              >
                {{ order.side === 'buy' ? '买入' : '卖出' }}
              </span>
              <span class="text-sm font-medium">{{ order.symbol }}</span>
              <ion-badge :color="getStatusColor(order.status)" class="text-[10px] px-1.5 py-0.5">
                {{ getStatusText(order.status) }}
              </ion-badge>
            </div>
            <button
              v-if="activeTab === 'current' && order.status !== 'filled'"
              class="px-3 py-1 bg-transparent border border-(--ion-color-danger) text-(--ion-color-danger) rounded-md text-xs transition-all active:bg-(--ion-color-danger) active:text-white"
              @click="cancelOrder(order.id)"
            >
              撤单
            </button>
          </div>

          <div class="grid grid-cols-2 gap-2 mb-2">
            <div class="flex justify-between text-xs">
              <span class="text-(--ion-text-color-step-400)">{{ order.type === 'limit' ? '价格' : '市价' }}</span>
              <span class="text-(--ion-text-color) font-medium">{{ order.type === 'limit' ? order.price : '-' }}</span>
            </div>
            <div class="flex justify-between text-xs">
              <span class="text-(--ion-text-color-step-400)">数量</span>
              <span class="text-(--ion-text-color) font-medium">{{ order.amount }}</span>
            </div>
            <div class="flex justify-between text-xs">
              <span class="text-(--ion-text-color-step-400)">成交</span>
              <span class="text-(--ion-text-color) font-medium">{{ order.filled }}</span>
            </div>
            <div class="flex justify-between text-xs">
              <span class="text-(--ion-text-color-step-400)">总额</span>
              <span class="text-(--ion-text-color) font-medium">{{ order.total }} USDT</span>
            </div>
          </div>

          <div class="pt-2">
            <span class="text-[11px] text-(--ion-text-color-step-500)">{{ order.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
