<script lang='ts' setup>
import type { RwaData } from "@/api/types";

defineProps<{
  data: RwaData["data"];
}>();
</script>

<template>
  <ion-list lines="none" class="space-y-2">
    <ion-item>
      <ion-grid>
        <ion-row class="ion-align-items-center text-xs">
          <ion-col size="6">
            <div>名称/代码</div>
          </ion-col>
          <ion-col>
            <div class="text-right">
              阶段
            </div>
          </ion-col>
          <ion-col>
            <div class="text-right">
              发行日期
            </div>
          </ion-col>
          <ion-col>
            <div class="text-right">
              申购单价
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item v-for="item in data" :key="item.id">
      <ion-grid>
        <ion-row class="ion-align-items-center space-y-5">
          <ion-col size="6">
            <div>
              <div class="font-semibold mb-1 truncate">
                {{ item.product?.name }}
              </div>
              <p class="text-xs text-text-500 font-bold">
                {{ item.product?.code }}
              </p>
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              {{ item.editionName }}
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              {{ useDateFormat(item.launchDate!, 'MM/DD') }}
            </div>
          </ion-col>
          <ion-col>
            <div v-if="item.unitPrice" class="text-right">
              <div class="text-lg font-bold text-primary">
                ${{ Number(item.unitPrice) }}
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>
</template>

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