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

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

<script setup lang="ts">
import { computed } 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 props = withDefaults(
  defineProps<{
    plain?: boolean
  }>(),
  { plain: false }
)

/** Display-only — wallet assets are loaded once in useHomePageData.initHomePageData() */
const { assetsSummary } = useWalletAssets()

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

const rowClass = computed(() => (props.plain ? 'text-primary' : 'text-tertiary'))
const iconColor = computed(() => (props.plain ? 'primary' : 'tertiary'))

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)
)

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