<script setup lang="ts">
import type { RefresherCustomEvent } from "@ionic/vue";
import RwaTab from "./components/rwa-tab.vue";
import TokenizedTab from "./components/tokenized-tab.vue";

const { t } = useI18n();
const rwaInst = useTemplateRef<InstanceType<typeof RwaTab>>("rwaInst");
const tokenizedInst = useTemplateRef<InstanceType<typeof TokenizedTab>>("tokenizedInst");

async function handleRefresh(event: RefresherCustomEvent) {
  await rwaInst.value?.handleRefresh();
  await tokenizedInst.value?.handleRefresh();
  setTimeout(() => {
    event.target.complete();
  }, 500);
}
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-title>{{ t('market.title') }}</ion-title>
      </ion-toolbar>
      <!-- <ion-toolbar class="ion-toolbar px-3">
        <ion-searchbar :placeholder="t('market.search.placeholder')" />
      </ion-toolbar> -->
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding-horizontal">
      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
        <ion-refresher-content />
      </ion-refresher>

      <ui-tabs type="segment" class="tabs" size="small">
        <ui-tab-pane name="rwa" title="数字化产品">
          <RwaTab ref="rwaInst" />
        </ui-tab-pane>
        <ui-tab-pane name="tokenized" title="代币化产品">
          <TokenizedTab ref="tokenizedInst" />
        </ui-tab-pane>
      </ui-tabs>
    </IonContent>
  </IonPage>
</template>

<style lang="css" scoped>
ion-searchbar {
  padding: 0;
}
:deep(.tabs) .ui-tabs__nav-wrapper {
  margin: 0 auto;
  margin-bottom: 10px;
  width: 100%;
}
:deep(.tabs) .ui-tab--segment {
  font-size: 13px;
  padding: 6px !important;
  flex: 1;
  text-align: center;
}
</style>
