handle huge things!

src/views/base/home/components/PriceStats.vue

@@ -4,7 +4,7 @@
       <div>بالاترین قیمت امروز</div>
       <div v-if="price" class="flex flex-col items-center mt-3">
         <div class="text-green-600 flex gap-1 text-xs items-center">
-          <div class="text-base">{{ usePriceWithoutType(price?.buy ?? 0) }}</div>
+          <div class="text-base">{{ usePriceWithoutType(highPrice) }}</div>
           ریال
         </div>
       </div>
@@ -15,7 +15,7 @@
       <div class="flex w-full mt-3 justify-evenly">
         <div v-if="price" class="flex flex-col items-center">
           <div class="text-red-600 flex gap-1 text-xs items-center">
-            <div class="text-base">{{ usePriceWithoutType(price?.sell ?? 0) }}</div>
+            <div class="text-base">{{ usePriceWithoutType(lowPrice) }}</div>
             ریال
           </div>
         </div>
@@ -25,10 +25,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { getTradeBuyPrice, getTradeSellPrice } from '@/utils/price'
+import { usePriceWithoutType } from '../../../../utils/usePrice'
 
-import {usePriceWithoutType} from "../../../../utils/usePrice";
-
-defineProps<{
+const props = defineProps<{
   price: any
 }>()
+
+const highPrice = computed(() => getTradeBuyPrice(props.price))
+const lowPrice = computed(() => getTradeSellPrice(props.price))
 </script>