<script lang='ts' setup>
import { eyeOffOutline, eyeOutline } from "ionicons/icons";

const walletStore = useWalletStore();
const { tradingBalances, totalAssetValue } = storeToRefs(walletStore);
const tradingBalanceVisible = useStorage("trading-balances-visible", true);

onMounted(() => {
  walletStore.syncTradingBalances();
});
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>交易账户</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <div class="flex flex-col gap-1 ion-padding border-b border-text-900 mb-2">
        <div class="text-sm text-gray-500 flex items-center gap-2" @click="tradingBalanceVisible = !tradingBalanceVisible">
          <div class="text-md">
            总资产估值
          </div>
          <ion-icon :icon="tradingBalanceVisible ? eyeOffOutline : eyeOutline" />
        </div>
        <div class="flex items-end gap-2">
          <div class="text-2xl font-bold">
            {{ tradingBalanceVisible ? totalAssetValue.tradingValueUsd : Array(totalAssetValue.tradingValueUsd.toString().length).fill("*").join("") }}
          </div>
          <div class="text-md font-bold">
            USDT
          </div>
        </div>
      </div>

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

      <ion-list lines="none" class="space-y-5 mt-2!">
        <ion-item v-for="asset, i in tradingBalances" :key="i">
          <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-500 font-semibold">
                总共: ${{ Number(asset.total).toFixed(2) }}
              </div>
              <div class="text-xs text-text-500 font-semibold">
                冻结: ${{ Number(asset.frozen).toFixed(2) }}
              </div>
            </div>
          </div>
          <div class="w-fit font-bold">
            ${{ Number(asset.available).toFixed(2) }}
          </div>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

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