<script lang='ts' setup>
import type { SpotOrderBody } from "@/api/types";
import { modalController, toastController } from "@ionic/vue";
import { closeOutline } from "ionicons/icons";
import { client, safeClient } from "@/api";
import { tradeEvent } from "@/events";
import { tradeWayConfig } from "../config";

const props = defineProps<{
  form: SpotOrderBody & { amount: string };
}>();
const currentTradeWay = computed(() => {
  return tradeWayConfig.find(item => item.value === props.form.orderType);
});

function onClose() {
  modalController.dismiss();
}
async function onConfirm() {
  await safeClient(client.api.spot_order.create.post({
    orderType: props.form.orderType,
    quantity: props.form.quantity,
    side: props.form.side,
    symbol: props.form.symbol,
    memo: props.form.memo,
    price: props.form.price,
  }));
  tradeEvent.trigger();
  const toast = await toastController.create({
    message: "订单提交成功",
    duration: 2000,
    position: "top",
    color: "success",
  });
  await toast.present();
  modalController.dismiss({ success: true });
}
</script>

<template>
  <div class="ion-padding h-80">
    <div class="flex justify-between items-center mb-5">
      <div class="font-semibold">
        下单确认
      </div>
      <ion-icon :icon="closeOutline" class="text-2xl" @click="onClose" />
    </div>
    <div>
      <div class="flex items-center gap-2 mb-2">
        <div class="text-sm">
          {{ form.symbol }}
        </div>
        <ui-tag size="mini" :type="form.side === 'buy' ? 'success' : 'danger'">
          {{ form.side === 'buy' ? '买入' : '卖出' }}
        </ui-tag>
      </div>
      <template v-if="form.orderType === 'limit'">
        <div class="cell">
          <div class="label">
            委托价格
          </div>
          <div class="value">
            {{ form.price }} USDT
          </div>
        </div>
        <div class="cell">
          <div class="label">
            数量
          </div>
          <div class="value">
            {{ form.quantity }}
          </div>
        </div>
        <div class="cell">
          <div class="label">
            金额
          </div>
          <div class="value">
            {{ form.amount }} USDT
          </div>
        </div>
        <div class="cell">
          <div class="label">
            类型
          </div>
          <div class="value">
            {{ currentTradeWay?.name }}
          </div>
        </div>
      </template>

      <template v-else-if="form.orderType === 'market'">
        <div class="cell">
          <div class="label">
            委托价格
          </div>
          <div class="value">
            {{ form.price }} USDT
          </div>
        </div>
        <div class="cell">
          <div class="label">
            数量
          </div>
          <div class="value">
            {{ form.quantity }}
          </div>
        </div>
      </template>
    </div>

    <div class="mt-6">
      <ion-button expand="block" color="success" @click="onConfirm">
        确认下单
      </ion-button>
    </div>
  </div>
</template>

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

.cell {
  @apply flex justify-between items-center py-1;
}
.label {
  @apply text-sm text-(--ion-text-color-step-400);
}
.value {
  @apply text-sm font-semibold;
}
</style>
