boursecu_user/src/views/base/home/components/AssetsSection.vue

<template>
  <div class="bg-primary rounded-lg p-2 py-3 mt-2">
    <div v-if="meta?.has_count_based_products" class="flex justify-center text-tertiary w-full z-20">
      محصولات:
      <div class="text-l mr-2 font-bold">{{ countBasedInventory }} عدد</div>
    </div>
    <template v-if="meta?.single_metal && primaryMetalTotal">
      <div class="flex mt-2 justify-center text-tertiary w-full z-20">
        {{ primaryMetalTotal.label }}:
        <div class="text-l mr-2 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
        <BasicIcon
          icon="vuesax-linear:info-circle"
          size="18"
          color="tertiary"
          @click="$emit('openGoldModal', primaryMetalTotal)"
        />
      </div>
    </template>
    <template v-else>
      <div
        v-for="metal in metalTotals"
        :key="metal.metal_id"
        class="flex mt-2 justify-center text-tertiary w-full z-20"
      >
        {{ metal.label }}:
        <div class="text-l mr-2 font-bold">{{ formatMetalTotal(metal) }}</div>
        <BasicIcon
          v-if="metal.metal_id === metalTotals[0]?.metal_id"
          icon="vuesax-linear:info-circle"
          size="18"
          color="tertiary"
          @click="$emit('openGoldModal', metal)"
        />
      </div>
    </template>
    <div class="flex mt-2 justify-center text-tertiary w-full z-20">
      دارایی ریالی:
      <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
      <BasicIcon @click="$emit('openRialModal')" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { usePriceWithoutType } from '@/utils/usePrice'
import { useWalletAssets } from '@/composables/useWalletAssets'
import type { WalletMetalTotal } from '@/models/walletAssets'
import { resolveSummaryMetalWeight } from '@/utils/productAssets'

const { assetsSummary, loadWalletAssets } = useWalletAssets()

defineEmits<{
  openGoldModal: [metal: WalletMetalTotal]
  openRialModal: []
}>()

const meta = computed(() => assetsSummary.value?.meta)
const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
const primaryMetalTotal = computed(() => metalTotals.value[0])
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
const countBasedInventory = computed(() =>
  (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
)

onMounted(() => {
  void loadWalletAssets()
})

function formatMetalTotal(metal: WalletMetalTotal) {
  return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
}
</script>