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

const size375 = defineAsyncComponent(() =>
  import("@/views/financialinformation/annualreports/index.vue")
);
const size768 = defineAsyncComponent(() =>
  import("@/views/financialinformation/annualreports/index.vue")
);
const size1920 = defineAsyncComponent(() =>
  import("@/views/financialinformation/annualreports/index.vue")
);

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

const bg = usePageBackground("bg-events-calendar.png");

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

// ✅ 使用通用 SEO 配置
useSeoSetup({
  titles: {
    zh: "年度报告 | 年度财务业绩与审计报告 | FiEE",
    en: "Annual Reports | Financial Performance & Audit Reports | FiEE",
    ja: "年次報告書 | 年次財務業績と監査報告書 | FiEE",
    "zh-TW": "年度報告 | 年度財務業績與審計報告 | FiEE",
  },
  descriptions: {
    zh: "访问FiEE的年度财务报告、股东信、企业业绩回顾和审计报告。全面了解公司年度经营成果和财务状况。",
    en: "Access FiEE's annual financial reports, shareholder letters, corporate performance reviews and audit reports. Comprehensive overview of yearly operations and financials.",
    ja: "FiEEの年次財務報告書、株主レター、企業業績レビュー、監査報告書にアクセスします。年間の事業成果と財務状況の包括的な概要をご確認ください。",
    "zh-TW":
      "訪問FiEE的年度財務報告、股東信、企業業績回顧和審計報告。全面了解公司年度經營成果和財務狀況。",
  },
  ogImage: "/assets/image/og-annual.png",
  pageType: "website",
});

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

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