<script setup lang="ts">
import type { ChartingLibraryWidgetOptions } from "#/charting_library";
import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
import { TradingViewChart } from "@/tradingview/index";
import OrdersPanel from "./components/orders-panel.vue";
import TradeSwitch from "./components/trade-switch.vue";
import TradeWay from "./components/trade-way.vue";

const mode = ref<"buy" | "sell">("buy");
const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
  disabled_features: [
    "create_volume_indicator_by_default",
  ],
};
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <div slot="start" class="flex items-center gap-1 px-4">
          <div class="text-md font-bold">
            BTC/USDT
          </div>
          <ui-tag size="mini" type="tertiary">
            现货
          </ui-tag>
          <ion-icon :icon="caretDownOutline" />
        </div>
        <ion-buttons slot="end">
          <ion-button>
            <MaterialSymbolsCandlestickChartOutline class="text-xl" />
          </ion-button>
          <ion-button>
            <ion-icon :icon="ellipsisHorizontal" />
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <TradingViewChart class="mb-5" height="300px" symbol="BTCUSD" :options="tradingviewOptions" />

      <div class="grid grid-cols-5 px-4">
        <div class="col-span-3 space-y-2">
          <TradeSwitch v-model:active="mode" />
          <TradeWay />
          <ion-input label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额">
            <span slot="end">USDT</span>
          </ion-input>
          <ion-range class="range" aria-label="Range with ticks" :pin="true" :ticks="true" :snaps="true" :min="0" :max="5" />
          <ion-button expand="block" size="small" shape="round" :color="mode === 'buy' ? 'success' : 'danger'">
            {{ mode === 'buy' ? '买入' : '卖出' }}
          </ion-button>
        </div>
        <div class="col-span-2" />
      </div>
      <div class="mt-6 px-4 pb-4">
        <OrdersPanel />
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang="css" scoped>
@reference "tailwindcss";

ion-input.count {
  --background: var(--ion-color-faint);
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 6px;
  font-size: 12px;
  min-height: 40px;
}
ion-range.range {
  --bar-height: 3px;
  --knob-size: 14px;
  --pin-color: #fff;
  --bar-background-active: #3e3e3e;
  --bar-background: rgb(226, 226, 226);
  padding: 0 8px;
}
ion-range.range::part(tick) {
  z-index: 1;
  border-radius: 100%;
  background: #dcdcdc;
}
ion-range.range::part(tick),
ion-range.range::part(tick-active) {
  height: 6px;
  width: 6px;
  top: 18px;
  border-radius: 100%;
}
</style>
