boursecu_user/src/views/base/fund/index.vue

<template>
  <div>
    <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow fixed md:absolute top-0 flex h-12 z-20">
      <div @click="router.back()">
        <BasicIcon icon="vuesax-linear:arrow-right-1"/>
      </div>
      <div class="mr-2">دارایی ها</div>
    </div>
    <div
      class="w-screen md:w-full h-[70vh] fixed md:absolute overflow-hidden"
      :class="isBazretalaProject() ? 'bazretala-fund-header' : 'text-tertiary bg-primary'"
    >
      <img
        :src="fundHeaderBackground"
        alt=""
        :class="isBazretalaProject()
          ? 'pointer-events-none z-0 absolute inset-0 w-full object-cover object-center'
          : 'pointer-events-none z-0 w-full absolute bottom-0 left-0 opacity-5'"
      />
      <div
        class="pt-15 flex flex-col relative z-10"
        :class="isBazretalaProject() ? 'text-white' : 'text-tertiary'"
      >
        <div class="font-bold mr-5 z-20">موجودی دارایی ها</div>
        <div v-if="meta?.has_count_based_products" class="flex mt-4 justify-center mt-2 w-full z-20">
          محصولات:
          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
        </div>
        <template v-if="isBazretalaProject()">
          <div class="flex justify-center mt-2 w-full z-20">
            دارایی نقره:
            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_silver ?? 0 }}گرم</div>
          </div>
          <div class="flex justify-center mt-2 w-full z-20">
            دارایی طلایی:
            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_gold_wallet ?? 0 }}گرم</div>
          </div>
        </template>
        <template v-else-if="meta?.single_metal && primaryMetalTotal">
          <div class="flex justify-center mt-2 w-full z-20">
            {{ primaryMetalTotal.label }}:
            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
          </div>
        </template>
        <template v-else>
          <div
            v-for="metal in metalTotals"
            :key="`metal-${metal.metal_id}`"
            class="flex justify-center mt-2 w-full z-20"
          >
            {{ metal.label }}:
            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(metal) }}</div>
          </div>
        </template>
        <div v-if="meta?.has_count_based_products && !isBazretalaProject()" class="flex justify-center mt-2 w-full z-20">
          مجموع موجودی:
          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
        </div>
        <div class="flex justify-center mt-2 w-full z-20">
          دارایی ریالی:
          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(cashWallet) }}ریال</div>
        </div>
        <div class="flex justify-center mt-2 w-full z-20">
          معادل ریالی مجموع دارایی ها:
          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(totalRialValue) }}ریال</div>
        </div>
      </div>
    </div>
    <div class="pt-[20rem] ">
      <div class="bg-gray-100 w-screen md:w-full z-20 relative rounded-t-3xl h-[calc(100vh-20rem-70px)] overflow-y-auto pb-15"
           style="box-shadow: 0px -2px 4px -2px #0000001A;">

        <div v-if="inventoryCards.length === 0 && !loading" class="w-full h-full flex justify-center items-center">
          <div>
            <img
              :src="fundEmptyImage"
              alt=""
              :class="isBazretalaProject() ? 'w-48 max-w-[11rem]' : 'w-70'"
            >
            <div v-if="nameProject !== 'abaeigold'" class="text-center text-lg">{{ fundEmptyText }}</div>
          </div>
        </div>

        <a-spin :spinning="loading">
          <div :class="loading ? 'h-[40vh]' : ''" class="grid grid-cols-2 gap-3 p-5">
            <Item
              v-for="item in inventoryCards"
              :key="item.product_id"
              :item="item"
              @click="router.push({ name: 'fund_info', params: { id: item.product_id } })"
            />
          </div>
        </a-spin>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import img from '@/assets/img/user_ly1.svg'
import empty from '@/assets/img/cash_empty.svg'
import Item from './components/Item.vue'
import { onMounted, computed } from 'vue'
import { loading } from '@/utils'
import { usePriceWithoutType } from '@/utils/usePrice'
import { useConfigStore } from '@/store/configStore'
import { useWalletAssets } from '@/composables/useWalletAssets'
import type { WalletMetalTotal } from '@/models/walletAssets'
import { resolveSummaryMetalWeight, fundPageInventoryCards } from '@/utils/productAssets'
import { useWalletStore } from '@/store/walletStore'
import {
  getProjectFundEmptyImage,
  getProjectFundEmptyText,
  getProjectFundHeaderBackground,
  isBazretalaProject,
} from '@/utils/config'

const nameProject = useConfigStore().config.name
const { assetsSummary, loadWalletAssets } = useWalletAssets()
const walletStore = useWalletStore()
const fundHeaderBackground = getProjectFundHeaderBackground(img)
const fundEmptyImage = getProjectFundEmptyImage(empty)
const fundEmptyText = getProjectFundEmptyText()

const meta = computed(() => assetsSummary.value?.meta)
const inventoryCards = computed(() => fundPageInventoryCards(assetsSummary.value?.inventory_cards ?? []))
const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
const primaryMetalTotal = computed(() => metalTotals.value[0])
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
const countBasedInventory = computed(() =>
  (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
)

onMounted(async () => {
  try {
    loading.value = true
    const tasks = [loadWalletAssets(true)]
    if (isBazretalaProject()) {
      tasks.push(walletStore.getMyWallet())
    }
    await Promise.all(tasks)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
})

function formatMetalTotal(metal: WalletMetalTotal) {
  return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
}
</script>

<style scoped>
.bazretala-fund-header {
  background-color: #000;
}

.bazretala-fund-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
</style>