<template>
  <SKAnalysis
    :bar-data="barData"
    :chart1-title="chart1Title"
    :chart2-title="chart2Title"
    :chart3-title="chart3Title"
    :pie1-data="pie1Data"
    :pie2-data="pie2Data"
    :stats="stats"
    :trend-data="trendData"
    :trend-title="trendTitle"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SKAnalysis from '@/components/SKAnalysis.vue'

// Mock Data
const stats = ref([
  {
    title: '學生總數',
    value: '2,580',
    icon: 'mdi-account-school',
    color: 'primary',
    label: '總學籍人數',
    total: '120,000',
  },
  {
    title: '平台訪問',
    value: '20,000',
    icon: 'mdi-chart-pie',
    color: 'error',
    label: '今日訪問量',
    total: '500,000',
  },
  {
    title: '教材下載',
    value: '8,000',
    icon: 'mdi-cloud-download',
    color: 'warning',
    label: '本月下載次數',
    total: '120,000',
  },
  {
    title: '圖書館借閱',
    value: '5,000',
    icon: 'mdi-book-open-page-variant',
    color: 'success',
    label: '總借閱量',
    total: '50,000',
  },
])

const trendTitle = ref('數位學習平台流量')
const trendData = ref([0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0])

const chart1Title = ref('學生核心素養指標 (平均)')
const barData = ref([
  { label: '道德實踐 (Moral)', value: 85, color: 'info' },
  { label: '智力發展 (Intellectual)', value: 72, color: 'success' },
  { label: '體育健康 (Physical)', value: 90, color: 'warning' },
  { label: '群育合作 (Social)', value: 65, color: 'error' },
  { label: '美感教育 (Aesthetic)', value: 80, color: 'primary' },
])

const chart2Title = ref('訪問裝置來源')
const pie1Data = ref({
  value: 75,
  label: '行動裝置',
  color: 'purple-accent-2',
})

const chart3Title = ref('本學期及格率')
const pie2Data = ref({
  value: 92,
  label: '全校平均',
  color: 'teal-lighten-1',
  icon: 'mdi-check-decagram',
})
</script>
