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

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

const router = useRouter();

function gotoTokenized(id: string) {
  router.push(`/trade-tokenized/${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>
          <div class="text-right">
            交易价估算
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div v-for="item in data" :key="item.id" @click="gotoTokenized(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.product?.name }}
              </div>
              <div class="flex items-center space-x-2">
                <div class="text-xs text-text-500">
                  {{ item.product?.code }}
                </div>
                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
                  {{ item.product?.category?.name }}
                </div>
              </div>
            </div>
          </ion-col>

          <ion-col>
            <div class="text-xs text-right">
              +12.6%
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              连涨3天
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</template>

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