<script lang='ts' setup>
import type { ChartingLibraryWidgetOptions } from "#/charting_library";
import type { TradableData } from "@/api/types";
import type { TradingViewInst } from "@/tradingview";
import { client, safeClient } from "@/api";
import { TradingViewChart } from "@/tradingview";
import OrderBook from "./order-book.vue";

const props = defineProps<{
  data: TradableData | null;
}>();

const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
  disabled_features: [
    "create_volume_indicator_by_default",
  ],
};

const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
const symbol = computed(() => props.data?.asset?.tradingPairsAsBase[0].symbol || "");

const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: symbol.value, depth: 30 } }));
</script>

<template>
  <TradingViewChart v-if="symbol" ref="tradingViewInst" class="mb-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />

  <ui-tabs size="small" class="my-3">
    <ui-tab-pane name="order_book" title="订单表">
      <OrderBook :symbol="symbol" />
    </ui-tab-pane>
  </ui-tabs>
</template>

<style lang='css' scoped></style>
