boursecu_admin/src/pages/menuPages/wallet/components/WalletMobileListItem.vue

<template>
  <MobileCard clickable @click="$emit('open', item)">
    <div class="space-y-1">
      <div class="flex items-center justify-between gap-2">
        <span class="min-w-0 truncate text-sm font-700 text-gray-900">{{ customerName }}</span>
        <span class="shrink-0 text-xs text-gray-400">#{{ item.id ?? '-' }}</span>
      </div>

      <div class="flex items-center justify-between gap-2 text-xs text-gray-600">
        <span>
          <span class="text-gray-500">ریال:</span>
          <span class="font-600 text-gray-900">{{ cashLabel }}</span>
        </span>
        <span v-if="metalEntries.length === 1">
          <span class="text-gray-500">{{ metalEntries[0].label }}:</span>
          <span class="font-700 text-gray-900">{{ metalEntries[0].display }}</span>
        </span>
      </div>

      <div
        v-if="metalEntries.length > 1"
        class="flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-600"
      >
        <span v-for="entry in metalEntries" :key="entry.metal_id">
          <span class="text-gray-500">{{ entry.label }}:</span>
          <span class="font-700 text-gray-900">{{ entry.display }}</span>
        </span>
      </div>
    </div>
  </MobileCard>
</template>

<script setup lang="ts">
import type { Wallet } from '@/model/wallet'
import MobileCard from '@/components/mobile/MobileCard.vue'
import { usePrice } from '@core/utils/usePrice'
import { formatMetalDisplayValue, metalCellValue } from '@/utils/metalWeight'
import type { WalletMetalColumn } from '../hooks/walletColumns'

const props = defineProps<{
  item: Wallet
  metals?: WalletMetalColumn[]
}>()

defineEmits<{
  (e: 'open', item: Wallet): void
}>()

const customerName = computed(() => props.item.customer?.name || '-')
const cashLabel = computed(() => usePrice(props.item.cash ?? 0, true, ''))

function metalValue(metalId: number): number {
  return metalCellValue(props.item as Record<string, unknown>, metalId)
}

const metalEntries = computed(() => {
  const metals = props.metals?.length
    ? props.metals
    : [{ metal_id: 1, label: 'طلا' }]

  return metals
    .map((metal) => {
      const value = metalValue(metal.metal_id)
      return {
        metal_id: metal.metal_id,
        label: metal.label,
        display: formatMetalDisplayValue(value, metal.metal_id)
      }
    })
    .filter((entry) => metalValue(entry.metal_id) !== 0)
})
</script>