<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import { useStockQuote } from '@/store/stock-quote/index.js';
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
getStockQuate();
</script>

<template>

  <main ref="main">
    <main class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px">
      <!-- 价格卡片 -->
      <section class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6">
        <div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.slice(0,4) }}</div>
        <div class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
        <div class="text-gray-500 text-70px">{{ formatted }}</div>
      </section>
      <!-- 信息卡片列表 -->
      <section class="w-full max-w-80vw grid grid-cols-3 gap-4">
        <div class="info-card">
          <div class="text-sm text-gray-400">Open</div>
          <div class="text-xl font-bold">{{ stockQuote.open }}</div>
        </div>
        <div class="info-card">
          <div class="text-sm text-gray-400">Change</div>
          <div class="text-xl font-bold" 
        :class="stockQuote.change?.includes('-') ? 'text-red-500' : (stockQuote.change?.includes('+') ? 'text-green-500' : '')">
          {{ stockQuote.change }}</div>
        </div>
        <div class="info-card">
          <div class="text-sm text-gray-400">Day's Range</div>
          <div class="text-xl font-bold">{{ stockQuote.daysRange }}</div>
        </div>
        <div class="info-card">
          <div class="text-sm text-gray-400">52-Week Range</div>
          <div class="text-xl font-bold">{{ stockQuote.week52Range }}</div>
        </div>
        <div class="info-card">
          <div class="text-sm text-gray-400">Volume</div>
          <div class="text-xl font-bold">{{ stockQuote.volume }}</div>
        </div>
        <div class="info-card">
          <div class="text-sm text-gray-400">Market Cap</div>
          <div class="text-xl font-bold">{{ stockQuote.marketCap }}</div>
        </div>
      </section>
    </main>
  </main>
</template>

<style scoped lang="scss">
.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 3px 12px 0 rgba(31,38,135,0.08);
}
.info-card {
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow: 0 2px 6px 0 rgba(31,38,135,0.06);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
</style>

