<template>
  <page-index
    :is-news-dialog-open="isNewsDialogOpen"
    :news-items="newsItems"
    :quick-items="quickItems"
    :selected-news="selectedNews"
    @message-center="handleMessageCenter"
    @news="handleNews"
    @quick="handleQuick"
    @update:is-news-dialog-open="isNewsDialogOpen = $event"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageIndex from '@/components/PageIndex.vue'
import { useMessageStore } from '@/stores/messages'
import { useSnackbarStore } from '@/stores/snackbar'

const snackbar = useSnackbarStore()
const messageStore = useMessageStore()

const newsItems = [
  {
    id: 1,
    date: '29',
    month: '1月',
    title: '113學年度第2學期加退選開始',
    desc: '加退選時間為1月29日至2月9日止，請同學把握時間完成選課作業。',
    dept: '教務處',
    views: '1,234',
    isNew: true,
  },
  {
    id: 2,
    date: '27',
    month: '1月',
    title: '場地借用系統維護通知',
    desc: '系統將於本週六凌晨01:00-05:00進行維護，期間暫停服務。',
    dept: '總務處',
    views: '856',
    isNew: false,
  },
  {
    id: 3,
    date: '25',
    month: '1月',
    title: '112學年度第1學期期末成績已開放查詢',
    desc: '同學可至「查詢 > 教務資訊查詢 > 學期成績查詢」查看本學期成績。',
    dept: '教務處',
    views: '3,567',
    isNew: false,
  },
]

type NewsItem = (typeof newsItems)[number]

const quickItems = [
  { icon: '➕', title: '線上加選' },
  { icon: '➖', title: '線上退選' },
  { icon: '📊', title: '成績查詢' },
  { icon: '📅', title: '個人課表' },
  { icon: '📝', title: '網路請假' },
  { icon: '🏢', title: '場地借用' },
]

const selectedNews = ref<NewsItem | null>(null)
const isNewsDialogOpen = ref(false)

function handleNews(item: NewsItem) {
  selectedNews.value = item
  isNewsDialogOpen.value = true
}

// 點擊首頁「訊息中心」卡片，開啟共用的訊息清單 dialog
function handleMessageCenter() {
  messageStore.open()
}

function handleQuick(item: (typeof quickItems)[number]) {
  snackbar.show({ message: `前往：${item.title}`, color: 'info' })
}
</script>
