130 lines
4.2 KiB
Vue
130 lines
4.2 KiB
Vue
<template>
|
|
<div :class="rootClass">
|
|
<div
|
|
v-if="!boursecuLayout && meta?.has_count_based_products"
|
|
:class="rowClass"
|
|
class="flex justify-center w-full z-20"
|
|
>
|
|
محصولات:
|
|
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(countBasedInventory, false) }} عدد</div>
|
|
</div>
|
|
|
|
<BoursecuAssetsSummary
|
|
v-if="boursecuLayout"
|
|
variant="mobile"
|
|
icon-color="primary"
|
|
/>
|
|
|
|
<template v-else-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>
|
|
|
|
<div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
|
|
دارایی ریالی:
|
|
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
|
|
<BasicIcon
|
|
icon="vuesax-linear:info-circle"
|
|
size="18"
|
|
:color="iconColor"
|
|
@click="$emit('openRialModal')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="!boursecuLayout">
|
|
<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>
|
|
|
|
<div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
|
|
دارایی ریالی:
|
|
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
|
|
<BasicIcon
|
|
icon="vuesax-linear:info-circle"
|
|
size="18"
|
|
:color="iconColor"
|
|
@click="$emit('openRialModal')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import BoursecuAssetsSummary from './BoursecuAssetsSummary.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
|
|
boursecuLayout?: boolean
|
|
}>(),
|
|
{ plain: false, boursecuLayout: false }
|
|
)
|
|
|
|
defineEmits<{
|
|
openGoldModal: [metal: WalletMetalTotal, modalText?: string, modalTitle?: string, modalContent?: string]
|
|
openRialModal: []
|
|
}>()
|
|
|
|
const { assetsSummary } = useWalletAssets()
|
|
|
|
const rowClass = computed(() => (props.plain ? 'text-primary' : 'text-tertiary'))
|
|
const iconColor = computed(() => (props.plain ? 'primary' : 'tertiary'))
|
|
|
|
const rootClass = computed(() => {
|
|
if (props.boursecuLayout) {
|
|
return 'assets-section assets-section--boursecu rounded-lg px-3 py-3 mt-2'
|
|
}
|
|
if (props.plain) {
|
|
return 'py-2'
|
|
}
|
|
return 'bg-primary rounded-lg p-2 py-3 mt-2'
|
|
})
|
|
|
|
const meta = computed(() => assetsSummary.value?.meta)
|
|
const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
|
|
const primaryMetalTotal = computed(() => metalTotals.value[0])
|
|
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 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 `${usePriceWithoutType(resolveSummaryMetalWeight(metal, inventoryCards.value), false)}${metal.unit}`
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.assets-section--boursecu {
|
|
background-color: #eff5f3;
|
|
}
|
|
</style>
|