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

<template>
  <div
    class="dhome-surface dhome-hero-price"
    :class="{
      'dhome-hero-price--boursecu-open': isBoursecu && displayState === 'open',
      'dhome-hero-price--boursecu-closed': isBoursecu && displayState !== 'open',
    }"
  >
    <template v-if="displayState !== 'open'">
      <div class="dhome-hero-price__closed" :class="{ 'dhome-hero-price__closed--default': !isBoursecu }">
        <div class="dhome-hero-price__closed-icon">
          <BasicIcon
            :icon="displayState === 'closed' ? 'vuesax-linear:lock' : 'vuesax-linear:info-circle'"
            size="22"
            :color="isBoursecu ? '#ffffff' : '#64748b'"
          />
        </div>
        <p class="dhome-hero-price__closed-title">{{ statusTitle }}</p>
        <p class="dhome-hero-price__closed-hint">{{ statusHint }}</p>
      </div>
    </template>

    <template v-else>
      <span class="dhome-label" :class="{ 'dhome-label--boursecu': isBoursecu }">
        {{ isBoursecu ? 'قیمت لحظه‌ای کاتد مس' : 'قیمت لحظه‌ای' }}
      </span>
      <p v-if="!isBoursecu" 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'"
        >
          <BasicIcon
            :icon="percentChange > 0 ? 'vuesax-linear:arrow-up-2' : 'vuesax-linear:arrow-down-2'"
            size="14"
          />
          <span class="dhome-hero-price__delta-value">{{ formatSignedPercentChange(percentChange) }}</span>
        </span>
        <Vue3Odometer
          :value="displayGoldVal"
          class="dhome-hero-price__odometer o-text"
          :class="{ 'dhome-hero-price__odometer--boursecu': isBoursecu }"
        />
        <span class="dhome-hero-price__unit" :class="{ 'dhome-hero-price__unit--boursecu': isBoursecu }">ریال</span>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Vue3Odometer from 'vue3-odometer'
import 'odometer/themes/odometer-theme-default.css'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { useConfigStore } from '@/store/configStore'
import { useUserStore } from '@/store/userStore'
import { isBoursecuProject } from '@/utils/config'
import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
import {
  NO_QUOTE_MESSAGE,
  getPriceDisplayState,
  getStoreClosedMessage,
} from '@/utils/storeHours'
import { formatSignedPercentChange } from '@/utils/usePrice'

const config = useConfigStore()
const userStore = useUserStore()
const isBoursecu = isBoursecuProject()

const displayState = computed(() => getPriceDisplayState())

const statusTitle = computed(() =>
  displayState.value === 'closed' ? 'فروشگاه بسته است' : NO_QUOTE_MESSAGE
)

const statusHint = computed(() => {
  if (displayState.value === 'closed') {
    const custom = userStore.getValueByKey('closed_message')
    if (typeof custom === 'string' && custom.trim()) {
      return custom.replace(/<[^>]*>/g, '').trim()
    }
    return getStoreClosedMessage()
  }
  return 'در حال حاضر مظنه‌ای برای نمایش وجود ندارد.'
})

const displayGoldVal = computed(() => {
  if (displayState.value !== 'open') return 0
  return getTradeBuyPrice(lastPrice.value)
})

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

<style scoped lang="less">
.dhome-hero-price--boursecu-open {
  background: linear-gradient(135deg, #c98a4a 0%, #a86528 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(168, 101, 40, 0.28);
}

.dhome-hero-price--boursecu-closed {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(45, 55, 72, 0.22);
}

.dhome-label--boursecu {
  color: rgba(255, 255, 255, 0.92);
}

.dhome-hero-price__odometer--boursecu {
  color: #ffffff !important;
}

.dhome-hero-price__unit--boursecu {
  color: rgba(255, 255, 255, 0.85);
}

.dhome-hero-price__closed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.dhome-hero-price__closed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 4px;
}

.dhome-hero-price__closed-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.dhome-hero-price__closed-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.dhome-hero-price__closed--default {
  .dhome-hero-price__closed-icon {
    background: #f1f5f9;
  }

  .dhome-hero-price__closed-title {
    color: #334155;
  }

  .dhome-hero-price__closed-hint {
    color: #64748b;
  }
}
</style>