<script lang='ts' setup>
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
import { client, safeClient } from "@/api";

const props = defineProps<{
  id: string;
}>();

const { t } = useI18n();
const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>
          {{ data?.edition.product.code }}
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true" class="ion-padding">
      <div>
        <div class="flex items-center space-x-2">
          <CryptocurrencyColorNuls class="text-3xl" />

          <div class="mr-2">
            <div class="text-lg font-semibold">
              {{ data?.edition.product.name }}
            </div>
            <div class="text-xs text-gray-500 font-semibold">
              {{ data?.edition.product.code }}
            </div>
          </div>
        </div>
      </div>

      <!-- 申购信息 -->
      <div class="mt-6 space-y-4">
        <!-- 申购状态 -->
        <div class="bg-faint rounded-2xl p-4">
          <div class="text-sm text-text-500 mb-2">
            申购状态
          </div>
          <div class="text-lg font-semibold">
            {{ t(`trade.subscribeStatus.${data?.status}`) }}
          </div>
        </div>

        <!-- 申购信息详情 -->
        <div class="bg-faint rounded-2xl p-4 space-y-4">
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">申购数量</span>
            <span class="text-base font-semibold">{{ data?.quantity }}</span>
          </div>
          <ui-divider />
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">单价</span>
            <span class="text-base font-semibold">${{ Number(data?.unitPrice).toFixed(2) }}</span>
          </div>
          <ui-divider />
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">总金额</span>
            <span class="text-lg font-bold text-primary">${{ Number(data?.totalAmount).toFixed(2) }}</span>
          </div>
        </div>

        <!-- 产品信息 -->
        <div class="bg-faint rounded-2xl p-4 space-y-4">
          <div class="text-base font-semibold mb-3">
            产品信息
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">产品类别</span>
            <span class="text-sm">{{ data?.edition.product.categoryId }}</span>
          </div>
          <ui-divider />
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">产品编码</span>
            <span class="text-sm">{{ data?.edition.product.code }}</span>
          </div>
          <ui-divider />
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">产品名称</span>
            <span class="text-sm">{{ data?.edition.product.name }}</span>
          </div>
        </div>

        <!-- 发行期信息 -->
        <div v-if="data?.edition" class="bg-faint rounded-2xl p-4 space-y-4">
          <div class="text-base font-semibold mb-3">
            发行期信息
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">发行期编号</span>
            <span class="text-sm">{{ data?.edition.id }}</span>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="bg-faint rounded-2xl p-4 space-y-4">
          <div class="text-base font-semibold mb-3">
            时间信息
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">申购时间</span>
            <span class="text-sm">{{ new Date(data?.createdAt!).toLocaleString('zh-CN') }}</span>
          </div>
          <ui-divider />
          <div class="flex justify-between items-center">
            <span class="text-sm text-text-500">更新时间</span>
            <span class="text-sm">{{ new Date(data?.updatedAt!).toLocaleString('zh-CN') }}</span>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style scoped>
@reference "tailwindcss";

.label {
  @apply text-gray-500 mb-1;
}

ion-button {
  width: 100%;
  min-height: 40px;
}

ion-button::part(native) {
  min-height: 40px;
}
</style>
