<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 { balances, totalAssetValue } = storeToRefs(walletStore);
</script>

<template>
  <div class="text-md font-semibold my-4">
    资产分布
  </div>

  <div class="grid grid-cols-2 gap-4">
    <div class="asset-card" @click="$router.push('/wallet/funding')">
      <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" @click="$router.push('/wallet/trading')">
      <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>

  <div class="text-md font-semibold my-4">
    资产
  </div>

  <ion-list lines="none" class="space-y-5 mt-2!">
    <ion-item v-for="asset, i in balances" :key="i" @click="$router.push(`/asset_record/${asset.assetCode}`)">
      <div class="flex items-center space-x-3 flex-1">
        <Icon :icon="asset.asset.iconUrl || ''" 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>
</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>
