<script lang='ts' setup>
import SolarDollarMinimalisticBoldDuotone from "~icons/solar/dollar-minimalistic-bold-duotone";
import SolarRoundTransferHorizontalBoldDuotone from "~icons/solar/round-transfer-horizontal-bold-duotone";
import { getCryptoIcon } from "@/config/crypto";

const walletStore = useWalletStore();
const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
</script>

<template>
  <div>
    <ion-label class="text-xs font-medium text-text-300">
      资产分布
    </ion-label>

    <div class="grid grid-cols-2 gap-4 mt-2">
      <div class="asset-card">
        <div class="text-xs text-text-400 font-semibold flex items-center gap-1">
          <SolarDollarMinimalisticBoldDuotone />
          资金账户
        </div>
        <div class="font-bold">
          ${{ totalAssetValue.fundingValueUsd }}
        </div>
      </div>
      <div class="asset-card">
        <div class="text-xs text-text-400 font-semibold flex items-center gap-1">
          <SolarRoundTransferHorizontalBoldDuotone />
          交易账户
        </div>
        <div class="font-bold">
          ${{ totalAssetValue.tradingValueUsd }}
        </div>
      </div>
    </div>

    <ion-label class="text-xs font-medium text-text-300">
      资产
    </ion-label>
    <ion-list lines="none" class="space-y-5 mt-2!">
      <ion-item v-for="asset, i in fundingBalances" :key="i" class="">
        <div class="flex items-center space-x-3 flex-1">
          <component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
          <div class="space-y-1">
            <div class="font-medium text-md">
              {{ asset.assetCode }}
            </div>
            <div class="text-xs text-text-700 font-bold">
              Total: ${{ asset.total }}
            </div>
          </div>
        </div>
        <div class="w-fit font-bold">
          ${{ Number(asset.available) }}
        </div>
      </ion-item>
    </ion-list>
  </div>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

ion-item::part(native) {
  --padding-start: 0;
}
.asset-card {
  @apply flex flex-col justify-between py-2 px-4 bg-gray-100  rounded-lg mb-3 gap-2;
}

.ion-palette-dark .asset-card {
  @apply bg-[#151515];
}
</style>
