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

defineProps<{
  data: MySubscribeRwaData[];
}>();

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

function gotoMySubscribe(id: string) {
  router.push(`/trade-settings/my-subscribe/${id}`);
}
</script>

<template>
  <div class="space-y-3 antialiased mt-5">
    <ion-grid>
      <ion-row class="ion-align-items-center text-xs text-text-500">
        <ion-col size="6">
          <div>名称/编号</div>
        </ion-col>
        <ion-col>
          <div class="text-right">
            单价
          </div>
        </ion-col>
        <ion-col size="2">
          <div class="text-right">
            状态
          </div>
        </ion-col>
        <ion-col size="3">
          <div class="text-right">
            总金额
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div v-for="item in data" :key="item.id" @click="gotoMySubscribe(item.id)">
      <ion-grid>
        <ion-row class="ion-align-items-center my-5">
          <ion-col size="6" class="flex items-center">
            <div class="mr-3">
              <CryptocurrencyColorNuls class="text-3xl" />
            </div>
            <div>
              <div class="text-sm font-semibold mb-1 truncate">
                {{ item.edition.product?.name }}
              </div>
              <div class="flex items-center space-x-2">
                <div class="text-xs text-text-500">
                  {{ item.edition.product?.code }}
                </div>
                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
                  {{ item.edition.product.category?.name }}
                </div>
              </div>
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              ${{ Number(item.unitPrice) }}
            </div>
          </ion-col>
          <ion-col size="2">
            <div class="text-xs text-right">
              {{ t(`trade.subscribeStatus.${item.status}`) }}
            </div>
          </ion-col>
          <ion-col size="3">
            <div class="text-lg font-bold text-primary text-right">
              ${{ Number(item.totalAmount) }}
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</template>

<style lang='css' scoped></style>
