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

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

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

function gotoTradeRwa(id: string) {
  router.push(`/trade-settings/my-issues/${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>{{ t('myIssues.list.nameCode') }}</div>
        </ion-col>
        <ion-col>
          <div class="text-right">
            {{ t('myIssues.list.createdAt') }}
          </div>
        </ion-col>
        <ion-col>
          <div class="text-right">
            {{ t('myIssues.list.status') }}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div v-for="item in data" :key="item.id" @click="gotoTradeRwa(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?.name }}
              </div>
              <div class="flex items-center space-x-2">
                <div class="text-xs text-text-500">
                  {{ item?.code }}
                </div>
                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
                  {{ item.category?.name }}
                </div>
              </div>
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              {{ useDateFormat(item.createdAt!, 'MM/DD HH:mm').value }}
            </div>
          </ion-col>
          <ion-col>
            <div class="text-sm font-bold text-primary text-right">
              {{ t(`myIssues.status.${item.status}`) }}
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</template>

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