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

<template>
  <BasicActionSheet v-model:show="visible">
    <div class="pb-20">
      <div>
        <div class="w-full text-center font-bold">موجودی ها</div>
        <div class="h-30vh overflow-y-auto">
          <div class="mt-5">
            <template v-for="metal in metalTotals" :key="metal.metal_id">
              <BasicInfoItem
                class="flex justify-between"
                :title="metal.label"
                is-line
                :value="formatMetalTotal(metal)"
              />
              <template v-for="card in cardsByMetal(metal.metal_id)" :key="`card-${card.product_id}`">
                <BasicInfoItem
                  class="flex justify-between mr-4 text-sm"
                  :title="card.title"
                  is-line
                  :value="formatInventoryCardValue(card)"
                />
              </template>
              <a-divider class="!my-1" />
            </template>
            <BasicInfoItem
              class="flex justify-between"
              title="دارایی کیف پول ریالی"
              is-line
              :value="usePrice(cashWallet)"
            />
            <a-divider class="!my-1" />
            <BasicInfoItem
              class="flex justify-between"
              title="معادل ریالی مجموع دارایی ها"
              is-line
              :value="usePrice(totalRialValue)"
            />
          </div>
        </div>
      </div>
    </div>
  </BasicActionSheet>
</template>

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

const props = defineProps<{
  show: boolean
  walletInfo: any
  goldVal: number
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
}>()

const { assetsSummary, loadWalletAssets } = useWalletAssets()

const visible = computed({
  get: () => props.show,
  set: (val) => emit('update:show', val),
})

const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)

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

watch(
  () => props.show,
  (open) => {
    if (open) {
      void loadWalletAssets(true)
    }
  }
)

function cardsByMetal(metalId: number) {
  return inventoryCards.value.filter((card) => Number(card.metal_id) === metalId)
}

function formatMetalTotal(metal: WalletMetalTotal) {
  return `${metal.total_weight} ${metal.unit}`
}
</script>