<script lang='ts' setup>
import { toastController } from "@ionic/vue";
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
import IcSharpEditNote from "~icons/ic/sharp-edit-note";
import { client, safeClient } from "@/api";
import RwaAbout from "./components/about.vue";
import RwaBase from "./components/base.vue";

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

const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());

const { t } = useI18n();
const router = useRouter();

const model = useTemplateRef<ModalInstance>("model");

async function handleSubscribe(val: number) {
  await safeClient(client.api.rwa.subscription.apply.post({
    editionId: data.value!.id,
    quantity: String(val),
  }));
  const toast = await toastController.create({
    message: t("market.tradeRwa.subscribeSuccess"),
    duration: 2000,
    position: "bottom",
    color: "success",
  });

  await toast.present();
  model.value?.$el.dismiss();
}
function gotoEdit() {
  router.push({ name: "trade-rwa-edit" });
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" text="" />
        <ion-title>
          {{ data?.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?.product.name }}
            </div>
            <div class="text-xs text-gray-500 font-semibold">
              {{ data?.product.category?.name }}
            </div>
          </div>
        </div>
        <!-- <div class="flex items-center my-3" @click="gotoEdit">
          <IcSharpEditNote class="inline-block text-xl mr-1 text-text-500" />
          <div class="text-xs">
            编辑资产
          </div>
        </div> -->
      </div>

      <ui-tabs size="small" class="my-3">
        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
          <RwaBase :data="data" />
        </ui-tab-pane>
        <ui-tab-pane name="about" title="相关文档" lazy>
          <RwaAbout :data="data" />
        </ui-tab-pane>
      </ui-tabs>
    </ion-content>

    <ion-footer>
      <ion-toolbar class="ion-padding-horizontal ion-toolbar">
        <div class="flex justify-center my-2 gap-5">
          <ion-button id="open-modal" shape="round" expand="block" color="success">
            {{ t('market.tradeRwa.subscribe') }}
          </ion-button>

          <ion-modal ref="model" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
            <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" :max="Number(data?.perUserLimit || 0)" @subscribed="handleSubscribe" />
          </ion-modal>
        </div>
      </ion-toolbar>
    </ion-footer>
  </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>
