<script setup lang="ts">
import BasicInfo from './basic-info/index.vue'
import EnglishData from './study-data/english-data.vue'
import EnglishWordData from './study-data/english-word-data.vue'
import MathData from './study-data/math-data.vue'
import ChineseData from './study-data/chinese-data.vue'
import Rank from './study-data/rank.vue'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import {
  nav_basic,
  nav_chinese,
  nav_english,
  nav_english_word,
  nav_math,
  nav_rank,
  navList,
  useStudentManageStore,
} from './store'

const { schoolId, classId, activeNav } = storeToRefs(useStudentManageStore())

const schoolClass = ref({ schoolId, classId } as any)

watch(
  () => schoolClass.value,
  val => {
    if (!val.schoolId) return

    schoolId.value = val.schoolId
    classId.value = val.classId
  },
  { immediate: true, deep: true },
)

const cls = computed(() => schoolClass.value.class || {})

defineOptions({
  name: 'StudentManage',
})
</script>
<template>
  <div class="page">
    <div class="top">
      <div class="left">
        <BackBar />
        <school-class-select v-model="schoolClass" />
      </div>
      <div class="right">
        <SelectTab v-model="activeNav" :dataList="navList" class="nav-tab" type="small"></SelectTab>
      </div>
    </div>

    <div v-if="activeNav === nav_rank">
      <rank :cls="cls" />
    </div>
    <div v-if="activeNav === nav_basic">
      <basic-info :cls="cls" :school-id="schoolClass.schoolId" />
    </div>
    <div v-if="activeNav === nav_english_word">
      <english-word-data :cls="cls" />
    </div>
    <div v-if="activeNav === nav_english">
      <english-data :cls="cls" />
    </div>
    <div v-if="activeNav === nav_math">
      <math-data :cls="cls" />
    </div>
    <div v-if="activeNav === nav_chinese">
      <chinese-data :cls="cls" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
@use './index.scss' as *;

.page {
  @include main_bg;
  // @include main_bg;
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  position: relative;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2vh;
    }
  }
}
</style>
