boursecu_user/src/views/base/home/components/AssetsSection.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>

    <template v-if="boursecuAssetRows.length">
      <div
        v-for="(row, index) in boursecuAssetRows"
        :key="row.id"
        :class="[rowClass, index > 0 ? 'mt-2' : '']"
        class="flex justify-center w-full z-20"
      >
        {{ row.label }}:
        <div class="text-l mr-2 font-bold">{{ row.value }}</div>
        <BasicIcon
          v-if="row.info !== 'none'"
          icon="vuesax-linear:info-circle"
          size="18"
          :color="iconColor"
          @click="handleRowInfo(row)"
        />
      </div>
    </template>

    <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>
    </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(totalRialValue) }} ریال</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 { usePriceWithoutType } from '@/utils/usePrice'
import { useWalletAssets } from '@/composables/useWalletAssets'
import type { WalletMetalTotal } from '@/models/walletAssets'
import {
  buildBoursecuHomeAssetRows,
  resolveSummaryMetalWeight,
  type HomeAssetRow,
} from '@/utils/productAssets'

const props = withDefaults(
  defineProps<{
    plain?: boolean
    boursecuLayout?: boolean
  }>(),
  { plain: false, boursecuLayout: false }
)

const emit = 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 boursecuAssetRows = computed(() =>
  props.boursecuLayout ? buildBoursecuHomeAssetRows(assetsSummary.value) : []
)
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 `${usePriceWithoutType(resolveSummaryMetalWeight(metal, inventoryCards.value), false)}${metal.unit}`
}

function handleRowInfo(row: HomeAssetRow) {
  if (row.info === 'rial') {
    emit('openRialModal')
    return
  }

  if (row.metal) {
    emit('openGoldModal', row.metal, row.modalText, row.modalTitle, row.modalContent)
  }
}
</script>

<style scoped lang="less">
@boursecu-surface-border: #d4e3de;

.assets-section--boursecu {
  background-color: #eff5f3;
  border: 2px solid @boursecu-surface-border;
}
</style>