<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" class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl">
    <!-- 左侧大号价格 -->
    <section class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl">
      <div class="text-8xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.[0].slice(0,4) }}</div>
      <div class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px">NASDAQ: <span class="text-black">MINM</span></div>
      <div class="text-gray-500">{{ formatted }}</div>
    </section>
    <!-- 右侧信息卡片 -->
    <section class="grid grid-cols-2 gap-12">
      <div class="info-card">
        <div class="text-base text-gray-400">Open</div>
        <div class="text-2xl font-bold">{{ stockQuote.Open }}</div>
      </div>
      <div class="info-card">
        <div class="text-base text-gray-400">Change</div>
        <div class="text-3xl 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-base text-gray-400">Day's Range</div>
        <div class="text-2xl font-bold">{{ stockQuote.DaysRange }}</div>
      </div>
      <div class="info-card">
        <div class="text-base text-gray-400">52-Week Range</div>
        <div class="text-2xl font-bold">{{ stockQuote.Week52Range }}</div>
      </div>
      <div class="info-card">
        <div class="text-base text-gray-400">Volume</div>
        <div class="text-2xl font-bold">{{ stockQuote.Volume }}</div>
      </div>
      <div class="info-card">
        <div class="text-base text-gray-400">Market Cap</div>
        <div class="text-2xl font-bold">{{ stockQuote.MarketCap }}</div>
      </div>
    </section>
  </main>

</template>

<style scoped lang="scss">
/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
.glass-card {
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
}
.info-card {
  @apply glass-card p-5 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
}
</style>

