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

const router = useRouter();

const { data } = safeClient(client.api.rwa.subscription.available_editions.get({
  query: {
    limit: 4,
  },
}));

function handleClick(item: RwaData) {
  router.push(`/trade-rwa/${item.id}`);
}
</script>

<template>
  <div>
    <div class="text-md font-semibold">
      RWA产品
    </div>
    <template v-if="data?.data.length === 0">
      <ui-empty />
    </template>
    <template v-else>
      <div v-for="item in data?.data" :key="item.id" class="card" @click="handleClick(item)">
        <div class="flex justify-between items-center mb-2 h-10">
          <div class="flex items-center">
            <CryptocurrencyColorNuls class="text-2xl inline-block mr-2" />
            <div class="flex items-center gap-2">
              <div class="text-md font-medium">
                {{ item.product.name }}/{{ item.product.code }}
              </div>
              <ui-tag size="small" type="secondary">
                {{ item.product.category?.name }}
              </ui-tag>
            </div>
          </div>

          <ion-button size="small">
            <ion-icon slot="start" :icon="cartOutline" />
            <span>购 入</span>
          </ion-button>
        </div>

        <div class="text-sm font-semibold mb-2 text-text-300">
          阶段：{{ item.editionName }}
        </div>

        <div class="text-2xl font-bold mb-2">
          {{ formatAmountWithSplit(item.totalSupply) }}
        </div>
      </div>
    </template>
  </div>
</template>

<style lang='css' scoped>
.card {
  padding: 16px;
  border-radius: 8px;
  margin-top: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: var(--ion-color-faint);
}

@media (prefers-color-scheme: dark) {
  .card {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
  }
}
ion-button {
  --padding-start: 12px;
  --padding-end: 12px;
  --padding-top: 8px;
  --padding-bottom: 8px;
  --border-radius: 8px;
}
</style>
