85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<template>
|
|
<MobileCard clickable @click="$emit('open', item)">
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<div class="truncate text-sm font-700 text-gray-900">{{ subjectLine }}</div>
|
|
<div class="mt-0.5 truncate text-xs text-gray-500">{{ customerName }}</div>
|
|
</div>
|
|
<span
|
|
class="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-700"
|
|
:style="{ color: kindStyle.textColor, backgroundColor: kindStyle.bgColor }"
|
|
>
|
|
{{ kindLabel }}
|
|
</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">#{{ item.id ?? '-' }}</span>
|
|
</span>
|
|
<span>
|
|
<span class="text-gray-500">ریال:</span>
|
|
<span class="font-600 text-gray-900">{{ cashLabel }}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="metalEntries.length"
|
|
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 { walletKindTagStyle } from '@/utils/walletDisplay'
|
|
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 subjectLine = computed(() => props.item.wallet_subject || customerName.value)
|
|
const kindLabel = computed(() => props.item.wallet_kind_label || 'کیف پول')
|
|
const kindStyle = computed(() => walletKindTagStyle(props.item.wallet_kind))
|
|
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>
|