<script setup>
import { useStockQuote } from '@/store/stock-quote/index.js';
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
getStockQuate();
</script>

<template>
  <main class="min-h-60vh flex flex-col items-center justify-start  px-2 py-5 pt-500px">
    <!-- 价格卡片 -->
    <section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5">
      <div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.[0].slice(0,4) }}</div>
      <div class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
      <div class="text-gray-500 text-60px">{{ formatted }}</div>
    </section>
    <!-- 信息卡片列表 -->
    <section class="w-full max-w-90vw grid grid-cols-2 gap-2">
      <div class="info-card">
        <div class="text-xs text-gray-400">Open</div>
        <div class="text-lg font-bold">{{ stockQuote.Open }}</div>
      </div>
      <div class="info-card">
        <div class="text-xs text-gray-400">Change</div>

        <div class="text-lg font-bold" 
        :class="stockQuote.change?.[1]?.startsWith('-') ? 'text-red-500' : (stockQuote.change?.[1]?.startsWith('+') ? 'text-green-500' : '')">
          {{ stockQuote.change?.join('') }}</div>
      </div>
      <div class="info-card">
        <div class="text-xs text-gray-400">Day's Range</div>
        <div class="text-lg font-bold">{{ stockQuote.DaysRange }}</div>
      </div>
      <div class="info-card">
        <div class="text-xs text-gray-400">52-Week Range</div>
        <div class="text-lg font-bold">{{ stockQuote.Week52Range }}</div>
      </div>
      <div class="info-card">
        <div class="text-xs text-gray-400">Volume</div>
        <div class="text-lg font-bold">{{ stockQuote.Volume }}</div>
      </div>
      <div class="info-card">
        <div class="text-xs text-gray-400">Market Cap</div>
        <div class="text-lg font-bold">{{ stockQuote.MarketCap }}</div>
      </div>
    </section>
  </main>
</template>

<style scoped>
.glass-card {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(200,200,255,0.18);
  box-shadow: 0 2px 8px 0 rgba(31,38,135,0.08);
}
.info-card {
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow: 0 1px 4px 0 rgba(31,38,135,0.06);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
</style>
