<!--
  -
  - Copyright (c) 2025. Jeffery Hsu - Achievement Report Generator
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with this program. If not, see <https://www.gnu.org/licenses/>.
  -
  -->

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { emitter } from '@renderer/utils/mitt'
import router from '@renderer/router'
import { useGlobalStore } from '@renderer/store'
import { storeToRefs } from 'pinia'

const store = useGlobalStore()
const { courseInfo } = storeToRefs(store)

const asideMenu = [
  { title: '课程信息', route: 'panelIndex' },
  { title: '学生管理', route: 'panelStudent' },
  { title: '成绩录入', route: 'panelScore' },
  { title: '录入试卷', route: 'panelPaper' },
  { title: '完成导出', route: 'panelFinal' }
]
const currentActiveIndex = ref(0)

const handleMenuItemClick = (idx: number) => {
  currentActiveIndex.value = idx
  router.push({ name: asideMenu[idx].route })
}

onMounted(() => {
  emitter.emit('titleBarShow', ['save'])
  if (courseInfo.value === null) {
    router.push({ name: 'start' })
  }
})
</script>

<template>
  <div class="flex w-full">
    <aside class="h-full w-72 shrink-0 border-r border-dashed border-gray-200 bg-gray-100">
      <div
        v-for="(item, index) in asideMenu"
        :key="index"
        class="m-2 flex h-12 cursor-pointer items-center justify-center rounded-xl text-lg transition-all hover:bg-blue-200 hover:text-white"
        :class="{ 'bg-blue-300 text-white': currentActiveIndex === index }"
        @click="handleMenuItemClick(index)"
      >
        <p>{{ item.title }}</p>
      </div>
    </aside>
    <router-view class="grow overflow-y-scroll" />
  </div>
</template>

<style scoped></style>
