<script setup>
import { defineAsyncComponent } from "vue";

const size375 = defineAsyncComponent(() =>
  import("@/views/stock-quote/index.vue")
);
const size768 = defineAsyncComponent(() =>
  import("@/views/stock-quote/index.vue")
);
const size1440 = defineAsyncComponent(() =>
  import("@/views/stock-quote/index.vue")
);
const size1920 = defineAsyncComponent(() =>
  import("@/views/stock-quote/index.vue")
);

const { viewComponent, componentKey } = useViewSelector({
  size375,
  size768,
  size1440,
  size1920,
});

const bg = usePageBackground("bg-stock-quote.png");

definePageMeta({
  layout: "default",
});

// 国际化支持
const { locale } = useI18n();

const seoTitles = {
  zh: "股票报价 | 实时股价 | FiEE",
  en: "Stock Quote | Real-time Share Price | FiEE",
  ja: "株価情報 | リアルタイム株価 | FiEE",
  "zh-TW": "股票報價 | 實時股價 | FiEE",
};

const seoDescriptions = {
  zh: "监控FiEE的实时股价、交互式图表和历史市场数据。",
  en: "Monitor FiEE's real-time stock price, interactive charts, and historical market data.",
  ja: "FiEEのリアルタイム株価、インタラクティブチャート、過去の市場データを監視します。",
  "zh-TW": "監控FiEE的實時股價、交互式圖表和歷史市場數據。",
};

const currentLocale = locale.value;

useSeoMeta({
  title: seoTitles[currentLocale] || seoTitles.en,
  description: seoDescriptions[currentLocale] || seoDescriptions.en,
  ogTitle: seoTitles[currentLocale] || seoTitles.en,
});

provide("pageBg", bg);
</script>

<template>
  <component :is="viewComponent" :key="componentKey" />
</template>
