boursecu_user/src/views/base/home/desktop/components/DesktopLivePrice.vue

<template>
  <div class="dhome-surface dhome-hero-price">
    <span class="dhome-label">قیمت لحظه‌ای</span>
    <p class="dhome-hero-price__brand">{{ config.config?.name_fa }}</p>
    <div class="dhome-hero-price__value-row">
      <span
        v-if="percentChange !== 0"
        class="dhome-hero-price__delta"
        :class="percentChange >= 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
      >
        {{ useTowDecimal(percentChange) }}%
      </span>
      <Vue3Odometer
        :value="displayGoldVal"
        class="dhome-hero-price__odometer o-text"
        style="font-family: iran-sans"
      />
      <span class="dhome-hero-price__unit">ریال</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Vue3Odometer from 'vue3-odometer'
import 'odometer/themes/odometer-theme-default.css'
import { useConfigStore } from '@/store/configStore'
import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
import { useTowDecimal } from '@/utils/usePrice'

const config = useConfigStore()

const isMarketClosed = computed(
  () => lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0,
)

const displayGoldVal = computed(() => {
  if (isMarketClosed.value) return 0
  return getTradeBuyPrice(lastPrice.value)
})

const percentChange = computed(() => {
  if (!getTradeBuyPrice(lastPrice.value)) return 0
  return percentPriceChanged()
})
</script>